SOFTWARE DEVELOPER · LIBERIA

00

Kelvin Nimely

Course

Modern Frontend Web Development

Beginner20 weeks2 of 100 available

A twenty-week path into modern frontend development, from how the web works through HTML, CSS, JavaScript, React, and Next.js. Follow structured lessons and a weekly project, then finish with a deployed capstone.

Start first lesson

Learning objectives

  • Understand how the web works and set up a development environment
  • Build structured, accessible pages with HTML
  • Style layouts that work on phones, tablets, and desktops
  • Write JavaScript that handles data, the DOM, and APIs
  • Build applications with React, Next.js, and modern CSS tools
  • Prepare, test, and deploy a complete frontend project

Curriculum

2 of 100 lessons are open. The rest stay locked until they are published.

Week 1 — Web Development Foundations

Understand how the web works and set up your development environment.

  1. 1. How the Web Works: Browsers, HTTP, DNS, Domains, and Hosting4 min
  2. 2. Frontend vs. Backend: Understanding How Web Applications Work
  3. 3. Installing and Using VS Code and Browser Developer ToolsLocked
  4. 4. Creating Your First HTML Page and Inspecting It with DevToolsLocked
  5. 5. Git and GitHub Fundamentals for BeginnersLocked
  6. Weekly project. Build a personal introduction webpage and publish its source code on GitHub.Locked

Week 2 — HTML and Page Structure

Build meaningful, well-structured web pages using HTML.

  1. 6. HTML Document Structure, Elements, Tags, and AttributesLocked
  2. 7. Headings, Paragraphs, Links, Images, and ListsLocked
  3. 8. Semantic HTML and Accessible Page StructureLocked
  4. 9. HTML Forms, Input Types, Labels, and ValidationLocked
  5. 10. Building a Complete Registration Website with HTMLLocked
  6. Weekly project. Build a registration website with multiple sections and a functional HTML form.Locked

Week 3 — CSS Fundamentals

Style HTML pages and understand the CSS box model.

  1. 11. Introduction to CSS, Selectors, and CSS RulesLocked
  2. 12. Colors, Backgrounds, Typography, and Web FontsLocked
  3. 13. The CSS Box Model, Margins, Padding, and BordersLocked
  4. 14. CSS Units, Specificity, Inheritance, and the CascadeLocked
  5. 15. Styling Your Registration Website with CSSLocked
  6. Weekly project. Transform the HTML registration website into a polished, styled page.Locked

Week 4 — Layouts and Responsive Design

Create layouts that adapt to phones, tablets, and desktops.

  1. 16. CSS Display, Positioning, and the Flow of a PageLocked
  2. 17. CSS Flexbox for Modern Web LayoutsLocked
  3. 18. CSS Grid for Two-Dimensional LayoutsLocked
  4. 19. Responsive Design, Media Queries, and Mobile-First DevelopmentLocked
  5. 20. Building a Responsive Landing Page from ScratchLocked
  6. Weekly project. Build a responsive landing page with a navigation bar, hero section, feature cards, and footer.Locked

Week 5 — Intermediate CSS and Website Design

Improve visual quality, maintainability, and interface consistency.

  1. 21. CSS Variables and Reusable Design TokensLocked
  2. 22. Pseudo-Classes, Pseudo-Elements, and Advanced SelectorsLocked
  3. 23. CSS Transitions, Transforms, and AnimationsLocked
  4. 24. Reusable Components, UI Consistency, and Common Design PatternsLocked
  5. 25. Building and Deploying a Complete Business WebsiteLocked
  6. Weekly project. Build a complete business website and deploy it.Locked

Week 6 — JavaScript Fundamentals

Understand programming logic and write your first interactive programs.

  1. 26. Introduction to JavaScript and Running Your First ScriptLocked
  2. 27. Variables, Data Types, and OperatorsLocked
  3. 28. Conditional Statements and Boolean LogicLocked
  4. 29. Loops, Iteration, and Repetitive TasksLocked
  5. 30. Building a Grade Calculator and Number Guessing GameLocked
  6. Weekly project. Build a grade calculator and number guessing game.Locked

Week 7 — JavaScript Functions and Data Structures

Organize code and work with collections of data.

  1. 31. Functions, Parameters, Return Values, and ScopeLocked
  2. 32. Arrays and Essential Array MethodsLocked
  3. 33. Objects, Properties, and Nested DataLocked
  4. 34. Modern JavaScript: Arrow Functions, Destructuring, and Template LiteralsLocked
  5. 35. Building an Expense Tracker with JavaScriptLocked
  6. Weekly project. Build an expense tracker that organizes and summarizes expenses.Locked

Week 8 — DOM Manipulation and Browser Storage

Make web pages interactive using JavaScript and browser APIs.

  1. 36. Understanding the DOM and Selecting HTML ElementsLocked
  2. 37. Changing Content, Styles, and Elements with JavaScriptLocked
  3. 38. Events, Event Listeners, and Interactive InterfacesLocked
  4. 39. Form Handling, Validation, and Local StorageLocked
  5. 40. Building a Task Manager with Persistent TasksLocked
  6. Weekly project. Build a task manager that saves tasks between browser sessions.Locked

Week 9 — HTTP, JSON, and Working with APIs

Retrieve external data and display it in a web application.

  1. 41. HTTP Requests, Responses, Status Codes, and JSONLocked
  2. 42. Understanding REST APIs, Endpoints, and Request MethodsLocked
  3. 43. Fetching Data with the JavaScript Fetch APILocked
  4. 44. Async/Await, Promises, and Handling API ErrorsLocked
  5. 45. Building a Data Explorer with a Public APILocked
  6. Weekly project. Build an application that retrieves and displays records from a public API.Locked

Week 10 — API-Driven Applications

Combine API data, search, filtering, and user interactions.

  1. 46. GET, POST, PUT, PATCH, and DELETE in PracticeLocked
  2. 47. Searching, Filtering, Sorting, and Paginating API DataLocked
  3. 48. Loading States, Empty Results, and Error HandlingLocked
  4. 49. Working with Mock APIs and Simulated CRUD OperationsLocked
  5. 50. Building a Product Explorer with Search and FiltersLocked
  6. Weekly project. Build a product explorer using public or mock API data.Locked

Week 11 — Bootstrap CSS Framework

Build responsive interfaces faster with a component-based CSS framework.

  1. 51. Introduction to Bootstrap and Setting Up a ProjectLocked
  2. 52. Bootstrap Containers, Breakpoints, and the Grid SystemLocked
  3. 53. Bootstrap Typography, Utilities, Spacing, and ColorsLocked
  4. 54. Bootstrap Components: Navigation, Cards, Buttons, and FormsLocked
  5. 55. Building an Admin Dashboard with BootstrapLocked
  6. Weekly project. Build a responsive administrative dashboard using Bootstrap.Locked

Week 12 — Tailwind CSS

Build modern interfaces using utility-first CSS.

  1. 56. Introduction to Tailwind CSS and Project SetupLocked
  2. 57. Utility Classes, Spacing, Typography, and ColorsLocked
  3. 58. Responsive Design, Breakpoints, and State VariantsLocked
  4. 59. Reusable UI Patterns and Consistent Styling with TailwindLocked
  5. 60. Rebuilding the Admin Dashboard with Tailwind CSSLocked
  6. Weekly project. Rebuild the dashboard using Tailwind CSS and compare the two approaches.Locked

Week 13 — React Fundamentals

Start building component-based applications with React.

  1. 61. What React Is, Why It Matters, and Setting Up a ProjectLocked
  2. 62. JSX, Components, and Rendering Your First InterfaceLocked
  3. 63. Props, Reusable Components, and Component CompositionLocked
  4. 64. Rendering Lists, Using Keys, and Conditional RenderingLocked
  5. 65. Building a Landing Page and Student Directory with ReactLocked
  6. Weekly project. Build a React landing page and student directory.Locked

Week 14 — React State and Forms

Build interfaces that respond to user input and changing data.

  1. 66. Understanding React State and the useState HookLocked
  2. 67. Handling Events and Updating the InterfaceLocked
  3. 68. Controlled Inputs and React FormsLocked
  4. 69. Updating Arrays and Objects in StateLocked
  5. 70. Building a Student Management Application with ReactLocked
  6. Weekly project. Build a student manager with forms, search, and record management.Locked

Week 15 — React Hooks, APIs, and Routing

Connect React applications to external data and create multiple views.

  1. 71. Understanding useEffect and Component Side EffectsLocked
  2. 72. Fetching API Data in React ApplicationsLocked
  3. 73. Managing Loading, Error, and Empty States in ReactLocked
  4. 74. Client-Side Routing and Navigation in ReactLocked
  5. 75. Building a Multi-View API Explorer with ReactLocked
  6. Weekly project. Build a multi-view API explorer with navigation and dynamic data.Locked

Week 16 — React Architecture and Testing

Improve code organization, reliability, and maintainability.

  1. 76. Organizing React Projects, Components, and FilesLocked
  2. 77. Reusable Hooks, Shared Logic, and Component DesignLocked
  3. 78. Understanding Frontend Testing and Writing Your First TestsLocked
  4. 79. Testing Components, User Interactions, and Common WorkflowsLocked
  5. 80. Building an E-Commerce Frontend with ReactLocked
  6. Weekly project. Build an e-commerce frontend with product listings, reusable components, and tested interactions.Locked

Week 17 — Next.js and the App Router

Understand Next.js and build multi-page React applications.

  1. 81. React vs. Next.js and Setting Up a Next.js ProjectLocked
  2. 82. The App Router, Pages, Layouts, and Nested RoutesLocked
  3. 83. Dynamic Routes, Link Components, and NavigationLocked
  4. 84. Server Components, Client Components, and the use Client DirectiveLocked
  5. 85. Loading UI, Not Found Pages, and Page MetadataLocked
  6. Weekly project. Build a multi-page website using Next.js.Locked

Week 18 — Next.js Data Fetching and Application Features

Build data-driven Next.js applications with real-world interface patterns.

  1. 86. Fetching Data in Server and Client ComponentsLocked
  2. 87. Building Data Lists and Dynamic Detail PagesLocked
  3. 88. Handling Loading, Error, Empty, and Not Found StatesLocked
  4. 89. Search Parameters, Filtering, and Client-Side InteractionsLocked
  5. 90. Forms, State, Caching, and Safe Configuration in Next.jsLocked
  6. Weekly project. Build a content or commerce application using public or mock API data.Locked

Week 19 — Production Readiness and Deployment

Prepare a frontend application for real users.

  1. 91. Organizing Components, Utilities, and Data ModulesLocked
  2. 92. Responsive Design, Accessibility, and Functional TestingLocked
  3. 93. Metadata, Image Optimization, and Performance AuditsLocked
  4. 94. Environment Variables, Configuration, and Frontend Security AwarenessLocked
  5. 95. Production Builds, Vercel Deployment, and DebuggingLocked
  6. Weekly project. Deploy a production-ready Next.js application with a README and setup instructions.Locked

Week 20 — Final Capstone Project

Demonstrate your skills by designing, building, testing, and deploying a complete frontend application.

  1. 96. Defining Your Capstone Project Scope and Selecting a ProblemLocked
  2. 97. Planning Routes, Components, Data, and the User InterfaceLocked
  3. 98. Testing Your Application and Fixing DefectsLocked
  4. 99. Writing Your README and Preparing Your GitHub RepositoryLocked
  5. 100. Presenting and Demonstrating Your Final ProjectLocked

Expected outcomes

  • You can explain how a page reaches the browser and how frontend and backend fit together
  • You can build and style responsive, accessible websites
  • You can create interactive applications with JavaScript, React, and Next.js
  • You can ship a documented, production-ready project

← All courses