This is the first Frontend Mentor Challenge that I coded as part of building my porfolio. It's a basic landing page for a fictitious social network app. I hadn't completed a full page by myself before, so I saw this as a good challenge.
Frontend Mentor is a website full of these projects. This particular project included:
- An unstructured HTML file with the text content of the project;
- A design folder with JPG images to show what the final product should looke like;
- SVG images and icons;
- A style guide, containing mostly informations about the font size and the color palette;
- A README file with general informations about the challenge and some helpful tips.
- HTML5;
- CSS3;
- CSS Flexbox;
- CSS Grid;
- CSS autoprefixer;
- CSS beautifier;
- Git Bash.
I first structured the HTML file content with semantic HTML tags. I styled the HTML with CSS replicating the mobile design first, to conform to a mobile first approach. I then added a breakpoint at 1440px (using a media query) and modified the styles to fit the desktop design.
Beside structuring and styling the page to look as close as possible to the original design, I added:
- normalize.css, to use the same default styling across all browsers;
- Hover states with transition for different links;
- More breakpoints for tablets and smaller desktop screens;
- Semantic HTML and ARIA landmark roles for accessibility;
- Prefixes to ensure cross-browser compatibility;
- An empty
<script>tag at the bottom of the footer to prevent Chrome from firing transitions on page load.
I also used:
- VScode as my text editor;
- Chrome dev tools;
- SMACSS methodology to structure the CSS code;
Coded by Felix Guerin