Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/mattetti/web-dev-journey

Series of exercises to learn the basics of web programming
https://github.com/mattetti/web-dev-journey

Last synced: about 12 hours ago
JSON representation

Series of exercises to learn the basics of web programming

Awesome Lists containing this project

README 

        
# Web Dev Journey



Welcome to the Web Dev Journey! This project guides you through the fundamentals of web development, covering HTML, CSS, and JavaScript. Through a series of 10 progressive exercises, you'll build a fan page for Rory Gilmore from the TV show "Gilmore Girls" while learning essential web development concepts.



## Project Overview



This course consists of 10 exercises, each focusing on a specific web development concept. You'll start with basic HTML and progress through CSS styling, JavaScript functionality, and more advanced topics like API integration and local storage.



### Course Structure



1. Introduction to HTML: Basic structure and elements

2. CSS Basics: Styling your HTML

3. JavaScript Fundamentals: Variables and basic operations

4. Interactive Web Pages: Buttons and event listeners

5. Responsive Design: Media queries and flexbox

6. Forms and Input Validation

7. DOM Manipulation: Creating and modifying elements

8. API Integration: Fetching data from a simple API

9. Local Storage: Saving and retrieving data

10. Building a Simple To-Do List Application



Each exercise builds upon the previous ones, allowing you to gradually develop your skills and understanding of web development concepts.



## Getting Started



### Prerequisites



To participate in this course, you'll need:



1. A computer with internet access

2. Google Chrome browser

3. Visual Studio Code



### Setting Up Your Development Environment



1. Install Visual Studio Code:

   - Visit the [Visual Studio Code website](https://code.visualstudio.com/)

   - Download and install the version appropriate for your operating system



2. Install the Live Server extension for VS Code:

   - Open VS Code

   - Click on the Extensions view icon on the sidebar (or press Ctrl+Shift+X)

   - Search for "Live Server"

   - Click "Install" next to the extension by Ritwick Dey



3. Install Google Chrome:

   - If you don't have it already, download and install [Google Chrome](https://www.google.com/chrome/)



### Forking and Cloning the Repository



1. Visit the project repository: https://github.com/mattetti/web-dev-journey

2. Click the "Fork" button in the top-right corner of the page

3. Select your GitHub account as the destination for the fork

4. Once forked, click the "Code" button and copy the URL provided



5. In VS Code:

   - Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on Mac)

   - Type "Git: Clone" and select it

   - Paste the URL you copied

   - Choose a local directory to store the project

   - Click "Open" when prompted to open the cloned repository



If you don't see the "Git: Clone" option, you may need to install Git on your computer. You can download Git from the [official website](https://git-scm.com/).



## Working on Exercises



1. In VS Code, navigate to the exercise folder (e.g., `01-html-intro`)

2. Read the exercise instructions in the README.md file

3. Complete the exercise by editing the provided files

4. Use the Live Server extension to view your work in real-time:

   - Right-click on the HTML file

   - Select "Open with Live Server"

5. Run the tests provided in each exercise to check your work



## Committing Your Changes



After completing an exercise:



1. In VS Code, click on the Source Control view icon in the sidebar (or press Ctrl+Shift+G)

2. Review your changes

3. Enter a commit message describing your work

4. Click the checkmark icon to commit your changes

5. Use the "..." menu to push your changes to your GitHub repository



Happy coding, and enjoy your Web Dev Journey!