Web Design
Mr. Riese

Please follow the 14 video tutorials to complete the "Default Website" and you can design the other websites without tutorials.

Download BracketsHTML Reference Sheet

Mr. Riese | Educator, Graphic Artist, Web Designer, SEO Specialist

Coding | Web Design

HTML5 & CSS | Codeacademy.com

Once you learn the principals of Adobe Photoshop (My 17 Photoshop Projects), you will have the skillsets to edit your own images to fit specific dimensions. This is the main job of a graphic artist in general, but now you will apply your photoshop knowledge to design your own websites with authentic images. You never need a graphic artist now, because you are one!

Complete HTML5 & CSS in Codeacademy.com which is a free website to learn coding. You will get a small certificate at the end (Take a screen shot and save it in Photoshop as a PDF), and this will give you the knowledge to properly edit 5 different website templates I will assign you with the html5 & CSS script already set up for you to edit.

Web Design

You will now complete 5 sequential websites in order from small to large scale with authentic content.

Website Themes
  • Default Website Theme | Student Portfolio website with a student resume, portfolio, and letters of recommendation.


  • Treble Website Theme | Restaurant Menu website based on student culture, food, and family heritage.


  • Flipper Website Theme | Biography Website Design based on an artist or musician with ticket sale & merchandise links.


  • Wisdom Website Theme | Travel Agency Website Design based on student's country of origin, culture, cities, and travel.


  • Boomerang Website Theme | Students will redesign Nike's website using their content completely for educational value and assessment.

Learn Web Design

Please watch the 14 sequential videos. The Default Website Design is the 1st website you will create. Please complete the tutorials in order.

Web Design Tutorials

  • Video 1 | Top Slider Images & Headlining Text
  • Video 2 | Use Photoshop To Place a Logo on a Website
  • Video 3 | Use Photoshop To Place a Favicon Icon on a Website
  • Video 4 | Insert a Title Description on a Website's page
  • Video 5 | Complete the About Section & Connect Social Media Icons
  • Video 6 | Insert Google Map and Link it to a Website
  • Video 7 | Complete a Contact Form and Contact Links of a Website
  • Video 8 | Insert a Photo Gallery (Part 1)
  • Video 9 | Insert a Photo Gallery (Part 2)
  • Video 10 | Services Section of a Website Content links (Part 1)
  • Video 11 | Services Section of a Website Insert Icos (Part 2)
  • Video 12 | Connecting Downloadable Documents to a Website
  • Video 13 | Delete a Section of a Website
  • Video 14 | Linking Pages & Sections of a Website
Course Outline | Mr. Riese