Lab 3 - Basics Of CSS 2
Goals Of The Exercise
- Font Hosting & Integration: Download, convert, and self-host web fonts using @font-face. Include appropriate fallbacks and serve from your own server.
- Positioning & Layout: Apply positioning techniques (relative, absolute, fixed, sticky) to control element placement and layout flow.
- Flexbox Fundamentals: Use Flexbox to align, space, and distribute elements. Work confidently with properties like flex-direction, justify-content, and align-items.
- Visibility & Accessibility: Distinguish between display: none, visibility: hidden, the hidden attribute, and .visually-hidden. Apply the right method based on use case and accessibility needs.
- Accessible Hiding: Use .visually-hidden to hide elements visually while keeping them accessible to screen readers and assistive tech.
- CSS Transitions & Interaction: Add smooth transitions to elements using transition-property, duration, and easing functions to enhance interactivity.
- CSS Nesting & Structure: Use CSS nesting to group related rules for cleaner, more maintainable stylesheets.
- Logical Properties & Writing Modes: Work with logical CSS properties (margin-inline, padding-block) for better support of different languages and writing directions.
- CSS Variables & Reusability: Create and manage CSS custom properties (--variables) to enable scalable and consistent styling across components.
- Overlay Links & Usability: Implement full-area overlay links to make entire containers clickable, improving usability and accessibility on all devices.
Description
As the next step in front-end development, this project focused on using CSS to build responsive and accessible layouts with semantic HTML. The goals included self-hosting fonts using @font-face, applying positioning techniques, and working with Flexbox for flexible layouts.
The exercise introduced CSS logical properties, custom properties (variables), and nesting to organize and reuse styles effectively. Accessibility was a key focus, including visually hiding elements for screen readers and understanding visibility methods.
The project also covered CSS transitions for smoother interactions and overlay links to improve usability. This lab helped build a solid foundation for creating user-friendly and maintainable web interfaces.
Related Links
Since this was a more advanced CSS project building on earlier basics, the validation needs shifted to focus not just on syntax but also on accessibility and maintainability. To support this, I used tools like axe DevTools and the W3C Markup Validation Service to catch accessibility concerns and coding errors early.
These tools helped ensure proper contrast, semantic structure, and overall code quality throughout the styling process. Integrating these checks into my workflow helps me write cleaner, more accessible, and standards-compliant code as I develop more complex layouts.
Reflection
Working with advanced CSS in this project was more challenging than I initially expected, especially when it came to knowing when and why to use certain techniques. I often found it difficult to decide if Flexbox or nesting was the best approach for a given layout or style. Understanding how styles cascade and override each other added to the confusion, making it hard to predict how changes would affect the page.
It was only by trying different things, experimenting, and debugging that I began to understand what works best in each situation. This experience showed me that gaining a strong grasp of CSS requires patience, practice, and a lot of hands-on trial and error. Moving forward, I'm motivated to keep learning and improving my ability to choose the right tools for the task.