Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dracudev/s1.1-html-css-flex
Sprint to practice HTML and CSS.
https://github.com/dracudev/s1.1-html-css-flex
animations-css css3 html5 it-academy media-queries
Last synced: about 1 month ago
JSON representation
Sprint to practice HTML and CSS.
- Host: GitHub
- URL: https://github.com/dracudev/s1.1-html-css-flex
- Owner: dracudev
- Created: 2024-10-15T09:04:41.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-11-29T21:55:42.000Z (about 2 months ago)
- Last Synced: 2024-11-29T22:37:26.869Z (about 2 months ago)
- Topics: animations-css, css3, html5, it-academy, media-queries
- Language: CSS
- Homepage:
- Size: 20.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# S1.1 HTML & CSS with Flex
## 📄 Description
This project involves creating a responsive layout that works on desktop, tablet and mobile devices. Throughout the exercise, you will apply **HTML**, **CSS**, **Flexbox**, and **Media Queries** concepts to design a flexible and optimized structure.
### Objectives
- Understand and practice HTML and CSS.
- Learn how to create small CSS animations.
- Understand how MediaQueries work.
## 📐 Project Structure
### ⭐ Level 1
- **Exercise 1**: Desktop layout based on the provided wireframe.
- **Exercise 2**: Adapt the layout for tablets using Media Queries.
- **Exercise 3**: Adapt the layout for mobile devices.
### ⭐⭐ Level 2
- **Exercise 4**: Change the background color based on screen width (desktop, tablets, mobile).
### ⭐⭐⭐ Level 3
- **Exercise 5**: Implement CSS animation using hover to change the dimensions and color of the first div.
## 💻 Technologies Used
- HTML5
- CSS3
- Flexbox
- Media Queries
## 📋 Requirements
- Recommended text editor: [Visual Studio Code](https://code.visualstudio.com/)
- An up-to-date web browser (Google Chrome, Firefox, etc.)
## 🛠️ Installation
1. Clone this repository:
```bash
git clone https://github.com/dracudev/S1.1-HTML-CSS-Flex.git
```
2. Navigate to the project directory:
```bash
cd S1.1-HTML-CSS-Flex
```
3. Open the project in your text editor and start coding.
```bash
code .
```
## ▶️ Execution
1. Open the `index.html` file in your browser to view the layout.
2. Customize and modify the layout using `style.css` for different screen sizes.