Lab 3 - typography with CSS
Goals of exercise
Summarise the goals of the exercise in bullet points.
- Setup:
Start index.html + styles.css. Link normalize.css. - Font:
Self-host Fredoka (convert .ttf to .woff2). Register with @font-face. - Layout:
Create a reusable .container class using CSS Logical Properties (e.g., max-width: 80rem, logical margin/padding). - Nav:
Use Flexbox on nav ul (display: flex). Links must be display: block for vertical padding. Use Logical Properties for padding/margins. - Ex 1: Columns:
Use Flexbox on .row to create a 2:1 column ratio (flex-grow). Apply CSS nesting. - Ex 2: Nav:
Create a second navigation. Hide its title using the .visually-hidden class. Implement color swap on :hover / :focus-visible using CSS transitions. - Ex 3: Cards:
Build a 4-column card layout using Flexbox. Implement an overlay link.
Description
Describe the exercise in a few sentences. What is important? What do you need to use?
→ It's all about flexbox, custom properties, logical properties, hover,... for me, the hover is the most fun thing i had done.
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.
→ Typing the basic, necessary things about html.
Aauuw!
Describe what was difficult. Where did you spend most of the time?
→ I kinda get what .visually-hidden means but it's not easy to use.
Not sure?
Describe what you are unsure about or what you're doubtful about.
→ The flexbox was quite hard to do as wel as the variables.