Frontend Development - Oxtech Academy

About Course

Frontend Developers turn designs into the interactive websites and web apps people use every day. They are the ones who make sure a site looks great, works smoothly, and feels responsive on any device.

This practical 12-week Frontend Development programme is designed to take complete beginners from zero experience to confidently building modern, responsive websites and web applications. You will learn HTML, CSS, and JavaScript from the ground up, then move into a popular frontend framework, working with layouts, components, APIs, and version control using Git and GitHub.

This is not a theory-only course. Each week includes hands-on projects that gradually build your portfolio, leading to a complete capstone project that showcases your ability to build real, working websites and applications.

Course Content

Week 1: Web Foundations, HTML and Git
This week introduces the foundations of web development, from understanding how websites work to building structured pages with HTML and managing code with Git and GitHub.

Module 1: How the Web Works: Browsers, Servers, HTTP/HTTPS and DNS
Module 2: Setting Up the Dev Environment: VS Code, DevTools and Terminal Basics
Module 3: HTML Structure, Semantic HTML, Links, Images, Lists and Tables
Module 4: Forms and Input Types
Module 5: Meta Tags and Basic SEO Markup

Week 2: CSS, Layouts and Responsive Design
This week focuses on transforming basic HTML pages into polished and responsive interfaces using CSS, modern layout systems, animations, and Tailwind CSS.

Week 3: JavaScript Fundamentals
This week introduces you to JavaScript and the core programming concepts used to create logic, interactions, and dynamic behaviour in frontend applications.

Week 4: Modern JavaScript, the DOM and APIs
This week moves into practical JavaScript development, where you will work with modern syntax, webpage interaction, APIs, asynchronous programming, and essential development tools.

Week 5: TypeScript and React Fundamentals
This week introduces TypeScript and React, helping you move from basic JavaScript projects into structured, component-based frontend applications.

Week 6: Advanced React
This week deepens your React knowledge with advanced hooks, reusable logic, state management, routing, data fetching, and form validation.

Week 7: Next.js and Professional Practice
This week deepens your React knowledge with advanced hooks, reusable logic, state management, routing, data fetching, and form validation.

Week 8: Capstone, Deployment and Career Prep
This final week brings everything together through a complete capstone project, deployment, professional collaboration, and preparation for frontend career opportunities.

Week 9: Review & Revision
This week is dedicated to reinforcing everything you’ve learned throughout the Frontend Web Development course. You’ll revisit key concepts across HTML, CSS, JavaScript, React, TypeScript, Next.js, APIs, responsive design, and deployment, while strengthening any areas that still need improvement. Through guided revision and practical exercises, you’ll apply your skills more confidently and prepare for your capstone project, deployment, and final assessment.

Week 10: Peer Review & Capstone Preparation
This week focuses on refining your final frontend project through feedback, testing, and collaboration. You’ll review other learners’ work, receive constructive feedback on your own application, identify areas for improvement, and make final updates to your design, functionality, responsiveness, performance, and code quality. By the end of the week, you’ll have a polished capstone project ready for deployment, presentation, and final assessment.

Week 11: Capstone Project Submission & Final Exam
This week marks the completion of your Frontend Web Development journey. You’ll submit your capstone project, complete the final assessment, and demonstrate your ability to plan, build, test, and deploy a modern frontend application. By the end of the week, you’ll have showcased the practical skills needed to create responsive, interactive, and production-ready web experiences using HTML, CSS, JavaScript, React, TypeScript, Next.js, APIs, and modern development tools.

About Course

Course Content

Week 1: Web Foundations, HTML and Git This week introduces the foundations of web development, from understanding how websites work to building structured pages with HTML and managing code with Git and GitHub.

Module 1: How the Web Works: Browsers, Servers, HTTP/HTTPS and DNS

Module 2: Setting Up the Dev Environment: VS Code, DevTools and Terminal Basics

Module 3: HTML Structure, Semantic HTML, Links, Images, Lists and Tables

Module 4: Forms and Input Types

Module 5: Meta Tags and Basic SEO Markup

Week 2: CSS, Layouts and Responsive Design This week focuses on transforming basic HTML pages into polished and responsive interfaces using CSS, modern layout systems, animations, and Tailwind CSS.

Module 1: Selectors, Specificity, the Cascade and Units

Module 2: Box Model, Positioning and Display

Module 3: Typography, Colours and CSS Variables

Module 4: Flexbox, CSS Grid, Mobile-First Design and Media Queries

Module 5: Transitions, Animations and Tailwind CSS Essentials

Week 3: JavaScript Fundamentals This week introduces you to JavaScript and the core programming concepts used to create logic, interactions, and dynamic behaviour in frontend applications.

Module 1: Variables, Data Types and Operators

Module 2: Conditionals and Loops

Module 3: Functions, Arrow Functions and Scope

Module 4: Arrays and Array Methods: Map, Filter, Reduce and Find

Module 5: Objects, Strings and Error Handling

Week 4: Modern JavaScript, the DOM and APIs This week moves into practical JavaScript development, where you will work with modern syntax, webpage interaction, APIs, asynchronous programming, and essential development tools.

Module 1: ES6+ Features: Destructuring, Spread/Rest, Template Literals, Optional Chaining and Modules

Module 2: Closures and this

Module 3: DOM Selection and Manipulation, Events, Event Delegation and Local Storage

Module 4: Promises, Async/Await, the Event Loop, Fetch API, JSON and REST Basics

Module 5: npm and Vite

Week 5: TypeScript and React Fundamentals This week introduces TypeScript and React, helping you move from basic JavaScript projects into structured, component-based frontend applications.

Module 1: TypeScript Essentials: Types, Interfaces, Unions and Generi

Module 2: Why React and Component-Based UI

Module 3: JSX, Components and Props

Module 4: State with useState, Handling Events, Conditional Rendering, Lists and Keys

Module 5: Controlled Forms, Project Structure and Small Reusable Components

Week 6: Advanced React This week deepens your React knowledge with advanced hooks, reusable logic, state management, routing, data fetching, and form validation.

Module 1: useEffect, useRef, useMemo and useCallback

Module 2: Custom Hooks

Module 3: Context API, Zustand and Routing with React Router

Module 4: Data Fetching with TanStack Query

Module 5: Form Handling and Validation with React Hook Form and Zod

Week 7: Next.js and Professional Practice This week deepens your React knowledge with advanced hooks, reusable logic, state management, routing, data fetching, and form validation.

Module 1: Next.js App Router, Layouts and Dynamic Routes

Module 2: Server vs Client Components and Rendering Strategies: SSR, SSG and CSR

Module 3: Data Fetching, Route Handlers, Metadata and SEO

Module 4: Accessibility, Performance and Security

Module 5: Intro to Testing with Vitest and React Testing Library

Week 8: Capstone, Deployment and Career Prep This final week brings everything together through a complete capstone project, deployment, professional collaboration, and preparation for frontend career opportunities.

Module 1: Planning a Project from a Figma Design

Module 2: Building the Capstone: Next.js, TypeScript, Tailwind and a Real API

Module 3: Deploying to Vercel, Custom Domains and GitHub Actions Basics

Module 4: Team Workflow: Code Reviews, Issues and Agile Basics

Module 5: Portfolio, CV, GitHub Profile and Frontend Interview Preparation

Week 1 to 4 Review & Revision

Week 4 to 8 Review & Revision

Peer Review & Capstone Preparation

Graduation & Certificate Preparation