Front-End Web Development
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
. 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
, 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
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.
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
biturl = "your url";
Save it and post your link in the comments.
6.4 Who's With Me?
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?
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
Head over to our Repository on GitHub
and get to work.
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
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
If you want a more in depth, design focused, course with videos, go with Udacity
If you want a more interactive experience, take the Codecademy
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!