Website Designing

Goggwell · August 21, 2014

Designing A Website

By: Goggwell

T H I S I S M Y T U T O R I A L

I bet you're all here to find out how to design a website. Lucky guess

Well, that's simple, if you know how to code (which I am assuming you don't). For starters, you have to learn the basics of HTML/CSS, with jQuery as an added bonus.

(WHICH by the way you can learn for free on Codecademy)

But, there are ways to design websites without coding. Luckily for you, I have found several options!

1. You can make a design on Photoshop and have someone else figure out all of the interface options

By this I mean you can design your own interface on Photoshop. This could be easy or hard, depending on your knowledge of Graphic Designing.

2. Use Adobe Muse

Adobe has created a program called Adobe Muse CC where you can create a new website without any coding whatsoever. If you're willing to spend a little cash, you'll be designing interfaces in no time!

Here's a link to the official Adobe Muse Tutorial Site

-=-

https://helpx.adobe.com/muse/how-to/create-website.html

-=-

3. Find website makers using Google

There are tons of places to make websites for free using a website maker ONLINE. It's fast, easy-to-use, and best of all, CODING-FREE! Some are for free, but more advanced ones cost a few dollars.

Some are drag-and-drop, and some are computed to your liking (or disliking, if you like drag-and-drop).

But if you wish to code a website, here are a few pointers:

- To get started, you need to learn how to code, obviously...

So here are a few sites to learn how to code (for free, or not )

CODECADEMY (Free and intuitive)

(here's my description of this website)

Codecademy offers a wide range and selection of coding languages that can be learned step-by-step from courses created and perfected by coding intellects and gurus. It's sleek, intuitive design, followed by an easy-to-follow tutorial is best tailored and suited and directed for beginners.

This website is also COMPLETELY FREE, meaning that you do not have to spend a dime on these amazing courses. Also, if you are stuck on a course, you can always ask for help or look for solutions in the Codecademy Forums. In conclusion, this site is A MUST if you want to learn the basics of coding.

Here are a few other sites that I have yet to take part in, but could be interesting:

- KHANACADEMY -

(How I found out: From another forum)

- CODEYEAR -

(How I found out: My ICT Class)

If you are already good with coding, then I recommend you start off here:

THE CODING SECTION

So far, I only know of 2 sites/programs that you use to create websites with code. Unless I am mistaken and you could create websites from scratch using NOTEPAD ++

Bootstrap:

Bootstrap is an epic site maker that creates incredible designs that we all enjoy. From simple yet elegant pages to complex and interesting sites, Bootstrap is one tool to get.

Here is a link to their official site:

http://getbootstrap.com

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

It's free and fun to use, and there are also pre-made templates that you can use as well (free and premium templates available, just search )

With Bootstrap, you can make websites that look like this:

(Sorry if the pictures are a little blurry. I took snapshots using the Snipping Tool)

You can find pre-made templates in the Downloads below (just scroll down to the bottom of this thread to find downloads)

If you find yourself stuck, here's a Get Started topic from the site itself:

http://getbootstrap.com/getting-started/

There's also Wordpress, but I have no idea how to use it

The Actual Code

I have a code for a basic Bootstrap document built upon HTML/CSS (you need Bootstrap to load this code)

Just write this code somewhere (like Notepad ++) and just rewrite the file to 'index.html' or something like that (without the quotation marks) to get it working.

Here's the code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Of course, this is just the basic code. There's much more coding involved to make a fully functioning website.

Make sure you have HTML/CSS and jQuery coding files ready/installed into your computer. The code will work that way

So after having said all that, this stuff is what you need to get ready!

Downloads:

Free Bootstrap Templates:

http://startbootstrap.com

http://www.templatemag.com/free-bootstrap-templates/

Adobe Muse:

https://creative.adobe.com/products/download/muse

Hope you found this tutorial helpful!

There will be much more information in the future. Because right now I am studying web design (THAT'S RIGHT)

Good luck to everyone!