Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Introduction to Frontend Development
Welcome and Introduction
Setting Up Development Environment
Course Overview and Expectations
Week 1 - HTML Basics
Overview of the world wide web
Introduction to HTML
Semantic HTML
Project: Create a simple personal webpage using basic HTML elements.
Week 2 - CSS Fundamentals
Introduction to CSS
CSS selectors and sroperties
Styling Text and Boxes with CSS
Chrome Developer Tools
Project: Style the personal webpage created in Week 1 using CSS.
Week 3 - CSS Grids and Responsive Design
CSS Positioning, Grid System, and Layout
Responsive Design in CSS
Project: Implementing CSS Grid and Responsive Design
Week 4 - Git and Version Control
Getting Started with Git and GitHub
Mastering Git for Frontend Development: A Beginner’s Guide
Git Branching and Merging: Enhancing Collaboration
Project: Managing a Web Page with Git
Week 5 - JavaScript Essentials
Introduction to JavaScript
Functions and Control Structures
Understanding the Document Object Model (DOM)
Project: Add Interactivity to the Webpage with JavaScript
Week 6 - Modern Javascript
Javascript Objects
Javascript Arrays
ES6 Features and Syntax
Project: Create a Simple Quiz or 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 using the principles of Object oriented programming
Week 8 - API Interactions and Fetching Data
Introduction to APIs
Making HTTP Requests with JavaScript and Handling JSON Data
More on HTTP Requests: Introducing POST, PUT, DELETE methods with Fetch API
Project: Build a simple application that fetches and displays data from an API (e.g., weather app, news feed).
Week 9 - Introduction to React
Setting Up React Environment
Components and Props
State and Lifecycle in React
Project: Convert the JavaScript project from Week 8 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.
Context API
Routing Techniques with React Router
State Management with Redux and Zustand
Project: Add advanced features to the React application (e.g., using external APIs, adding routes).
Week 11 - Project Development
Creating a Portfolio Website
Project: Complete and refine the capstone project
Course Wrap-Up
Review and Reflection
Next Steps in Frontend Development
Course Evaluation and Feedback
Project: Students present their capstone projects and review their progress over the course.
Teach online with
Context API
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock