Packt

Front-End Web Developer Bootcamp - HTML, CSS, JS, & React

Packt

Front-End Web Developer Bootcamp - HTML, CSS, JS, & React

Gain insight into a topic and learn the fundamentals.
Beginner level

Recommended experience

2 weeks to complete
at 10 hours a week
Flexible schedule
Learn at your own pace
Gain insight into a topic and learn the fundamentals.
Beginner level

Recommended experience

2 weeks to complete
at 10 hours a week
Flexible schedule
Learn at your own pace

What you'll learn

  • Learn how to structure and design webpages with HTML5 and CSS3

  • Gain hands-on experience in JavaScript and React for building interactive user interfaces

  • Master responsive design techniques using CSS3 media queries, Flexbox, and Grid

  • Understand how to work with APIs and build dynamic, data-driven web applications

Details to know

Shareable certificate

Add to your LinkedIn profile

Recently updated!

February 2026

Assessments

35 assignments

Taught in English

See how employees at top companies are mastering in-demand skills

 logos of Petrobras, TATA, Danone, Capgemini, P&G and L'Oreal

There are 35 modules in this course

In this module, we will introduce HTML5 and its role in modern web development. You will explore its powerful features, such as semantic tags, multimedia support, and form enhancements. Additionally, you will learn how to set up the right tools, like Visual Studio Code, to get started with HTML5 coding.

What's included

6 videos1 reading

In this module, we will explore the basic structure of an HTML5 file, including the DOCTYPE, head, and body sections. You will learn to organize HTML projects and file structures for better efficiency. By the end, you’ll be able to create well-structured HTML files.

What's included

4 videos1 assignment

In this module, we will dive into the essential building blocks of HTML5, such as heading tags, quotations, and citation tags. You'll also gain insight into using HTML attributes to customize elements and discover different ways to apply styling to HTML content.

What's included

5 videos1 assignment

In this module, we will cover several key HTML5 tags, from anchor and image tags to list, table, video, and audio tags. You’ll learn how to structure and present content, whether it's text, multimedia, or data, ensuring better accessibility and functionality.

What's included

8 videos1 assignment

In this module, we will guide you through the process of building an HTML5 form from scratch. You will explore various input types, attributes, and validation techniques to ensure accurate data submission from users.

What's included

5 videos1 assignment

In this module, we will explore the differences between block-level and inline elements in HTML. You’ll learn how these elements impact the page layout and how to use them to organize content efficiently.

What's included

2 videos1 assignment

In this concluding module, we will recap the core concepts of HTML5 covered throughout the section. You will gain a deeper understanding of its relevance in creating well-structured and dynamic web pages.

What's included

1 video1 assignment

In this module, we will introduce you to CSS3 and its crucial role in enhancing web design. You will gain an understanding of CSS3 syntax and how it can be used to style various aspects of your webpage, from layout to typography.

What's included

5 videos1 assignment

In this module, we will focus on fundamental CSS3 properties that control the look and spacing of elements. You’ll learn how to manage backgrounds, borders, and dimensions, giving you control over your webpage's layout and spacing.

What's included

5 videos1 assignment

In this module, we will explore CSS3's typography properties. You will learn how to control text alignment, apply decorations, and transform text to enhance its appearance and readability on your webpages.

What's included

6 videos1 assignment

In this module, we will dive into advanced CSS3 selectors and properties. You’ll learn how to manipulate the layout and visibility of elements, as well as apply pseudo-classes and pseudo-elements to create interactive, styled content.

What's included

9 videos1 assignment

In this module, we will cover extra CSS3 features that enhance the look of your website. You'll learn how to apply opacity, rounded corners, and shadow effects to create visually striking designs with modern flair.

What's included

3 videos1 assignment

In this module, we will teach you the principles of responsive design using CSS3. You’ll explore the powerful tools of CSS Grid and Flexbox, as well as learn how to use media queries for designing websites that adapt to different screen sizes and devices.

What's included

3 videos1 assignment

In this module, you will work on a mini project to apply the skills you've learned in HTML5 and CSS3. This hands-on experience will help reinforce your understanding of how to build and style dynamic webpages.

What's included

1 video1 assignment

In this module, we will introduce you to JavaScript, its history, and its vital role in web development. You’ll learn the basics of JavaScript syntax, its data types, and how to incorporate it into your HTML files for dynamic functionality.

What's included

4 videos1 assignment

In this module, you will dive into variables in JavaScript, understanding how to declare, initialize, and manipulate them. You will also explore how to use console.log for debugging and inspecting your code.

What's included

3 videos1 assignment

In this module, you will learn how to use different control structures in JavaScript, including conditional statements and loops. You’ll explore the syntax and application of if statements, ternary operators, and break/continue for controlling code flow.

What's included

7 videos1 assignment

In this module, we will explore the various operators available in JavaScript. You will learn to perform mathematical operations, assign values to variables, and compare them for conditional evaluation.

What's included

3 videos1 assignment

In this module, you will explore different types of popup boxes in JavaScript. You’ll learn how to create interactive alert, confirm, and prompt boxes that provide feedback and collect input from users.

What's included

6 videos1 assignment

In this module, we will explore how events work in JavaScript. You’ll learn how to attach event listeners to HTML elements and respond to user actions like clicks, keypresses, and mouse movements.

What's included

1 video1 assignment

In this module, you will learn about JavaScript loops, such as while, do-while, and for loops. You will also explore how to use nested loops to handle complex data structures effectively.

What's included

4 videos1 assignment

In this module, we will explore arrays in JavaScript. You will learn how to create and modify arrays, use powerful array methods for sorting, reversing, and filtering, and iterate over array elements with built-in functions like forEach() and map().

What's included

15 videos1 assignment

In this module, we will introduce objects in JavaScript. You will learn how to define objects, access their properties, and iterate through them using the for-in loop, all while exploring the power of object-oriented programming in JavaScript.

What's included

3 videos1 assignment

In this module, you will master the art of string manipulation in JavaScript. You'll explore basic and advanced string methods that allow you to search, replace, slice, and modify text data efficiently.

What's included

3 videos1 assignment

In this module, you will explore JavaScript's built-in number and math methods. You'll learn to validate, manipulate, and format numbers and dates, gaining the ability to perform complex calculations and handle date/time efficiently in your projects.

What's included

4 videos1 assignment

In this module, you will understand the DOM and its role in web development. You’ll learn how to access, manipulate, and modify HTML elements and their attributes dynamically with JavaScript.

What's included

14 videos1 assignment

In this concluding module, we will summarize the core JavaScript concepts explored throughout the course. You’ll reflect on how to effectively combine JavaScript with HTML and the DOM to create dynamic, interactive webpages.

What's included

1 video1 assignment

In this module, we will introduce React.JS and its component-based approach to building user interfaces. You’ll understand how React simplifies development and improves performance with the virtual DOM.

What's included

3 videos1 assignment

In this module, you will explore different ways to style React components. You’ll also learn how to use props to create dynamic, reusable components and template literals to handle dynamic content within JSX.

What's included

5 videos1 assignment

In this module, we will dive into the concept of component hierarchy in React. You’ll learn how to manage component states, render components conditionally, and utilize the useEffect hook to handle lifecycle events and side effects.

What's included

3 videos1 assignment

In this module, you will learn about React Router DOM and how it helps manage routes in React applications. You’ll explore techniques for navigating between pages, handling errors, and optimizing your app’s routing structure.

What's included

4 videos1 assignment

In this module, you will work on building a complete React project, applying everything you've learned. You'll focus on key features like state management, component communication, and dynamic rendering.

What's included

2 videos1 assignment

In this module, you will build a fully functional calculator app using React. You will implement basic arithmetic operations, handle user inputs, and introduce advanced features like decimal calculations and error handling.

What's included

2 videos1 assignment

In this module, you will explore how to build a RESTful API in React. You’ll learn to fetch data dynamically using Axios, handle pagination, and work with advanced API features like authentication and CRUD operations.

What's included

5 videos1 assignment

In this final module, we will recap the major concepts learned throughout the React section. You’ll be ready to apply React to real-world projects and have a solid foundation for exploring more advanced topics in React development.

What's included

1 video2 assignments

Instructor

Packt - Course Instructors
Packt
1,471 Courses 392,127 learners

Offered by

Packt

Why people choose Coursera for their career

Felipe M.

Learner since 2018
"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."

Jennifer J.

Learner since 2020
"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."

Larry W.

Learner since 2021
"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."

Chaitanya A.

"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."
Coursera Plus

Open new doors with Coursera Plus

Unlimited access to 10,000+ world-class courses, hands-on projects, and job-ready certificate programs - all included in your subscription

Advance your career with an online degree

Earn a degree from world-class universities - 100% online

Join over 3,400 global companies that choose Coursera for Business

Upskill your employees to excel in the digital economy

Frequently asked questions