https://github.com/fatemzh/article-preview

This project is a responsive article preview component. It shows social media share links when the share button is clicked, adapting to different screen sizes for an optimal user experience. Built with HTML, CSS, and JavaScript.
https://github.com/fatemzh/article-preview

frontend-mentor mobile-first vanilla-js

Last synced: about 1 month ago
JSON representation

This project is a responsive article preview component. It shows social media share links when the share button is clicked, adapting to different screen sizes for an optimal user experience. Built with HTML, CSS, and JavaScript.

• Host: GitHub
• URL: https://github.com/fatemzh/article-preview
• Owner: fatemzh
• Created: 2024-07-24T10:36:46.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-08-22T11:18:55.000Z (4 months ago)
• Last Synced: 2024-08-22T12:51:05.513Z (4 months ago)
• Topics: frontend-mentor, mobile-first, vanilla-js
• Language: SCSS
• Homepage: https://fatemzh.github.io/article-preview/
• Size: 258 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Frontend Mentor - Article preview component

## Welcome! 👋

This is a solution to the [Article Preview Component coding challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/article-preview-component). 

## Overview

![Design preview for the Article preview component coding challenge](./design/desktop-preview.jpg)

### The Challenge

Your challenge was to build out this article preview component and get it looking as close to the design as possible.

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

### Links

- Solution URL: [GitHub Repository](https://github.com/yourusername/article-preview-component)

- Live Site URL: [Live Site](https://yourusername.github.io/article-preview-component)

## My Process

### Built With

- Semantic HTML5 markup

- CSS custom properties

- Flexbox

- Mobile-first workflow

- Vanilla JavaScript

### What I Learned

In this project, I learned how to manage responsive layouts using a mobile-first approach and how to use JavaScript to handle interactive elements such as the share button.

### Continued Development

In future projects, I want to focus more on:

- Improving accessibility

- Implementing responsiveness more efficiently

- Exploring more advanced JavaScript features