Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/adrienneaew/blog-preview-card-main

This is a solution to the Blog preview card challenge on Frontend Mentor]. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
https://github.com/adrienneaew/blog-preview-card-main

flexbox-css front-end-development frontend-mentor html-css sass-framework

Last synced: 8 days ago
JSON representation

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

Awesome Lists containing this project

README 

        
# Frontend Mentor - Blog preview card solution



This is a solution to the [Blog preview card challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/blog-preview-card-ckPaj01IcS). Frontend Mentor challenges help you improve your coding skills by building realistic projects. 



## Table of contents



- [Overview](#overview)

  - [The challenge](#the-challenge)

  - [Screenshot](#screenshot)

  - [Links](#links)

- [My process](#my-process)

  - [Built with](#built-with)

  - [What I learned](#what-i-learned)

  - [Continued development](#continued-development)

  - [Useful resources](#useful-resources)

- [Author](#author)



## Overview

This HTML & CSS-only challenge to create a preview card for a blog post. We designed our card using flexbox and SCSS.



### The challenge



Users should be able to:



- See hover and focus states for all interactive elements on the page



### Screenshot



![](/assets/images/BlogPreviewCard-Screenshot.jpeg)



### Links



- Solution URL: [Add solution URL here](https://github.com/AdrienneAEW/blog-preview-card-main)

- Live Site URL: [Add live site URL here](https://adrienneaew.github.io/blog-preview-card-main/)



## My process

I used flexbox to building this card and continue on my journey of advancing my SCSS and GitHub skills.



### Built with



- Semantic HTML5 markup

- Flexbox

- Mobile-first workflow

- [Sass/SCSS](https://sass-lang.com//) - For styles



### What I learned



Working with GitHub has taught me a bit more about absolute vs. relative paths. So these challenges are truly great learning tools. And of course practice makes perfect. Although my finally design css is simple flexbox code, I actually took sometime and tried a lot of different flexbox properties to see how they worked, i.e., like flex-grow. Flex grow can actually work better than defining width, especially when you want a site to be responsive across all browsers.



### Continued development



There are two more challenges to go in the beginner learning path. As much as I want to move on to more challenging challenges. 



### Useful resources



- [Flexbox Tutorial](https://www.w3schools.com/css/css3_flexbox.asp) - W3 School has been instrumental in learning the many properties of flexbox and provides a place to test what you learn. Not the most indept learning experiencing, but great at simlifying and teaching the basics of frontend web development.

- [Learn Sass](https://www.freecodecamp.org/news/the-beginners-guide-to-sass/) - FreeCode Camp has a wonderful Beginner's Guide to Sass that I found very useful and still refer to from time to time.

- [Learn GitHub](https://skills.github.com/) - Up your GitHub game with GitHub Skills. 



## Author



- Website - [AdrienneAEW Portfolio](https://adrienneaew.me/Portfolios/AEWPortfolio/AEWPortfolio.html)

- Frontend Mentor - [@AdrienneAEW](https://www.frontendmentor.io/profile/AdrienneAEW)

- GitHub Profile - [@AdrienneAEW](https://github.com/AdrienneAEW)