Web Development Foundations

Welcome to the Web Development Foundations course! This comprehensive curriculum is designed for beginners to build a solid foundation in web development, covering essential tools, languages, and concepts to start your journey as a web developer.

---

License

This educational resource is released under the CC BY (Creative Commons Attribution) 4.0 Taiwan license.

Author: Fuyuan Cheng (gloomcheng@gmail.com)

You are free to:

• Share — copy and redistribute the material in any medium or format
• Adapt — remix, transform, and build upon the material for any purpose

The only requirement is:

• Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.

See the full license terms: CC BY 4.0 Taiwan

---

Course Outline

1. Development Tools

• Git

  • Learn version control basics: git init, git add, git commit.
  • Learn SSH key generation and usage.
  • Understand branching, merging, and resolving conflicts.
  • Collaborate using GitHub.

• Code Editor

  • Set up your coding environment.
  • Install extensions like Prettier, ESLint, and Live Server.
  • Master productivity shortcuts.

• Terminal

  • Learn how to install WSL and use it to run Linux on Windows.
  • Learn how to use the terminal.
  • Learn how to use the command line.
  • Learn common commands.

---

2. Web Development Fundamentals

• HTTP

  • Understand status codes (200, 404, 500).
  • Explore HTTP methods (GET, POST, PUT, DELETE).

• HTML

  • Build structured web pages using tags like <div>, <a>, <img>, <form>.
  • Explore HTML5 features such as <video> and <canvas>.

• CSS

  • Style your pages with selectors, the box model, and layouts (Flexbox, Grid).
  • Create responsive designs and use CSS Variables.

• Python

  • Learn backend programming language fundamentals.
  • Build Web API applications.

---

How to Use This Repository

1. Clone the repository to your local machine:

   git clone https://github.com/your-username/web-dev-foundations.git
   cd web-dev-foundations

2. Follow the instructions in the corresponding directories for each module:

   • slides/: Markdown format course slides.
   • pdfs/: PDF format course materials.
   • examples/: Code examples and exercises.

3. Explore the examples/ folder for comprehensive practice.

---

Suggested Learning Path

1. Start with slides/http.md to understand web communication language.
2. Learn slides/html.md to understand web structure.
3. Master slides/css.md for visual presentation.
4. Familiarize yourself with slides/cli.md development tools.
5. Set up slides/editor.md editing environment.
6. Master slides/git.md version control.
7. Learn slides/python.md backend development.
8. Explore slides/fastapi.md API development.

---

Prerequisites

• Basic knowledge of how to use a computer.
• Familiarity with command-line tools is a plus (optional).

---

Project Contributions

Contributions are welcome! Feel free to submit pull requests for fixes, improvements, or additional exercises.

1. Fork this repository.
2. Create a feature branch:

   git checkout -b feature/your-feature

3. Commit your changes and push:

   git push origin feature/your-feature

4. Open a pull request.

---

Contact

For questions or suggestions, please reach out via Issues or email at gloomcheng@gmail.com.