This is a solution to the 3-column preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

This project uses HTML and vanilla CSS to implement a mobile first, responsive design. The screenshot of the finished product can be seen below.

• HTML to create the structure
• vanilla CSS to design the webpage
• Grid and flex layouts to implement the design.
• BEM naming convention in writing CSS

• Firstly, to start off the project, I navigated to a newly created directory and created an empty git repo inside using git init command. The FrontEnd Mentor 3-column preview card component challenge repository is cloned in the created repo.
• Next, all the unused files, inline CSS etc were removed. Font families were added to the project using Google Fonts CDN. All the colors provided in the style-guide.md were added to the :root of the CSS.
• A CSS reset was implemented. Font size of the page was set to 15px so that 1rem == 15px
• The main page sanning the full viewport with appropriate background color was implemented.
• The card component was implemented using mobile first design. The contents were added keeping responsive design in mind.
• Added media query to look according to the designs using 375px for mobile and 1440px for desktop breakpoints. The static page was tested on various viewports/devices using the Firefox mobile layout viewer.
• A screenshot of the final result was taken using Firefox screenshot and was added to the project.

• VS Code as the Code Editor
• Live server VS Code extension to create a dev server
• Prettier pluggin for code formatting

• Solution URL: Github
• Live Site URL: Github Pages

• Frontend Mentor - @kanuos
• GitHub - @ykanuos
• GitHub - @ykanuos