This is a solution from Dimitris Kaffes to the Huddle landing page with single introductory section challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
A landing page with header, main and footer sections.
Mobile-first design was implemented.
The layout changes to a two-column grid for the desktop version using a media query.
Users should be able to:
- View the optimal layout for the page depending on their device's screen size
- See hover states for all interactive elements on the page
- Solution URL: huddle-landing-page-single-introductory-section solution on Github
- Live Site URL: huddle-landing-page-single-introductory-section live site
A mobile-first approach was followed.
The HTML was structured using semantic elements.
The use of CSS Grid changed the layout to a two-column grid for the desktop version using a media query.
The social icons were aligned using Flexbox.
Custom properties were used for the colors.
For the social icons, the Ionicons font library was used.
CSS nesting and the & nesting selector were used for the focus, hover and active states of the button and the social links.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
-
The basic structure of a small landing page.
-
Embedding icons from a font library and styling them.
Further investigating the use of icons, font libraries and .svg files.
- Ionicons Usage - This helped me embed the ionicons icons.
- Using CSS nesting - This article explains how to use CSS nesting and the
&nesting selector
- Frontend Mentor - @dkaffes