6. Web Design

You are probably wondering why we are doing this out of order. Shouldn’t HTML and CSS come before JavaScript? Well, ordinarily. However, we felt that JavaScript was more central to coding skills. We are adding HTML and CSS because after we started doing the Android training, we realized that it would be helpful to know HTML and CSS prior to starting Android Apps due to the amount of XML layout involved. Also, it is a valuable skill to have.

6.0 Documentation and Reference Pages

Bookmark the reference page at W3Schools or Mozilla. Personally, I prefer W3Schools. Also, you may want to look at Stack Over Flow when you get stuck. Honestly, if you Google a question, Stack Over Flow will likely come up.

6.1 Web Design is Programming?

Initially I thought that web design was not programming. However after watching the following video by ComputerPhile, I realized it actually was programming. Honestly, you can skip this video.

6.2 What’s the Point of CSS?

If at first you don’t see the point of CSS, try making a website with a lot of different pages using only HTML. Now change the formatting on each and every page. It is a pain in the wrist to do. CSS enables you to set the style and formatting for the entire web site. Then if you want to change it for whatever reason (picky clients cough), you can change it quickly and easily. I reckon this is why CSS was developed.

6.3 Free Code Camp

Go here: freecodecamp.com

It starts out pretty slow, but there’s a lot of good advice in the beginning sections so make sure you read through it. There’s an active community here of coders. The chat rooms are very active, so take their advice and set notifications to only alert you when you are mentioned.

6.4 Design a Web Page

6.4.1 Content and Theme

This is very important. Do NOT skip these steps.

6.4.1.1 Audience

Who is your audience? What demographics would you like to reach with your website?

64.1.2 Topic

Do you want to make a website for a political candidate? Do you want to focus on a single issue? Do you want to focus on a particular interest such as coding or music?

6.4.1.3 Subtopics

What content elements will your website need?

6.4.1.4 Overall Theme

What type of message do you want to get across? What color scheme would best express this message? Is it edgy? Is it reserved? Is it educational? How does your overall theme match your target audience?

6.4.2 Draw it Out

This is very important. Do NOT skip these steps.

  1. Get a sheet of paper and a pencil. Maybe some colored pencils. Or a white board and some markers if you have it. Or a tablet if you prefer.
  2. Draw the elements you want on the website.
  3. Consider the best ways to navigate the website.
6.4.3 Code It
6.4.3.1 Text Editor

Go old school and design it with a text editor. This is more fun. This can be useful if you have your own server or if you have a web shell that you can upload files and folders to.

  1. Create a folder with the page name
  2. Create a text file in that folder and change the name file type from .txt to .htm and name it index.htm
  3. Open in a text editor
  4. Code
  5. Save it
  6. Open it in a web browser to test it out
  7. Upload it to your server
6.4.3.2 Free Sites

Most free sites will make you use their design software. Most allow you to input html. However, they may not recognize or allow certain scripts.

It may take some getting use to. Wix might be easier than Weebly or Word Press from my experience. If you are considering buying hosting, Word Press may be a good choice to start with as you may be able to transfer it to a Host Gator site. That’s why I used Word Press. However, we haven’t quite gotten to the point where we would transfer it . Therefore, I cannot say for certain how easy or how difficult it is.

6.4.3.3 Other Software

Personally, I haven’t used desktop web software. I have only used the built in web design software on the web hosting sites I have used and text editors. Don’t judge. Ask someone who has. You can also use word processors and save the document as html. The markup might be funky though.

For extra fun, try Latex software like Lyx or try something like Sage Math. Well, if you need some fancy formatting or computation. Hey, it could happen. I reckon liberty-lovers are more into math than most people. Although, we may need to do more research to determine how true that is.

6.5 Other Resources

While FreeCodeCamp is definitely going to keep you busy, there is a plethora of other HTML and CSS resources out there. We also saved a lot of web design YouTube playlists on our YouTube channel as well.

6.5.1 Khan Academy

If you prefer projects, check out the Khan Academy HTML course. Sign up for the Khan Academy course at khanacademy.org/coaches and enter code FJEQJ6.

6.5.2 Udacity

If you want a more in depth, design focused, course with videos, go with Udacity.

6.5.3 Codecademy

If you want a more interactive experience, take the Codecademy course.

6.5.4 Suggestions Welcome

Or just pick whichever one you like the best based on previous experience. If you find another great resource that you prefer, comment below.

Congratulations, you have completed the level 6 training!

Onward to Level 7!

2 thoughts on “6. Web Design

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s