❗️❗️ Before you start, please Fork and Clone the repository. ❗️❗️

Module 1 Week 2: Intermediate CSS

Welcome to the guided exercises for learning intermediate concepts of CSS! This repository contains a series of exercises designed to help you practice and build your skills in creating web pages, styling them with CSS, and adding animations. For each exercise, follow the instructions given in the TODOs. Below is an overview of the exercises available:

Exercise 1: Layouting using Flexbox

• Objective: Set up a basic HTML document structure and practice using Flexbox properties.
• Key Concepts: Implement media queries to create a responsive design.
• Estimated Time: 30 minutes
• README: Exercise 1 README

Exercise 2: Reponsive Design with Media Queries

• Objective: Implement media queries to create a responsive design.
• Key Concepts: Viewport meta tag, changing styles based on screen width, adjusting layouts..
• Estimated Time: 30 minutes
• README: Exercise 2 README

Exercise 3: Basics of Animations and Transitions

• Objective: Explore CSS animations and transitions to bring elements to life.
• Key Concepts: Keyframes, timing functions, transitions for scaling and moving..
• Estimated Time: 30 minutes
• README: Exercise 3 README

Be Creative!

I encourage you to view these exercises not just as tasks to complete, but as opportunities to explore the vast and creative world of HTML and CSS. Feel free to experiment, try out new ideas, and make the web page uniquely yours.

Remember, the best way to learn is by doing. Dive in, get creative, and enjoy the process of bringing your web pages to life!

Feel free to navigate to each exercise folder for detailed instructions on the tasks. Happy coding!

Useful Resources

• MDN HTML Basics
• MDN CSS Flexbox
• MDN Media Queries
• MDN CSS Animations
• MDN CSS Transitions

Running on Codesandbox

1. Open your open your fork in github, refresh the page, click on "Sync fork", and update branch
2. Open https://codesandbox.io/
3. Sign in with your github account
4. Click on the "Create" button on the top right and select "import repository"
5. Click on enable public repositories
6. Select the repository that you have cloned
7. Wait for the process in the terminal to finish. Once it's done, you should be able to see index.html in the preview panel.

How to Submit

• Fork and clone the repository. You will be pushing your changes on your own fork.
• Complete each exercise according to the instructions in the respective README files.
• Save your changes and commit them to your local repository.
• Push your changes to your GitHub repository.
• Submit the link to your GitHub repository to the corresponding submission bin in BBL.