Skip to main content

Introduction

This project is designed to provide aspiring front-end developers with hands-on experience and a structured roadmap to master the fundamentals and advanced concepts of front-end development. Participants will work on real-world scenarios, gaining a deep understanding of HTML, CSS, JavaScript, and modern frameworks like React.js or Vue.js.

The program emphasizes:

  • Fundamental of web development with HTML5, CSS3 and Javascript (ES6).
  • Framework Usage: Gain expertise in building scalable and maintainable applications using ReactJS or Vue.js.
  • Version Control: Collaborate on projects using Git and Gitlab to simulate real-world development workflows.
  • API Integration: Understand how to fetch and display data from RESTful or GraphQL APIs.
  • UI/UX Principles: Apply design system concepts to ensure consistent, user-friendly interfaces.
  • Writing simple, maintainable code with best practices.

Throughout the project, learners will build several small applications, culminating in a capstone project that demonstrates their ability to create a production-ready front-end application. This hands-on approach ensures participants not only acquire theoretical knowledge but also develop practical skills that are essential for professional front-end developers.

Contents​

Repository & guidance​

  1. You'll learn basic web development, and practice throughout project.
  2. The main branch contains all documents and assets you need for this project.
  3. The assets and related document noted in below section. You will read the documents and your work must follow these standards.
  4. You'll work on your own branch and push the code and document to provided branch. The reviewers will review your work base on provided documents standards.
  5. Each week, you'll have a 30-minutes discuss with your mentors to follow up your learning progress and evaluate your skill. Please proactively schedule an appointment.
  6. Please be active, and contact for support if you're struggling.
  7. Happy coding!

Documents & Assets:​

1. Coding standards: You'll follow these coding convention.​

2. Git Documentation​

2.1. The work is saved on gitlab. You have to learn and familiar with basic git command and how it works.​

  • Configuring : config, help.
  • Creating : init, clone.
  • Make Changes: status, diff, add, commit, reset, rm, mv (not important).
  • Branching & Merging: branch, checkout, merge, stash
  • Review History: log, tag, diff, show
  • Update and Publish: fetch, pull, push, remote.
  • Very Important: reflog

2.2 Learn Git​

3. Figma​

4. Framework/library documentation​

4.1. Docs​
4.2. Additional lib/framework​
  1. State management
  1. Router

  1. Tailwindcss - CSS framework

  2. MUI - component library

  3. Element+ - component library

5. Udemy Courses resources​

6. Roadmap​

  1. HTML + CSS + JS (2 weeks)
  2. React/VueJS Basic (2 weeks)
  3. Training project: Ecommerce Project Training (2 months)

7. After this project you'll have basic knowledge of:​

  1. HTML5
  2. CSS3
  3. Javascript (ES6)
  4. Pick one: ReactJS / VueJS
  5. Additional skills
    • Know how the web works.
    • Write maintainable codes.
    • Follow standard & design.
    • Git basic.
    • Solving problems.
    • Documentation.
    • Working with teams.
    • Deploy your own code.