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.
- Semantic Elements
- Text Alignment
- Box Model - Padding, Borders, and Margin
- Font Styles - Using Google Fonts
1. Try switching fonts and changing how the elements are positioned or styled (you can match the examples above or apply your own styles).
2. For an extra challenge, try adding new elements and experimenting with different styles and text alignments. Have fun and be creative!
Once you complete the challenges you'll have the knowledge to build your own basic portfolio page from scratch! 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-introduction
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-introduction
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.