HTML & CSS: Building Responsive Websites For Beginners

Hands-on Class Project

There is a new updated version of this class located here: https://www.skillshare.com/classes/HTML-CSS-Building-Responsive-Websites-For-Beginners-version-2.0/1481065028

Build your own website using HTML and CSS

HTML and Web Fundamentals

1. 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!

2. Setup your computer

   Download and install the following free applications on your computer:

   Code Editor:
   
   In this course I used Sublime Text 2 however in practice I now use and recommend VS code which. you can download here: https://code.visualstudio.com/download

   Sublime Text 2 (consider using VS code linked above)

   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)

3. 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.
4. 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
5. 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.

6. 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

1. 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.
2. 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)
     
     
3. 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.

4. 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

1. 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.
2. 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.
     
     
3. Validate your project

   Make sure the pages still validate at:

   http://validator.w3.org/

4. 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

1. 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.
2. 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)
     
     
3. 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/

4. 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

1. 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.
2. 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!

3. 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/
   

4. 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

1. 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.
2. Use advanced positioning

   Add at least one of the following positioning styles to your layout:

   • absolute
   • relative
   • fixed

   Optionally, add some sprite rollover images.

3. 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/

4. 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.

Responsive Layout

1. 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.
2. 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.

3. 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/

4. 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

1. 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.
2. Add finishing touches

   Make any finishing touches and upload your sites using FTP to your desired host server domain. 

3. 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.

4. 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?

   • Like my "Super Awesome Instructor" Facebook page

   • Follow @jongrover on Twitter

   • Signup for my mailing list for deals on future classes

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: