How CSS Changes Everything: Designing the Look and Feel of the Web
From Plain to Polished: Transforming HTML with CSS
Activity: CSS Style Challenge
Return to the CodePen template you used in the previous slide. Try to fix the CSS rules to make the page more readable and visually appealing. Don't change the HTML, just the CSS.
Use your website's branding and design choices to guide your CSS edits. Here are some things to try:
- Change the font family and size for the body text and headings.
- Adjust the colors for the background, text, and links to match your branding.
- Add some padding and margin to create more space between elements.
- Experiment with different text alignments (e.g. left, center, right).
- Try adding a border or background color to the section to make it stand out.
Remember, the goal is to make the content easier to read and more visually appealing while still reflecting your website's identity. Don't worry about making it perfect — just have fun experimenting with different styles!
Once you've made some changes, screenshot your CodePen page and paste it into a Google Doc with your name on it. Submit it to the "Submit Work" Google Form.