intro-frontend-course

Intro Frontend Course

Week 1 - HTML Basics

• Overview of the World Wide Web
• Introduction to HTML
• Semantic HTML
• Project: Create a simple personal webpage

Week 2 - CSS Fundamentals

• Introduction to CSS
• CSS Selectors and Properties
• Styling Text and Boxes with CSS
• Chrome Developer Tools
• Project: Style the personal webpage

Week 3 - CSS Grids and Responsive Design

• CSS Positioning, Grid System, and Layout
• Responsive Design
• Project: Enhance the personal webpage

Week 4 - Git and Version Control

• Introduction to Version Control with Git
• Basic Git Commands and Workflow
• Branching and Merging in Git
• Project: Manage the React application with Git

Week 5 - JavaScript Essentials

• Introduction to JavaScript
• Variables and Data Types
• Functions and Control Structures
• Understanding the Document Object Model (DOM)
• Project: Add interactivity to the webpage with JavaScript

Week 6 - Modern JavaScript

• ES6 Features and Syntax
• JavaScript Arrays
• JavaScript Objects
• Project: Create a simple quiz or a to-do list app

Week 7 - JavaScript Advanced Concepts

• Object-Oriented Programming
• Asynchronous JavaScript and Promises
• Basic Performance Optimization
• Project: Enhance the quiz or to-do list app

Week 8 - API Interactions and Fetching Data

• Introduction to APIs
• Making HTTP Requests with JavaScript
• More on HTTP Requests: Introduce POST, PUT, DELETE methods with Fetch API
• Project: Build a simple application that fetches and displays data from an API

Week 9 - Introduction to React

• Setting Up React Environment
• Components and Props
• State and Lifecycle in React
• Project: Convert the JavaScript project from Week 6 into a React application

Week 10 - Advanced React Concepts

• Handling Events in React
• Forms and Controlled Components
• Conditional Rendering and Lists
• React Hooks for API Calls: Utilizing useEffect and useState for API calls
• Introduction to the Context API
• Advanced Routing Techniques with React Router
• State Management with Redux or Zustand
• Project: Add advanced features to the React application

Week 11 - Capstone Portfolio Project

• Creating a Portfolio Website
• Finalizing the Capstone Project
• Presentation and Showcase

Week 12 - Project Development

• Planning and Wireframing
• Building and Iterating on the Project
• Implementing Feedback and Refactoring
• Deploying a Website (GitHub Pages, Netlify, Vercel)
• Project: Plan and start developing a capstone project

Course Wrap-Up

• Review and Reflection
• Next Steps in Frontend Development
• Course Evaluation and Feedback