https://github.com/okayishmael/article-preview-component
My solution for Frontend Mentor Junior Level challenge #2
https://github.com/okayishmael/article-preview-component
css3 html5 intermediate javascript responsive-design
Last synced: 27 days ago
JSON representation
My solution for Frontend Mentor Junior Level challenge #2
- Host: GitHub
- URL: https://github.com/okayishmael/article-preview-component
- Owner: okayishmael
- Created: 2025-02-06T15:40:44.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-12T16:02:21.000Z (over 1 year ago)
- Last Synced: 2025-08-25T15:45:45.528Z (9 months ago)
- Topics: css3, html5, intermediate, javascript, responsive-design
- Language: CSS
- Homepage: https://okayishmael.github.io/article-preview-component/
- Size: 250 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README-template.md
Awesome Lists containing this project
README
# Frontend Mentor - Article preview component solution
This is a solution to the [Article preview component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/article-preview-component-dYBN_pYFT). 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)
- [Acknowledgments](#acknowledgments)
## Overview
### The challenge
Users should be able to:
- View the optimal layout for the component depending on their device's screen size
- See the social media share links when they click the share icon
### Screenshot
### Links
- Solution URL: [Github Repository](https://www.gitbhub.com/okayishmael/article-preview-component)
- Live Site URL: [Github Live Page](https://okayishmael.github.io/article-preview-component)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- JavaScript
- Flexbox
- Mobile-first workflow
### What I learned
- I learned that when using javascript to display hidden element block, you much have only one direct child element within it. If not all the direct children element with display block causing you style to look different(stack of top of each other).
- I learned how to implement relative and absolute values.
### Continued development
I have just moved from beginner's level to junior level in the frontend mentor challenge path. The junior level includes javascript in projects. So I am going to take [The Complete JavaScript Course by Jonas Schmedtmann](https://www.udemy.com/course/the-complete-javascript-course) to get more understanding in JavaScript while I do challenges that contain it.
### Useful resources
- [W3schools](https://www.w3schools.com) - This helped me understand the javascript I used in this project.
## Author
- Website - [Ishmael Sunday](https://www.linkedin.com/in/ishmael-sunday)
- Frontend Mentor - [@okayishmael](https://www.frontendmentor.io/profile/okayishmael)
## Acknowledgments
- [W3schools](https://www.w3schools.com)