Project Overview

Project 8

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

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.

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. This takes practice and repetition! It is not enough to only do the bare minimum. If you really, really want to get good and be good, or even great at anything, you must practice it again and again. In addition, you must look at references and try to recreate something someone else has done, that you admire. It is no different in coding, design, music, acting, etc. Find something you want to recreate or think of something you want to do and then learn everything you need to learn to make it happen. Ask for help from those who may have more experience with it than you do. Most likely, they will be happy to help you learn too.

In my experience, I have to work and rework something over and over again, sometimes 10 times or more, to really get it to the level of expectation that I have set for myself. Each time I rework something, I get better at it and the skills get more burned into my mind and muscle memory. This takes time, and you need to expect it to take time. It is not " magic " and most people are not born with a " gift " that makes them have special abilities. Usually, it is hard work and persistence.

Quiz 8

Lecture Videos

Lab Directions

Lab 8

Practice and Experimentation

Project 8 is to demonstrate you have the ability to looks at the basic HTML and CSS 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.

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, 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 unique navigation style and a gallery that you have crafted yourself using what you have learned about w3-css frameworks, design, and your own experimentation. It should have a proper code syntax and contain good design techniques, such as a color palette, font choice, and 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.

All content Copyright © 2017 Derek Dallas all rights Reserved