You can download the project or fork and run the project locally to get hands-on practice with the core concepts below. Start with reviewing the code and comments for each file in the practice folder.
- CSS - Selector Lists & Compound Selectors
- Containers - Floats, Grid & Flexbox
- Media Queries - Mobile First Development
- Inspect Tools - Viewing Layouts in the Browser
1. Try styling the elements to match the screenshots shown above.
2. Import a different font style from Google Fonts
3. Try to double the number of cards in each container. You can use as many rows as you'd like for tablets, but make sure each container only has one row when viewed on a larger screen, and one column when viewed on a mobile device. Floats can be tricky to work with, so you can follow the resources here or use the hint in the comments to practice searching and applying a different solution!
Once you complete the challenges you'll be able to use your new float, grid, and flexbox skills to build a fully responsive layout from scratch! Find a website you like and use the box model and your browser inspect tools to build a layout representing the home page (add text content too if you'd like!). The starter files are in the project folder.
If you run into trouble, you can reach out in the [🕒 catchup-crew] or [❓code-help] channels in the #100Devs Discord. It's an amazing community space filled with supportive developers happy to answer any questions you may have!
1. To get started, open this link in a new tab to fork or make a personal copy of this repository
- NOTE: You may find it easier to keep the same name, but you can change it if you like!
2. Click the code button to open the dropdown and copy the URL (make sure HTTPS is selected).
3. Open the terminal in your editor, type 'git clone' and paste the URL (the command should follow one of the formats below).
git clone https://github.com/YOUR-GITHUB-USERNAME/html-css-responsive-design
git clone https://github.com/YOUR-GITHUB-USERNAME/YOUR-REPOSITORY-NAME
4. Run the command (Press Enter)
5. Navigate to the project folder
cd html-css-responsive-design
cd YOUR-REPOSITORY-NAME
Done! You are now able to run the project locally.
A big thanks to #100Devs for the community support, and Leon Noel for the project inspiration.
If you found some value here and would like to support, feel free to give the project a ⭐️!
- HTML/CSS - Semantic Elements & Basic CSS Styles
- HTML/CSS - Containers & Responsive Design
- HTML/CSS - Forms & More CSS Styles
- JavaScript (Client-side) - The DOM(Introduction): User Interaction & Changing the DOM
- JavaScript (Client-side) - Fetch API(Introduction): Promise Chains & Handling JSON
- JavaScript (Client-side) - Fetch API(Advanced): Async/Await & Handling JSON
- JavaScript (Server-side) - URL Endpoints with NodeJS(Introduction)
- JavaScript (Full-Stack) - MVC Architecture(Introduction)
- JavaScript (Full-Stack) - MVC Architecture(Advanced): Authentication - Coming Soon!
- JavaScript (Full-Stack) - MVC Architecture(Advanced): PostgreSQL - Coming Soon!
- JavaScript (Full-Stack) - MVC Architecture(Advanced): ReactJS - Coming Soon!
This project is distributed under the MIT License. Click here for more information.