HTML5 & CSS3

Textbook: HTML5 and CSS3 ISBN: 978-1-111-52798-3

In this course you will design web pages and sites using HTML5, CSS3, JavaScript, and XML and upload all of your sites via File Transfer Protocol (FTP) to a live internet web server. Specifically, you will learn how to:

  • Create a Website
  • Get Started with HTML and CSS
  • Format Text with CSS
  • Work with Links and Images
  • Organize Content with Lists and Tables
  • Implement Page Layout with HTML and CSS
  • Apply Advanced CSS Styling
  • Create Web Forms
  • Incorporate Video and Audio
  • Program with Javascript
  • Integrate Social Media Tools
  • Optimize your Website for Search Engines
  • Create a Responsive Website

Optional

We believe that Thomas Edison was absolutely right when he said that “Opportunity is missed by most people because it is dressed in overalls and looks like work”. As a bonus for those of you who actually read instructions, as opposed to just skipping through looking for a shortcut, we have posted all of the solutions for all of your assignments in the HTML book here: Click for More Hard Work. Though these solutions will only serve you as a guide, (because it will be harder to reverse engineer this work than it will to make it from scratch), I believe they will definitely help you out quite a bit. For those that don’t like to read instructions, missing out on this should probably serve as a lesson :)


Watch these Videos before starting this subject


Assignments

Typing Test – 15wpm Minimum

First things first! Before we start learning code, let’s make sure you know how to type! Though it isn’t necessary to be extremely fast at typing now, it is important that you begin with the proper techniques so that your speed will increase over time.

Before you can move on to the HTML Lessons, you need to type at least 15wpm (words per minute). Login into Typing Web to take the typing test. Once you score higher than 15wpm, you can proceed.


Unit A

  1. Take the Pre-Test in Blackboard before reading the Chapter
  2. Download the files necessary for this course: HTML5 Data Files.
  3. Once downloaded, move (copy) them onto your flash drive – that’s where you will safely store, access, and continue to work with them throughout this course. Note: Server space is limited; HTML5 Data Files should never be uploaded to the class server (only completed assignment files/folders will be uploaded)
  4. Next, to keep clutter and confusion to a minimum, delete the (original, downloaded) HTML5 Data Files from the computer’s “Downloads” folder.
  5. In-class students: Do not attempt to store ANY files on lab computers; they will be erased.
  6. Read the chapter and follow along with the exercises throughout the chapter
  7. How to use FTP          How to Submit an Assignment in Blackboard
  8. Complete Independent Challenge #1 (page 20) (Using FileZilla upload this assignment to the class web server) (Submit this assignment in Blackboard)
  9. Complete Independent Challenge #2. (page 21) (Using FileZilla upload this assignment to the class web server. Submit this assignment in Blackboard)   Moving forward, you do not need to create a folder on your server named wwwroot. You should develop your own file management system. Here is an example:
    • microsoft-office
    • html5
      • unit-a
        • ic1
        • ic2
      • unit-b
        • ic1
        • ic2
        • ic3
    • copyright-seo

    Do not do the Advanced Challenge.

  10. Upload your finished assignment to the class server using Filezilla (FTP)
  11. Take the Unit A Test in Blackboard.

Unit B

  1. Read the chapter and follow along with the exercises throughout the chapter. Do not use Notepad for this! We recommend using Sublime Text 2, which is free.
  2. Complete Independent Challenge #1 (page 44) (Using FileZilla upload this assignment to the class web server. Submit this assignment in Blackboard)
  3. Complete Independent Challenge #2 (page 45) (Using FileZilla upload this assignment to the class web server. Submit this assignment in Blackboard)
  4. Complete Independent Challenge #3 (page 46) (Using FileZilla upload this assignment to the class web server. Submit this assignment in Blackboard)
  5. Take the Unit B Test in Blackboard.

Unit C

  1. Read the chapter and follow along with the exercises throughout the chapter
  2. Unit C NOTE: It is best practice to NOT use id’s in your CSS. The book uses them, but after you finish the book we no longer want to see any id’s in your code. We only want you to use type selectors or class selectors.
  3. Complete Independent Challenge #1 (page 70)  (Using FileZilla upload this assignment to the class web server) (Submit this assignment in Blackboard)
  4. Complete Independent Challenge #2 (page 70).  (Using FileZilla upload this assignment to the class web server. Submit this assignment in Blackboard) Do not do the Advanced Challenge.
  5. Complete Independent Challenge #3 (page 71). (Using FileZilla upload this assignment to the class web server. Submit this assignment in Blackboard)  Do not do the Advanced Challenge.
  6. Take the Unit C Test in Blackboard.

Unit D

  1. Read the chapter and follow along with the exercises throughout the chapter
  2. Complete Independent Challenge #1 (page 95)  (Using FileZilla upload this assignment to the class web server. Submit this assignment in Blackboard)
  3. Complete Independent Challenge #2 (page 96).  (Using FileZilla upload this assignment to the class web server. Submit this assignment in Blackboard) Do not do the Advanced Challenge.
  4. Complete Independent Challenge #3 (page 97).  (Using FileZilla upload this assignment to the class web server. Submit this assignment in Blackboard) Do not do the Advanced Challenge.
  5. Take the Unit D Test in Blackboard.

Unit E

  1. Read the chapter and follow along with the exercises throughout the chapter. Notice in lesson “Linking to Anchors” that it is ok to use an id to link down the page as an anchor. This is one of the only places you should use an id after you complete the book.
  2. Complete Independent Challenge #1 (page 122)  (Using FileZilla upload this assignment to the class web server. Submit this assignment in Blackboard)
  3. Complete Independent Challenge #2 (page 123). (Using FileZilla upload this assignment to the class web server. Submit this assignment in Blackboard)  Do not do the Advanced Challenge
  4. Complete Independent Challenge #3 (page 125). (Using FileZilla upload this assignment to the class web server. Submit this assignment in Blackboard)   Do not do the Advanced Challenge
  5. Take the Unit E Test in Blackboard.

Project #1

If you haven’t already, take the DevTools tutorial at CodeSchool! Knowing how to troubleshoot your code effectively will do wonders to ease frustration and increase your speed. You also should always have the DevTools panel open while you troubleshoot.

You should also start using Emmet in Sublime Text 2 to help speed up your coding. There’s no need to type everything out if you don’t have to. Watch the demo and then follow the instructions if you don’t already have Emmet installed.

Also, take a minute to review this lecture.

  1. Create an Assignments web page and create links to all of your previous assignments… Office Final Projects, Copyright Final Project, and the Independent Challenges from HTML Units A – E.  Here is an example: Assignment Page
  2. Do not use id’s in your CSS – only using classes to style the items on your page.
  3. Save your assignments page as index.html
  4. On the class server, create a folder (outside of the HTML folder) called “businesswebsite” (all lowercase, no spaces)
  5. Upload your finished assignment page to the “businesswebsite” folder using Filezilla (FTP)
  6. Once you are done making changes, re-upload your finished assignment page and submit a link to your Assignments page through the Dropbox in Blackboard (http://blackboard.myptc.edu)

Unit F

  1. Read the chapter and follow along with the exercises throughout the chapter.
  2. Complete Independent Challenge #1 (page 149)  Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your assignment web page)
  3. Complete Independent Challenge #2 (page 151)**.  Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your assignment web page)  Do not do the Advanced Challenge.
    **Step b and d: The height / width for images are incorrect. For correct values use: width = 376px, height = 198px for mrsl.gif; width = 350px, height = 233px for kick.jpg; width = 350, height = 526px for jump.jpg.
  4. Complete Independent Challenge #3 (page 153). Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your assignment web page)  Do not do the Advanced Challenge
  5. Upload your finished assignment to the class server using Filezilla (FTP), and link it to your Assignments Page.
  6. Take the Unit F Test in Blackboard.

Unit G

  1. Read the chapter and follow along with the exercises throughout the chapter
  2. Complete Independent Challenge #1 (page 178)  Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your assignment web page)
  3. Complete Independent Challenge #2 (page 180).  Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your assignment web page) Do not do the Advanced Challenge
  4. Complete Independent Challenge #3 (page 182).  Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your assignment web page) Do not do the Advanced Challenge.
  5. Take the Unit G Test in Blackboard.

Unit H

  1. Read the chapter and follow along with the exercises throughout the chapter
  2. Complete Independent Challenge #1 (page 204)  Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your assignment web page)
  3. Complete Independent Challenge #2 (page 205). Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your assignment web page)  Do not do the Advanced Challenge
  4. Complete Independent Challenge #3 (page 206).   Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your assignment web page) Do not do the Advanced Challenge
  5. Take the Unit H Test in Blackboard.

Unit I

  1. Read the chapter and follow along with the exercises throughout the chapter
  2. Complete Independent Challenge #1 (page 229) Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your assignment web page)   (Using FileZilla upload this assignment to the class web server) (Submit this assignment in Blackboard)
  3. Complete Independent Challenge #2 (page 230).  Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your assignment web page)  Do not do the Advanced Challenge
  4. Complete Independent Challenge #3 (page 231).  Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your assignment web page) Do not do the Advanced Challenge.
  5. Take the Unit I Test in Blackboard.

Project #2

  1. Ensure that all of the links on your Assignments Page for the Independent Challenges from HTML Unit F – I are working correctly.
  2. Upload your updated assignment page to the “businesswebsite” folder using Filezilla (FTP) and submit a link to your website index page through Blackboard (http://blackboard.myptc.edu)

Unit J

  1. Read the chapter and follow along with the exercises throughout the chapter, Note the code in the book on page 245  for this unit is incorrect.  There is a missing opening <label> tag and the closing </label  for=”garden”> is incorrect
  2. Complete Independent Challenge #1 (page 256)  (Using FileZilla upload this assignment to the class web server. Submit this assignment in Blackboard)
  3. Complete Independent Challenge #2 (page 257).  Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your assignment web page)  Do not do the Advanced Challenge
  4. Complete Independent Challenge #3 (page 259).  Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your assignment web page)  Do not do the Advanced Challenge
  5. Take the Unit J Test in Blackboard.

Unit K

  1. Read the chapter and follow along with the exercises throughout the chapter.
  2. NOTE: some of these exercises may not work since the school blocks some video and audio content. Just follow along the best you can.
  3. Complete Independent Challenge #1 (page 283)   Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your assignment web page)
  4. Complete Independent Challenge #2 (page 284). Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your assignment web page)   Do not do the Advanced Challenge
  5. Complete Independent Challenge #3 (page 286).  Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your assignment web page) Do not do the Advanced Challenge
  6. Take the Unit K Test in Blackboard.

Unit L

  1. Read the chapter and follow along with the exercises throughout the chapter
  2. Complete Independent Challenge #1 (page 309)   Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your assignment web page)
  3. Complete Independent Challenge #2 (page 310).  Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your assignment web page)  Do not do the Advanced Challenge
  4. Complete Independent Challenge #3 (page 312).  Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your assignment web page)  Do not do the Advanced Challengee.
  5. As these Javascript Exercises are very challenging, we supply all students with the solution files which you can download here: Unit L Solutions. Do your best to work through the Challenges, but refer to the solutions as needed.
  6. Take the Unit L Test in Blackboard.

Unit M

  1. Note that the social media widgets are out of date, and also may not work on the school network. Your instructors are aware of this, so please just do your best to follow the instructions for these exercises.
  2. Read the chapter and follow along with the exercises throughout the chapter
  3. Complete Independent Challenge #1 (page 335)   Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your assignment web page)
  4. Complete Independent Challenge #2 (page 336).  Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your assignment web page) Do not do the Advanced Challenge
  5. Complete Independent Challenge #3 (page 336).  Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your assignment web page)  Do not do the Advanced Challenge
  6. Take the Unit M Test in Blackboard.

Project #3

Create your own web development business website. You must have the following items at the least:

  1. Home Page – Welcome Visitors to your website
  2. Contact page – Contact Information (email, phone, Facebook, Twitter, Linkedin, etc.)
  3. Portfolio page – Create an image or link to your assignment web page.  From this point until the end of this program you will use your business website to submit all future assignments.  List any work you have done in class or outside of your classwork here  Add a link or an image to your assignment web page on your portfolio page
  4. Services page – Information pertaining to the types of services you offer
  5. Your website should fill the entire computer screen and have images and navigation.  This should be quality work.

You are to update this website as you learn more in this program.

Upload your entire website to the “businesswebsite” folder via FTP.

Once you are done with the changes, re-upload the website to your “businesswebsite” and submit a link to your new website page through Blackboard (http://blackboard.myptc.edu).


Unit N

  1. Read the chapter and follow along with the exercises throughout the chapter
  2. Complete Independent Challenge #1 (page 359)   Your are to submit your business website for this assignment.  Refer to directions for Project #3.  Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your business website.
  3. Complete Independent Challenge #2 (page 360).  Your are to submit your business website for this assignment.  Refer to directions for Project #3.  Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your business website.Do not do the Advanced Challenge
  4. Complete Independent Challenge #3 (page 360).   Your are to submit your business website for this assignment.  Refer to directions for Project #3.  Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your business website.Do not do the Advanced Challenge
  5. Take the Unit N Test in Blackboard.

Unit O

  1. Read the chapter and follow along with the exercises throughout the chapter
  2. Complete Independent Challenge #1 (page 384)   Your are to submit your business website for this assignment.  Refer to directions for Project #3.  Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your business website.
  3. Complete Independent Challenge #2 (page 385). Your are to submit your business website for this assignment.  Refer to directions for Project #3.  Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your business website.Do not do the Advanced Challenge
  4. Complete Independent Challenge #3 (page 386).  Your are to submit your business website for this assignment.  Refer to directions for Project #3.  Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your business website.Do not do Step e. Do not do the Advanced Challenge
  5. Take the Unit O Test in Blackboard.

Unit P

  1. Read the chapter and follow along with the exercises throughout the chapter
  2. Complete Independent Challenge #1 (page 409)  Your are to submit your business website for this assignment.  Refer to directions for Project #3.  Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your business website.
  3. Complete Independent Challenge #2 (page 409).  Your are to submit your business website for this assignment.  Refer to directions for Project #3.  Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your business website. Do not do the Advanced Challenge
  4. Complete Independent Challenge #3 (page 410). Your are to submit your business website for this assignment.  Refer to directions for Project #3.  Add this assignment to your assignment web page (Using FileZilla upload this assignment and your assignment web page  to the class web server. Submit this assignment in Blackboard using your business website.Do not do the Advanced Challenge
  5. Take the Unit P Test in Blackboard
  6. Take the HTML5 + CSS3 Final Exam Test.

Project #4

  1. Ensure that all of links on your Assignments Page for the Independent Challenges from HTML Unit N – P are working correctly.
  2. Upload your updated assignment page to the “businesswebsite” folder using Filezilla (FTP) and submit a link to your index page (business website) through the Dropbox in Blackboard (http://blackboard.myptc.edu).

The Last Unit: Responsive Design

Responsive websites are sites that adjust to the size of device your visitor is on. So the site adjusts to phones, tablets, desktops, TVs, etc. All websites these days should be built responsively. Below are some links to review in order to get started with responsive design. Your final HTML project requires you to build your site responsively, so make sure you read them!

    1. Download and read through this presentation
    2. Read over this website
    3. Examples of sites using responsive design techniques
    4. An example of responsive design in CodePen

Basic responsive navigation

Nothing is required to be turned in for this section.


HTML5 + CSS3 Final Project

Project : Make your business website responsive! You must have the following items at the least:

  1. Media queries
  2. Fluid grids
  3. Responsive images
  4. Update your business website design

At this point do not worry about making your menu responsive using JavaScript. Just make each item in the menu stack below the next.

Feel free to change the layout of your site based on what you’ve learned so far in class.

Here is an example of a good business website:  Sample Business Website.  You are expected to design a high quality website.  You need to have good color combinations and fonts that can use used by all users.  You are not expected to have a logo at this time.  You can use any image as a place holder for your logo.

Your website must have the following navigation items: Home, Services, Portfolio, About. Contact, Blog (linked to an under construction web page)

Once you are done with the changes, upload the website to your “businesswebsite” and submit a link to your new website page through the Dropbox in Blackboard (http://blackboard.myptc.edu).