In this exercise, you will practice your CSS Grid skills, as well as create a harmonious color scheme for your site.
First please download the starter files. This will contain the images and the screenshots of the exercise.
Once you’re unzipped that package, rename the folder to firstname-lastname-guitarmania2024.
And here is a Loom movie describing the project.
Layout
Pay close attention to layout, alignment, and spacing as seen in the screenshots and demonstration movie. In all exercises in this course, these are always fundamental concerns.
Typography
Use the google fonts Oswald (for site title and section titles) and Roboto Slab (for everything else).
Note: the screenshots do not show Roboto Slab. My apologies for that.
Guitar Names
- Original Models: Les Paul Custom, Les Paul Goldtop, Les Paul Standard
- Budget Models: Les Paul Junior, Les Paul Junior (TV Yellow), Les Paul Special
- Artist Models: Alex Lifeson, Peter Frampton, Ace Frehley
- Featured: ES-175
The Color Theming Part
Use CSS Custom Properties to create one main color defined in the :root element.
Make all other colors in the document variations on that color. Those colors can also be custom properties, but they must be derived in some way from the main color you chose.
The choice of colors is yours: do not just copy those in the screenshots. Make a pleasing and useful theme.
You can do these variations with the CSS color-mix function. Or you can vary the L value in HSL or OKLCH colors. You can use the calc function.
I, or a marker, will test your color theme by changing the main color custom property with the Chrome Inspector and seeing if your other colors change in a reasonably consistent way.
As always, make sure that your content has enough contrast to be accessible and readable.
Please watch the Loom video to understand this part.
Note: in the video, you will see that the “theme color” is also incorporated into the images. If you chose to do this, you will need to research css blend modes.
Note 2: the JazzIcons HTML+CSS Exercise video series demonstrates one way to approach this theming idea.
If this is WMDD 4835, we will have done the JazzIcons exercise in class.
When You Are Done
Make sure that your folder is named as described earlier in this exercise.
Once you have done that, please ZIP the folder and then hand it into Brightspace.