Front-End Web Development

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. We will be making a web app that is similar to the Scratch app we made earlier called Who's With Me. This app will help voters determine which down ticket candidates they agree with the most.

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 this ComputerPhile video, 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. Do not be afraid to jump around. You can do the JavaScript portion before the HTML/CSS portion if you prefer. The algorithm challenges are not necessarily in order of difficulty. 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. You can also join our Gitter chatroom.

6.3.1 Random Liberty Quotes

Add more quotes to our JSON based liberty quote randomizer. Visit https://github.com/coders4liberty/liberty-quotes and click Fork in the upper right hand corner. Then add your own quote objects to the quotes array using the given format.  If the author does not have a twitter handle use null for the twitter handle. Include the @ on the twitter handle.

{
"quote" : "your quote",
"author" : "person who said said quote",
"twitterHandle" : "@twitter handle of said author."
}, // no comma on last entry

Then click Change View and switch it to full. Copy the url and go to bit.ly to get a short url. Then switch back to editor view. Finally, paste the url in the javascript between the quotes where it says:

biturl = "your url";

Save it and post your link in the comments.

6.4 Who's With Me?

While isidewith.com is a great resource for Presidential campaigns, it does not have information on down ticket candidates. We will make a front end app for a political quiz using JavaScript.

6.5.1 Design It

What questions do you want to ask? What is the best way to state the question? Do you want to put it on a left-right spectrum, use the Nolan chart, or use a different scoring system. How will you weigh each question? Will you ask the user to state how important the issue is to them? How do you match the users answers to candidates? Will you need the candidates to complete a survey or can you use stated policy positions?

6.5.2 GUI

How do you want to format the questions? Do you want to use a form? Do you want each question to appear one at a time or have the user scroll through the questions? How do you want to display the results?

6.5.3 Code It

https://github.com/coders4liberty/whoWme Head over to our Repository on GitHub and get to work.

6.5.3.1 JSON

For extra fun, create an array of candidate objects JSON style. Add attributes to your objects for the candidate's name, position they are running for, stances on issues (as a numeric score), experience, and anything else you think would help inform voters.

6.6 Other Resources

While FreeCodeCamp is definitely going to keep you busy, there is a plethora of other web development 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!