Project Overview

Project 9

In this project you continue to break down the core parts of a website and learn how to structure the content within a webpage using w3-css frameworks.

By the end of this project you need to understand the following topics and know how to use them within a webpage.

  • w3-navigation options
  • w3-slide shows
  • basic javascript mods
  • sections
  • articles
  • footer
  • w3-row
  • w3-row-padding
  • w3-container
  • w3-content
  • Google Fonts
  • Font Awesome

Lecture Notes

For this project you will be breaking down the core of the w3-schools Band Website located at this URL: You will experiment with the w3-CSS Classes to better understand how they work and what attibutes they add to the webpage. From this, you will create your own variation of a webpage using similar techniques, but with your own content and images.

Recall, simply watching a video is not enough to help you understand how all the HTML and CSS work together. You will need to work through the code and experiment with it. You will need to study and come to know the common terms and class names that you will be working with so that you gain a better vocabulary and workflow.

Quiz 9

Lecture Videos

Lab Directions

Lab 9

Practice and Experimentation Part 2

Project 8 and 9 are to demonstrate you have the ability to look at the basic HTML, CSS, and java code given as reference on w3-schools then, using your own creativity, modify or repurpose that code to communicate a new idea of your own. Look at the examples provided on the w3-schools website and choose a navigation style that you like, but not the default basic or fixed styles. It must be modified significantly so that it truly becomes your own work. Then create a gallery that containes at least 10 images that is contolled by code as provided by the examples. Modify the java code to change the timing, and/ or image sizes to make the slide show unique.

With everything you do, please invest time and creativity into the project so that you are trying to produce something of quality and creativity. Work with themes, such as a favorite movie, place, person, goal, etc that gives you inspiration and keeps you focused and excited. This excitement and enthusiasm will push you to do better work! Your project reflects who you are, how serious you are about learning or achieving your professional goals, etc. Please study, look at references such as graphic design, paintings, websites, etc, to get color palettes, font styles, imagery, etc.

No one should turn in anything that looks like the default code, colors, or designs given as examples. Remember, that is what they are, examples. That is not your work and you will not get credit for it. Use your own ideas, creativity, and ingenuity to make something unique and 100% your own.


For this project, I want you to turn in a URL to a single .html page that shows the navigation and a gallery that you have crafted in Project 8 and then add more content (text and images) using sections, articles, and a footer. Continue to use what you have learned about w3-css frameworks, design, and combine it with your own experimentation.

The page must have a proper code syntax and contain good design techniques, such as a color palette, font choice from Google Fonts or another web font source, and have overall appeal. The gallery needs to contain a minimum of ten images. They need not be your personal photos. However, using it as a portfolio, we are digital media folk, could be beneficial for you down the road. Give the page your personal touch and by that I mean choose a topic you know something about or have an interest in such as a hobby, politics, environmental issues, gaming, Anime, film, music, dance, education, and so on. Your topic should be uniquely your own and the page should be designed appropriately for that topic.

All content Copyright © 2017 Derek Dallas all rights Reserved