Build your own website using HTML and CSS

HTML and Web Fundamentals

Welcome students
Thank you for signing up for my class. Today you are all making personal history. I think you will find that learning a creative and highly practical skill such as this can be quite empowering! Learning to build webpages will open doors to greater possibilities in your life and increase the limits of your communication with the world.

Motivation

I would like to encourage everyone to enjoy the class and have fun learning and also to think of yourself a confident captain of your ship sailing the seas of code. Never allow yourself to become to discouraged because we all have days the code breaks and eventually you will get it! The students in my classes who have gone the farthest were always the ones with the most confidence.

Here is an example of the continuous exercise website I will teach you to build by the end of the class:

https://jonathangrover.com/teaching/students/sksh-html-css/site-mobile/

Paced Learning

There are over 11 hours of learning videos! Whaaaat? I suggest learning in small sections like doing Syllabus lesson 2. HTML & Web Fundamentals one day and then lesson 3. Tables, Forms, & Iframes on another day. Doing about 2 lessons each week will get your site up and running in just 4 weeks. If your busy schedule does not allow for this pace, no problem, you will have access to the course material indefinitely. So you can learn at your own pace!

Did you know that our brain actually keeps learning things after we stop thinking... It's called associative memory. It is important to give your brain some down time to absorb the material and so it can make connections between topics from one day to the next. If you feel burnt out, take breaks. I also suggest each day you review a few things from previous days. Typing our code we learned from day 1 on day 5 will help you store it in long-term memory.

Viewing Tips

If you find the code is hard to read when watching the videos you can change the quality setting at the bottom menu in Youtube to HD. I shot everything high resolution so you should get excellent clarity even at fullscreen.

Comfort

The suggested clothing for this class is your pajamas. Think loose, warm, and cozy. Make sure to have your favorite drink on hand and try to pick a time when you do not feel rushed. Try stretching in between videos also.

Office Hours

Live stream Office Hours has been removed from this course for the time being as it is now a self study course. You can still watch recordings of over 16 hours worth of pre-recorded office hours from this Youtube Playlist: http://www.youtube.com/playlist?list=PLj148bJp5wizBZyx7XDmCstdcD-cWtvDY

I will still be monitoring and answering questions in the Q & A discussion area from time to time however. Other students will also be able to help answer questions there as well.

Code Challenges

Code Challenges will walk you step by step to building a website project. Feel free to upload your code (see video 1.1.7 Site Publishing) and provide the domain (ex: yoursite.com) as a link at your project page to receive feedback from your peers. Make sure to visit others projects as well to give feedback and see what your fellow classmates are building.

Troubleshooting

Along the way your code may not work right the first time. The following are some suggestions to make solving these issues as quick and easy as possible:
1. Make sure you validate your HTML and CSS code to check for typos and improper language use.
2. Try comparing your code to the completed code for my examples found in the resource area below each lesson.
3. Check the Q&A area to see if anyone posted a similar issue to see how it was resolved.
4. If the issue does not already exist in the Q&A area, then post your issue using a title that clearly defines the issue you're having. Include a descriptive paragraph about the issue and what you have already tried. Most importantly, upload the code your site and post a link to your code in your question post, so myself and others can see the actual code and help troubleshoot. Without a link to the code to see the actual code, I can only make guesses instead of solving your issue. This link to the code could be from your personal domain or you can copy and paste your code into sites like: jsfiddle and save and paste the url given into the discussion area.
5. To solve issues on your own outside of this class community, repeat process 4 on stackoverflow a global discussion site for code questions. Also try to google the error message or issue. Be patient you'll figure it out eventually.
Now let's begin!
Setup your computer
Download and install the following free applications on your computer:

Code Editor:

Sublime Text 2 (required)

If for some reason Sublime Text is not compatible with your system, feel free to download another code editor such as Aptana Studio (only if sublime text doesn't work for you), other editors that should work fine include: TextMate, Text Wrangler, VIM, Notepad++, Coda, and Komodo Edit.

Browser:

Newest Version of Google Chrome (suggested)

It is also suggested to download other browsers such as IE, FireFox, Opera, and Safari for cross browser testing. I will be using Chrome in my examples for this course.

FTP Client:

FileZilla (required)

Other acceptable FTP applications include: Cyber Duck, Transmit, WinSCP. I will be using Filezilla for all course examples.

Local Server:

MAMP for Mac (optional) or WAMP for Windows (optional) or LAMP for Linux (optional)

I use this for just one example at the end of the course to test a PHP mailer script and some responsive design testing. It is not essential for most front-end development.

Image Editor/Compression:

Photoshop CS6 Paid & Trial Versions (suggested) or *GIMP & GIMP Save for Web Plugin (suggested) *Most GIMP builds already include the Save for Web Plugin.

Video Converter:

Miro Video Converter (optional)

Video Editor:

Avidemux (optional) or MPEG Streamclip (optional)

Audio Editor/Converter:

Audacity (optional)

Domain & Site Hosting:

If you wish to have your very own website online at the end of the class and you do not already have a domain and web hosting, you can sign up for some at one of these reccomended providers below and compare pricing:

1and1.com or dreamhost.com or bluehost.com (suggested)

Make sure to write down your FTP details such as FTP host url, user login, and password for use later on.

Recommended books to supplement this course:

HTML and CSS: Design and Build Websites (optional)

Implementing Responsive Design (optional)
Watch video lessons
1. Download the starter code (also located in the Additional Resources area)
2. Then watch the videos in the Video Lessons area. You may follow along using the provided starter code if you wish.
Start your website
It was fun building site pages in the lesson videos, but now it's time to put what you have learned to the test.

Build a personal website project
- Proper file and folder structure
- At least 3 different html pages.
- Text formatted to different sizes and headings
- At least 1 image
- Links between the pages
Validate your project
Use the following website to validate your project:

http://validator.w3.org/

and fix any errors that the validator might catch until the validation passes.
Share your progress
Upload your site and post the url to your project page where others can view it to provide feedback.

Leave a message on your project page that you completed this challenge. Discuss any issues you may have had and how you resolved them.

Sandra Barkevich shares their early project success:

Tables, Forms, and Iframes

Watch video lessons
1. Download the starter code (also located in the Additional Resources area)
2. Then watch the videos in the Video Lessons area. You may follow along using the provided starter code if you wish.
Add a table, form, and iframe to your project
Lets jump back to your personal website project and add the following:
- Table
- Form
- Iframe (from Google maps or Youtube)
Validate your project
Make sure the pages still validate* at:

http://validator.w3.org/

*You may get validation errors on the Google Map Iframe, or from any Iframe embed code for third party websites. This is common and not a cause for concern at this point in the class. If you wish to correct this you can remove the invalid html attributes ( frameborder="0" scrolling="no" marginheight="0" marginwidth="0" ) and replace their effect with this additon to your CSS code ( iframe { border: 0; margin:0; overflow: hidden; } ). Since we have not yet learned CSS, this will make more sense after you complete the next few exercises and challenges.
Share your progress
After uploading the files leave a message on your project page that you completed this challenge. Note your progress and discuss any issues that you had to resolve.

HTML5 Elements

Watch video lessons
1. Download the starter code (also located in the Additional Resources area)
2. Then watch the videos in the Video Lessons area. You may follow along using the provided starter code if you wish.
Add semantic formatting and media
Add the following elements to your current project:
- 1 HTML5 video or audio element embed
- Meta keywords and descriptions to all your pages.
Validate your project
Make sure the pages still validate at:

http://validator.w3.org/
Share your progress
Leave a message on your project page that you completed this step. Note your progress and discuss any issues you had that you resolved.

Ben Schorzman adds a snowboarding video to their page:

CSS Fundamentals

Watch video lessons
1. Download the starter code (also located in the Additional Resources area)
2. Then watch the videos in the Video Lessons area. You may follow along using the provided starter code if you wish.
Style your site
Using an external style sheet, style your pages using the following selectors:
- Type (element) Selector
- Class Selector
- ID Selector
- Descendent Selector
- Psuedo-class Selector (style links)
Validate your project
Make sure the pages still validate.

Check HTML at: http://validator.w3.org/

Check CSS at: http://jigsaw.w3.org/css-validator/
Share your progress
Leave a message on your project page that you completed this challenge. Note your progress and discuss any issues you had that you resolved.

Building Page Layouts

Watch video lessons
1. Download the starter code (also located in the Additional Resources area)
2. Then watch the videos in the Video Lessons area. You may follow along using the provided starter code if you wish.
Position your page content
Adjust the spacing of elements in your pages and position your page content using float positioning to create column structure.

Make use of clear:both and clearfix class to solve any formatting issues you come across. Most of all be patient, applying float positioning the first time can be frustrating, but you will get it!
Validate your project
Make sure the pages still validate.

Check HTML at: http://validator.w3.org/

Check CSS at: http://jigsaw.w3.org/css-validator/
Share your progress
Leave a message on your project page that you completed this step. Note your progress and discuss any issues you had that you resolved.

Positioning and Sprites

Responsive Layout

Watch video lessons
1. Download the starter code (also located in the Additional Resources area)
2. Then watch the videos in the Video Lessons area. You may follow along using the provided starter code if you wish.
Build responsive layout design
Use media queries to set styles for the following device sizes:
- Desktop
- Tablet
- Mobile
While styling you can check your results and modify as you go using:

http://quirktools.com/screenfly/

Or better yet the modern way of testing your media queries is to use Chrome's Developer Tools. Watch this video: https://www.youtube.com/watch?v=M482RhQ8i1Q
Which is NOT included in the playlist of videos for this course.
Validate your project
Make sure the pages still validate.

Check HTML at: http://validator.w3.org/

Check CSS at: http://jigsaw.w3.org/css-validator/
Share your progress
Leave a message on your project page that you completed this challenge. Note your progress and discuss any issues you had that you resolved.

Finishing Touches and Onward

Watch video lessons
1. Watch all of the video lessons first. There are no starting vode files for this unit.
2. Afterwards you can look over the final completed code if you wish.
Add finishing touches
Make any finishing touches and upload your sites using FTP to your desired host server domain.
Share your progress
Link to your project on your project page so others can critique your work and provide feedback. Check out your fellow classmates sites and leave feedback on at least three other students' sites.
Celebrate
Great job! Let's celebrate. Pop the top of your favorite drink and pat yourself on the back! You have offically become a front-end web developer! Congratulations!

What to do now?

Additional Resources

1.1 Starter Code (ZIP)
1.1 Completed Code (ZIP)
1.1 Lecture Slides (PDF)
Video Lesson Resources

http://computer.howstuffworks.com/internet/basics/internet.htm

How to unzip Windows: http://windows.microsoft.com/en-us/windows-vista/compress-and-uncompress-files-zip-files

How to unzip Mac: http://support.topspinmedia.com/entries/20822646-How-to-extract-a-zip-file-on-a-Mac

Save (in editor):
Mac: Cmd+s
Windows: Ctrl+s

Reload (in browser):
Mac: Cmd+r
Windows: Ctrl+r

SEO Guide: http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf

Learn HTML: https://developer.mozilla.org/en-US/docs/HTML

Compress your images using Save for web

Photoshop: http://www.youtube.com/watch?v=Ut_F7iGlze8

GIMP: http://www.youtube.com/watch?v=x-3fp4ksoRc

Split screen commands:
Mac: Command + Option + 2
Windows: Alt + Shift + 2

ISO Lang code list: http://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
Use the 639-1 codes that are two letters only.

What does charset attribute mean: http://community.spiceworks.com/topic/91624-what-does-charset-utf-8-mean

W3C Validator: http://validator.w3.org/

Living Validator: http://validator.nu/

FileZilla: http://filezilla-project.org/
1.2 Starter Code (ZIP)
1.2 Completed Code (ZIP)
1.2 Lecture Slides (PDF)
Quiz 1
Video Lesson Resources

Forms Video

At the time of this recording placeholder attribute is not supported in IE9! Download and link to Modernizer and Placeholders.js to get this to work: http://modernizr.com/ and here: http://jamesallardice.github.io/Place...

I insert this code for you in the final completed code.

Or type name, email, phone, and message outside the inputs so users on old browsers can see what to type in each field.

The code for getting the form to submit to an email is covered in a later video in Unit 8: Adding PHP Mailer Script.
2.1 Starter Code (ZIP)
2.1 Completed Code (ZIP)
2.1 Lecture Slides (PDF)
Video Lesson Resources

All Tags: http://html5doctor.com/

Semantic Tags: http://diveintohtml5.info/semantics.html#new-elements

HTML5 Overview: https://developer.mozilla.org/en-US/docs/HTML/HTML5

HTML5 Video: http://www.html5rocks.com/en/tutorials/video/basics/

Convert video to any format: http://www.mirovideoconverter.com/

Larry Heyl's website (from video example): http://njhb.org

OGV GUI MAC: http://taylanpince.com/blog/posts/oggifier-gui-wrapper-ffmpeg2theora/

MP4 GUI MAC: http://www.squared5.com/

HTML5 Skins Javascript players:

http://html5video.org/wiki/HTML5_Demos

MP3 and OGG GUI MAC: http://audacity.sourceforge.net/

Javascript (jQuery support) Players:

http://mashable.com/2010/05/18/html5-video-tools/

http://www.html5trends.com/tutorials/implement-html5-video-support-in-5-easy-steps/

Normalize CSS: http://necolas.github.com/normalize.css/

Info on IE HTML5 fix: http://code.google.com/p/html5shiv/

HTML5 info site: http://www.html5rocks.com/en/

Google SEO guide: http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf

More about Meta tags: http://www.metatags.org/create_meta_tags
2.2 Starter Code (ZIP)
2.2 Completed Code (ZIP)
2.2 Lecture Slides (PDF)
Quiz 2
Video Lesson Resources

CSS Selectors: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

CSS Specificty (Authority): http://youtu.be/In78mSOHmls

Kuler Color Planning: https://kuler.adobe.com/create/color-wheel/

Tutorial on using your own fonts: http://www.css3.info/preview/web-fonts-with-font-face/

Google web fonts: http://www.google.com/webfonts
more: http://www.freewebfonts.net/

list of many more psuedo selectors: http://css-tricks.com/pseudo-class-selectors/

compatibility tests: http://kimblim.dk/css-tests/selectors/

Code School Chrome Dev Tools Tutorials: http://discover-devtools.codeschool.com/

Safari Dev Tools: http://youtu.be/BUQaqn6DM4k

Firefox Dev Tools: http://youtu.be/VcuQ2Bn5bTA

More on Chrome Dev Tools: http://youtu.be/nOEw9iiopwI
3.1 Starter Code (ZIP)
3.1 Completed Code (ZIP)
3.1 Lecture Slides (PDF)
Video Lesson Resources

Learn positioning in 10 steps: http://www.barelyfitz.com/screencast/html-training/css/positioning/

Using display inline-block: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

CSS box-sizing: http://paulirish.com/2012/box-sizing-border-box-ftw/

Explore CSS3: http://www.css3.info/preview/

Disclaimer: I am not responsible for any damage done to your scanner by experimenting with the scanning techniques mentioned in the video

Floating: http://css-tricks.com/all-about-floats/

Moire on floating: http://www.tizag.com/cssT/float.php

Clearfix: http://www.webtoolkit.info/css-clearfix.html

Video example code: http://tinker.io/cb346

CSS gradient editor: http://www.colorzilla.com/gradient-editor/
3.2 Starter Code
3.2 Completed Code (ZIP)
3.2 Lecture Slides (PDF)
Quiz 3
Video Lesson Resources

CSS Positioning 101: http://alistapart.com/article/css-positioning-101

Sprite Images: http://css-tricks.com/css-sprites/

Basic sprite rollover: http://css-tricks.com/snippets/css/basic-link-rollover-as-css-sprite/
4.1 Starter Code (ZIP)
4.1 Completed Code (ZIP)
4.1 Lecture Slides (PDF)
Video Lesson Resources

Media Queries: http://www.w3.org/TR/css3-mediaqueries/

Book:
http://www.amazon.com/gp/offer-listing/0321821688/ref=as_li_tf_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=0321821688&linkCode=am2&tag=skillshare-20

Screenfly Responsive Testing: http://quirktools.com/screenfly/

Another site like Screenfly: http://responsinator.com/

Installing MAMP on Mac: http://www.mamp.info/en/index.html

Determining if your Windows is 32 or 64 bit: http://support.microsoft.com/kb/827218

Installing WAMP on Windows: http://www.wampserver.com/en/

Modernizr (makes old browsers HTML5 compatible now including CSS media query support): http://modernizr.com/

CSS3 media queries from Google CDN: http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js

About Meta viewport: http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/

Updated link to ios-orientation change fix: https://raw.github.com/Wilto/iOS-Orientationchange-Fix/master/ios-orientationchange-fix.js

Tutorial: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
4.2 Final Completed Code (ZIP)
4.2 Lecture Slides (PDF)
Quiz 4
Office Hours Q&A Youtube Playlist
Video Lesson Resources

CSS Normalize: http://necolas.github.io/normalize.css/

CSS Reset: http://meyerweb.com/eric/tools/css/reset/

HTML5 Boiler Plate: http://html5boilerplate.com/

Bootstrap: http://twitter.github.io/bootstrap/

Modernizr: http://modernizr.com/

960 Grid: http://960.gs/

Stackoverflow: http://stackoverflow.com/

More courses from this instructor at Code Pajamas: https://codepajamas.com/

7390ba27

Company

Community

Teaching

Mobile