HTML and CSS Coding

A. Kahan Academy

Use KhanAcademy HTMLCSS lessons to complete the 6 projects in the HTML/CSS online lessons.  Students will learn the basics of HTML tags, CSS selectors and styles.

www.khanacademy.org 

 

B. General Assembly

Use https://dash.generalassemb.ly  to create three projects with HTML and CSS emphasis.

  • Personal Website – CSS modifications for fonts, backgrounds, background image.
  • Responsive Blog Theme – CSS modifications for mobile, tablet and PC screen size.
  • Dynamic Responsive Restaurant Menu – CSS modifications for custom fonts, gradient colored background, responsive screen size and font sizes.

C. Build full-page sites

The videos for these file are on the M: drive for Westview High School students.  Teachers can download videos for offline access using tools like this

  1. The Gym - Follow the online tutorial at https://www.youtube.com/watch?v=2R-qmsvtSaQ to create a business website from start to finish.  Includes CSS formatting for handling images, JavaScript plugins for an image slider.  
  2. Student Newsletter - Use the starter HTML code.  Create your own CSS code to format a simple newsletter without using a tutorial.
  3. Technology Conference - Follow the online tutorial at https://www.youtube.com/watch?v=wanMb3TbMzc   to create a a fixed-background effect on a site for a technology conference.
  4. FlexBox - Follow the onine tutorial at https://www.youtube.com/watch?v=k32voqQhODc to demonstrate the use of the flex and flexbox in web layouts.
  5. CSS Menu - Follow the online tutorial at https://www.youtube.com/watch?v=uRBpD3tKKmk to create your own version of a drop down menu using only CSS code.

D.    Free Code Camp

Use www.freecodecamp.com  to create a cat photo app reviewing all of the HTML / CSS specifics in the previous units.

 

E. Web client project 

Build a website for a client.  Choose a design from one of the three clients: Pampered Pups, DJ Turntable or Joe the Plumber.  Alternative assignments can be done for a real client.

Grade Components

1. Completeness -

  • Minimum of 3 web pages in the design
  • Navigation

2. Accuracy -

  • Proper use of client content according to his/her request.  
  • Spelling and grammar.

3. Technical

  • Demonstrates accurate use of HTML and CSS
  • Navigation leads to proper locations