We may earn an affiliate commission when you visit our partners.
Ivan Lourenço Gomes

Course Overview

In this comprehensive course, you will learn all the fundamental skills required to build websites from the ground up and become an experienced Front-End Web Developer. No previous knowledge is needed, as the course is designed to take you from an absolute beginner to a proficient web developer in a short time.

Course Content

This exclusive course covers the most important languages and technologies in Front-End Web Development:

HTML & CSS

Read more

Course Overview

In this comprehensive course, you will learn all the fundamental skills required to build websites from the ground up and become an experienced Front-End Web Developer. No previous knowledge is needed, as the course is designed to take you from an absolute beginner to a proficient web developer in a short time.

Course Content

This exclusive course covers the most important languages and technologies in Front-End Web Development:

HTML & CSS

  • HTML5 & CSS3

  • Semantic elements

  • Complete Guide to Colors and Fonts in CSS

  • Flexbox

  • Responsive design and CSS media queries

  • Working with Figma design prototypes

  • FTP, Domain, and Hosting

JavaScript

  • JavaScript from Zero to Advanced

  • Data Types in-depth

  • Functions, loops, and conditionals

  • JavaScript best practices

  • Image galleries and product filters in JavaScript

  • HTTP requests with the Fetch method

  • Working with external APIs

jQuery Essentials

  • jQuery Syntax

  • Handling forms

  • CSS Manipulation

  • Event Handling

  • Animations & Effects

TypeScript

  • TypeScript Basics

  • Data Types

  • Interfaces

  • Union Types, and more

React JS

  • React JS from Zero to Advanced

  • React Router

  • Redux / Redux Toolkit

  • Firebase (Authentication, Realtime Database & Hosting)

  • React JS + TypeScript

Vue JS

  • Vue JS from Zero to Advanced

  • Options API & Composition API

  • State Management with Pinia

  • Multi-page apps with Vue Router

  • Vue Dev Tools

  • Vue CLI and Vite

Git

  • Git from Zero to Advanced

  • Best practices in version control

  • Git on the command line, VS Code source control, and GUI applications

  • Complete Guide to Branches

  • GitHub and other remote servers

  • GitHub Desktop App

Website Performance

  • Website Performance Basics

  • Google Lighthouse and Page Speed Insights

  • Core Web Vitals

  • GT Metrix

  • Google Search Console

Hands-on Learning Method

Using our step-by-step, hands-on method with real-life projects, challenges, and exercises, you will learn to build beautiful web pages in an engaging and intuitive way.

Course Features (2nd Edition)

  • 360+ lessons

  • 45 hours of video content

  • 12 real-life projects

  • Complete course material for download

Additionally, the 1st edition of the course is also included, providing you with the legacy learning resources, including jQuery.

Launch Your Web Development Career

Whether you aim to start a career in the tech industry as a web developer, become a freelance web designer, or simply want to learn how to build websites, this course will fast-track your journey.

By mastering Regardless of the path you choose, this course provides high-quality content and a great learning experience to help you achieve your goals.

Join over 26,000 students worldwide in this highly-rated course. Enroll now and start building amazing websites and web applications.

Enroll now

What's inside

Syllabus

First Steps with HTML & CSS
Introducing The Course and Project #1
Downloading Visual Studio Code
HTML Tags
Read more
The Basic HTML5 Structure
The Tag for Images
Lists with
    and
The
HTML5 Semantic Elements
Styling with CSS
Installing the Live Server Extension
The Developer Tools
Margins and Paddings
Centralizing Elements with Auto Margin
CSS Selectors: Classes, IDs, Groups & Universal Selectors
CSS Fonts: Generic Font Families, Web Safe & Google Fonts
Text Properties: Font Size, Line Height, Letter Spacing, Text Align & More
Descendant Selectors & CSS Nesting
CSS Colors: Color Names, HEX Codes and RGB
Text Transform & Text Decoration
CSS Borders
HTML & CSS: Advanced
Project #2: Presentation
Structure of the Header Section
Setting Up the Page Container
Alignment with Flexbox (Part 1)
Alignment with Flexbox (Part 2)
Project: Adjustments to the Header Section
Project: The Hero Section - Background Image
Project: The Hero Content - Absolute Position
Project: The Hero Content Elements
Project: The Best Sellers Section
Project: The Products Area
Project: Styles for the Product Boxes
Project: The Product Info Box
Project: Using Pseudo Elements for the 'new' Tag
Project: The Discounted Price Element
Project: The Newsletter Section
Project: Styling the Form Fields
Project: The Footer Section (Part 1)
Project: The Footer Section (Part 2)
Project: The Hover States
Understanding the 3 Types of Links in HTML
Responsive Design with CSS Media Queries
CSS Media Queries
Project: Styles for Small Desktop (Part 1)
Project: Styles for Small Desktop (Part 2)
Project: Styles for Tablet
Project: The Mobile Menu Icon
Responsive Images with the Picture Element
Project: Styles for Mobile Devices
Project: Best Sellers & Footer for Mobile Devices
Publishing Your Website: Hosting & Domain
Hosting & Domain
Using a Free Hosting Service
Using FTP To Upload Files to the Server
Using a Paid Hosting Service
Setting Up a .com Domain with a Free Hosting Service
First Steps With Javascript
Introduction to the Javascript Course
Project #3 - Presentation
How to Open the Project
How to Run Javascript Code
The Script Tag
Javascript Syntax
Javascript: DOM Manipulation & Events
DOM: The Document Object Model
HTML Selectors
More Select Methods
CSS Manipulation
Events
Project: Open & Close the Navigation Menu
Javascript: Variables & Data Types
Variables
Variable Naming Rules and Best Practices
Introduction to Javascript Data Types
Data Types: Strings
Data Types: Numbers
Project: Greeting Your Users
Project: Replacing Dynamic Values in the Greeting Message
Data Types: Arrays
Data Types: Objects
Data Types: Booleans
Data Types: Null & Undefined
Javascript: Functions, Conditionals & Loops
Functions
Project: The Temperature Switch
Conditionals: If, Else, Else If
Date & Time
Project: The Local Time Section
SetTimeout and SetInterval
The padStart Method
Loops: For & For In
Project: The Image Gallery
The forEach Loop
Project: The Gallery Main Image
Project: The Gallery Thumbnails
Ternary Conditionals

Save this course

Save Complete Web Design: HTML, CSS, JavaScript, Vue, React, Git to your list so you can find it easily later:
Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Complete Web Design: HTML, CSS, JavaScript, Vue, React, Git with these activities:
Practice CSS Styling
Sharpen your CSS skills to effectively style web pages and create responsive layouts. This will make it easier to follow along with the course's styling examples and projects.
Show steps
  • Practice using CSS selectors to target HTML elements.
  • Experiment with different CSS properties for text, colors, and backgrounds.
  • Create a simple webpage layout using CSS.
Read 'Eloquent JavaScript'
Supplement your JavaScript learning with a comprehensive book that covers the language in depth. This will provide a solid foundation for understanding the course's JavaScript modules.
Show steps
  • Read the chapters on JavaScript fundamentals.
  • Work through the exercises at the end of each chapter.
  • Experiment with the code examples in a JavaScript environment.
Four other activities
Expand to see all activities and additional details
Show all seven activities
Build a Simple Portfolio Website
Apply your HTML, CSS, and JavaScript knowledge by building a personal portfolio website. This hands-on project will solidify your understanding of web development concepts.
Show steps
  • Plan the structure and content of your portfolio website.
  • Create the HTML markup for the website's sections.
  • Style the website using CSS to create a visually appealing design.
  • Add interactive elements using JavaScript.
Read 'Pro Git'
Master Git version control by reading a comprehensive guide. This will help you collaborate effectively on web development projects and manage your code efficiently.
View Melania on Amazon
Show steps
  • Read the chapters on Git fundamentals.
  • Practice using Git commands in a terminal.
  • Experiment with branching and merging workflows.
Write a Blog Post on React Hooks
Deepen your understanding of React Hooks by writing a blog post explaining how they work and how to use them effectively. This will help you solidify your knowledge and share it with others.
Show steps
  • Research React Hooks and their different types.
  • Write a clear and concise explanation of React Hooks.
  • Include code examples to illustrate how to use React Hooks.
  • Publish your blog post on a platform like Medium or Dev.to.
Contribute to a Vue.js Project
Gain practical experience with Vue.js by contributing to an open-source project. This will expose you to real-world development workflows and best practices.
Show steps
  • Find a Vue.js open-source project on GitHub.
  • Read the project's documentation and contribution guidelines.
  • Identify a bug or feature to work on.
  • Submit a pull request with your changes.

Career center

Learners who complete Complete Web Design: HTML, CSS, JavaScript, Vue, React, Git will develop knowledge and skills that may be useful to these careers:
Front-End Developer
As a Front End Developer, one designs and implements the user interface and user experience of websites and web applications. This course helps build a foundation in the core technologies required for this role, including HTML, CSS, and JavaScript. One also learns about modern frameworks such as React and Vue, essential for developing interactive and dynamic user interfaces. Furthermore, experience with Git helps manage and collaborate on code effectively within a team, following best practices in version control.
Web Designer
A Web Designer plans, creates, and codes internet sites and web pages, many of which combine text with sounds, pictures, graphics, and video clips. This course teaches one how to build websites from the ground up, covering HTML and CSS for structuring and styling web content. This course may be useful for understanding responsive design principles using CSS media queries, ensuring websites are visually appealing and functional across various devices. The course enhances one's ability to design and implement engaging user experiences.
UI Developer
A User Interface Developer specializes in creating the visual elements and interactive components that users interact with on a website or application. Through this course, one can learn how to implement user interfaces using HTML, CSS, and JavaScript. The course helps build a foundation in React and Vue, which are essential for developing complex and dynamic user interfaces. Furthermore, the course's content on responsive design ensures that the interfaces are accessible and user-friendly across different devices and screen sizes. This course provides insight into website performance optimization.
Web Application Developer
A Web Application Developer designs, codes, and modifies websites, from layout to function, according to a client's specifications. This course helps build a foundation in the core technologies required for web application development, including HTML, CSS, JavaScript, React, and Vue. One may find the course especially useful for understanding how to use these technologies to create interactive and dynamic web applications. Knowledge of Git helps manage code and collaborate with other developers in a team environment.
Software Engineer
Software Engineers apply the principles and techniques of computer science, engineering, and mathematical analysis to the design, development, testing, and evaluation of the software and systems that make computers or other devices work. This course may be useful by providing a foundation in front end web technologies such as HTML, CSS, and JavaScript. The course introduces one to popular frameworks like React and Vue, which are essential for building modern web applications. Additionally, learning Git helps manage code versioning and collaborate effectively in software development teams.
Full-Stack Developer
A Full Stack Developer works on both the front end and back end of software applications, meaning they can handle databases, servers, systems engineering, and client work. This course may be useful by providing a foundation in the front end technologies, including HTML, CSS, JavaScript, React, and Vue. One can use this course when building the user interface and interactive elements of web applications. Knowledge of Git is also valuable for managing code across the full stack development process.
UX Designer
A User Experience Designer focuses on the overall feel and usability of a website or application, ensuring it meets user needs and provides a seamless experience. This course may be useful for learning the fundamental technologies used to implement user interfaces, such as HTML, CSS, and JavaScript. Understanding responsive design and how to work with design prototypes using tools like Figma are also beneficial. This course provides the technical knowledge needed to inform design decisions and collaborate effectively with developers.
Webmaster
A Webmaster is responsible for maintaining and managing one or more websites. This course may be useful by helping with the basics of HTML, CSS, and JavaScript. It may also be helpful for understanding website performance and best practices, as well as how to deploy and manage websites using FTP, domains, and hosting services. This course provides insight into website operation and maintenance.
Digital Marketing Specialist
A Digital Marketing Specialist develops, implements, and manages marketing campaigns that promote a company and its products and/or services. This course may be useful for understanding the technical aspects of websites and how they impact search engine optimization and user experience. A Digital Marketing Specialist implements changes to a website to improve the customer experience and findability of the website. Basic knowledge of HTML and CSS can be beneficial when working with websites and landing pages.
Technical Writer
A Technical Writer creates documentation and instructional materials to explain complex technical topics clearly and concisely. This course may be useful by offering a practical understanding of the technologies being documented. Knowledge of HTML and CSS could be advantageous for creating online documentation and tutorials. The course's coverage of Git could also be valuable for managing documentation versions and collaborating with development teams.
eCommerce Manager
An eCommerce Manager is responsible for overseeing the online sales and marketing efforts of a company, including website management, digital advertising, and customer experience. This course may be useful by familiarizing one with the technologies used to build and maintain eCommerce websites. Understanding HTML, CSS, and JavaScript would be advantageous for managing website content, design, and functionality. Knowledge of website performance and optimization is also valuable for improving conversion rates and customer satisfaction.
IT Support Specialist
An Information Technology Support Specialist provides technical assistance and support to computer system users. This course may be useful by providing a fundamental understanding of how websites and web applications are built and deployed. Basic knowledge of HTML, CSS, and JavaScript may be beneficial when troubleshooting website-related issues and assisting users with technical difficulties. This course offers insight into the technologies that underpin modern web infrastructure.
Data Analyst
Data Analysts interpret data and turn it into information which can offer ways to improve a business, thus affecting business decisions. This course may be helpful in understanding how web technologies work. Data analysts can use scripts to analyze what users do on a website. Basic knowledge of Javascript may be beneficial when tracking user activity on a website. This course offers insight into the technologies that underpin data collection on the web.
Technical Sales
A Technical Sales professional uses in-depth knowledge of technology to explain the benefits of a product or service to potential customers and to secure the sale. This course may be useful for learning the underlying fundamentals of web facing technology. This helps a technical sales professional in communicating with a customer. Basic knowledge of Javascript may be beneficial when tracking user activity on a website. This course offers insight into the technologies that underpin the web.
Project Manager
Project Managers oversee specific projects, having direct responsibility for their outcome. This course may be useful by providing a level of familiarity with web technologies. Project managers can then communicate with their team using the proper terminology. Basic knowledge of Javascript may be useful in understanding the project. This course offers insight into technologies often found in projects.

Reading list

We've selected two books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Complete Web Design: HTML, CSS, JavaScript, Vue, React, Git.
Eloquent JavaScript comprehensive guide to the JavaScript language. It covers the fundamentals of JavaScript programming, including data types, control flow, functions, and objects. is particularly useful for students who want to deepen their understanding of JavaScript and learn how to write clean, maintainable code. It is commonly used as a textbook in introductory JavaScript courses.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Similar courses are unavailable at this time. Please try again later.
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2025 OpenCourser