Lab 2 - Advanced html
Goals of exercise
Summarise the goals of the exercise in bullet points.
- Setup:
index.html + styles.css. Link normalize.css, Montserrat font, and your CSS. - Global:
Fix box-sizing. Set :root (oklch color, font + fallback, line-height, scroll-behavior). body margin to 0. - Container:
Create .container (max-width: 80rem, margin: auto, padding: 1rem). Apply it to header, main, and footer content. - Header/Footer:
Add background/text colors (oklch) to <header>. Set <footer>background #333. - Nav:
Reset nav ul (padding: 0, list-style: none). Style nav a with padding (1rem/2rem), inherit color, text-decoration: none. Fix alignment with ul margin-left: -2rem. - Advanced:
Use advanced selectors (:nth-child, h2 + p, etc.). Create reusable classes (.highlight, .container--narrow, utility classes .m-1, .p-2).
Description
Describe the exercise in a few sentences. What is important? What do you need to use?
→ Its kind of an introduction to CSS where we learn how to design our HTML and for example to change our font.
Related links
What were the websites that you used?
→ Mozilla and the Copilot that comes up every time you search something on Google.
Reflection
Woaw!
Describe what went well. Describe what you did good.
→ I understand how to put the font on there.
Aauuw!
Describe what was difficult. Where did you spend most of the time?
→ I am kinda struggling with the box model.
Not sure?
Describe what you are unsure about or what you're doubtful about.
→ The pseudo-classes and combinators were super hard. To this day, I can hardly write it without help.