Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/tedjenkler/card-bootstrap-scss

Project by Teodor Jenkler for Frontend Mentor's challenge is a blog preview card built with React, Bootstrap, and SCSS. It features a clean and responsive design, ensuring optimal viewing across various devices. The project includes interactive hover states and focuses on efficient and scalable styling practices.
https://github.com/tedjenkler/card-bootstrap-scss

bootstrap bootstrap5 react scss vite

Last synced: 15 days ago
JSON representation

Host: GitHub
URL: https://github.com/tedjenkler/card-bootstrap-scss
Owner: TedJenkler
Created: 2024-08-25T03:02:12.000Z (3 months ago)
Default Branch: main
Last Pushed: 2024-08-25T03:49:11.000Z (3 months ago)
Last Synced: 2024-11-02T17:05:39.876Z (15 days ago)
Topics: bootstrap, bootstrap5, react, scss, vite
Language: JavaScript
Homepage: https://bootstrap-scss-card-tedjenkler.netlify.app/
Size: 102 KB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

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)

- [Acknowledgments](#acknowledgments)

## Overview

### The challenge

Users should be able to:

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

### Screenshot

![Screenshot of the Blog Preview Card](./screenshot.png)

### Links

- Solution URL: [GitHub Repository](https://github.com/TedJenkler/Card-Bootstrap-SCSS)

- Live Site URL: [Live Demo](https://bootstrap-scss-card-tedjenkler.netlify.app/)

## My process

### Built with

- [Vite](https://vitejs.dev/) - A frontend build tool for fast development with a modern workflow.

- [React](https://reactjs.org/) - A JavaScript library for building user interfaces.

- [SCSS](https://sass-lang.com/documentation) - For advanced styling and creating flexible, maintainable stylesheets.

- [Bootstrap](https://getbootstrap.com/docs/) - For UI components and responsive design utilities.

### What I learned

During this project, I gained more experience in the following areas:

- **SCSS:** Enhanced understanding of SCSS features like mixins, maps, variables, and responsive design.

- **Bootstrap:** Improved skills in utilizing Bootstrap for rapid UI development and responsive design.

### Continued development

In future projects, I plan to:

- Explore more complex SCSS techniques and further streamline my stylesheets.

- Dive deeper into Bootstrap customization to create more unique designs while leveraging its grid system and components.

### Useful resources

- [Bootstrap Documentation](https://getbootstrap.com/docs/) - For UI components and responsive design utilities.

- [SCSS Documentation](https://sass-lang.com/documentation) - For comprehensive details on SCSS syntax and features.

- [Vite Documentation](https://vitejs.dev/) - For setting up a fast and efficient development environment.

- [React Documentation](https://reactjs.org/docs/getting-started.html) - For learning and using React effectively.

## Author

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

- LinkedIn - [Teodor Jenkler](https://www.linkedin.com/in/tedjenklerwebdeveloper/)

- X - [@TJenkler](https://x.com/TJenkler)

- Discord - [TedJenkler](https://discord.com/users/TedJenkler)

- YouTube - [WebDevwithTed](https://www.youtube.com/@WebDevwithTed)