Description
Create a webpage that makes use of css:
- Use element, class, and ID selectors
- Apply colors, fonts, borders, padding, and margins
- Use flexbox or grid for layout
- Add a simple hover effect
Feel free to build off of your website from the previous basic HTML assignment.
You may want to watch the first 10 minutes or so of this video to better understand how you can use your browser's developer tools to debug and understand CSS.
File and Folder Setup
All work must be inside:
csc336-fall2025/02-css-basics/
Include index.html and style.css, linked like this:
<link rel="stylesheet" href="style.css">
Requirements
1. General Page Setup
Customize margins, set a custom font, and set various background colors.
2. Header & Navigation
Style the header with a background. Use flexbox to arrange links. Add a hover effect.
3. Sections
Use at least one ID selector for unique sections and at least 3 class selectors for repeated styles.
4. Gallery
Style .card elements with borders, padding, and background color. Add hover styles.
5. Footer
Style the footer with a contrasting background and centered text.
Challenge
Explore MDN CSS Reference and add some cool effects. Ideas:
- Gradient backgrounds (
linear-gradient()) - Rounded corners (
border-radius) - Text shadows (
text-shadow) - Box shadows (
box-shadow) - Animations
Submission
Push your code to GitHub and make sure it’s accessible at:
https://your-username.github.io/csc336-fall2025/02-css-basics/
Help
Here is the 'all in one' example css file I was showing in class: DEMO (CODE)
Also, this webpage itself satisfies the requirements of the assignment! Look at the code in your developer tools to use it as an example.