Social link profile

This project was a significant opportunity to consolidate foundational skills and delve deeper into advanced CSS techniques, particularly around layout and responsiveness.

• Robust Centering with CSS Grid (place-items: center): I gained a deeper understanding of using display: grid combined with place-items: center on the body (or a main container) for a highly effective and concise method of centering elements both horizontally and vertically on the screen. This is a powerful and modern layout pattern.

• Strategic Layout with <main> as a Container: I refined my approach to layout by shifting the primary centering and dimensioning properties from the body to the <main> element. This demonstrated the importance of separating global body styles from main content layout, leading to more modular, scalable, and predictable CSS, especially when dealing with complex nested elements. This was key to resolving unexpected sizing issues.

• Modern Responsive Sizing with min(): I successfully implemented width: min(100%, 38.4rem) on the card. This advanced CSS function provides a superior way to manage responsiveness, allowing the element to be fluid up to a maximum desirable size, preventing overflow on small screens and excessive stretching on large ones.

• Optimizing Font Loading (font-display: swap): I integrated font-display: swap into the @font-face rules. This technique significantly improves perceived page load performance by displaying fallback text while custom fonts are loading, enhancing the user experience by avoiding invisible text (FOIT).

• Interactive States (:hover, :focus-visible): I meticulously implemented :hover and :focus-visible states for interactive elements, ensuring not only visual feedback but also improved accessibility for users navigating via keyboard.

• Semantic HTML and Accessibility: I reinforced the use of semantic HTML tags like <main>, <article>, <nav>, and <a> to create a well-structured and accessible document outline, which benefits both search engines and assistive technologies.