This course introduces the fundamentals of JavaScript, HTML, and CSS, showing you how they work together to build interactive and dynamic web pages. You’ll learn JavaScript syntax, core concepts, and how to manipulate the DOM to control page content, while HTML provides structure and CSS adds styling with layouts, colors, and fonts. Through hands-on practice, you’ll explore how to create user-friendly, visually appealing websites and understand how modern web pages achieve their interactivity. By the end, you’ll be ready to start coding and designing your own dynamic web pages.
Who should take this course?
This course is ideal for aspiring web developers, designers, and students who want to build a strong foundation in front-end development. It’s well-suited for beginners looking to start their web development journey as well as professionals aiming to sharpen their skills in HTML, CSS, JavaScript, and modern frameworks. Whether you want to create interactive websites, enhance your design-to-code workflow, or pursue a career as a front-end developer, this course provides the tools and knowledge to succeed.
What you will learn
How to create webpages with HTML and CSS
Create interactive web content with JavaScript
Bring your web pages to life with code
Learn the basics of JavaScript
Learn how to build modern responsive websites
Create interactive and dynamic web pages
Course Outline
Introduction to Modern Web Design and Development with HTML, CSS, and JavaScript
Promotional Video
Introduction to Getting Started with the Course and HTML Code
Getting Started with Web Design: Create Your Web Environment and Start Coding
How to Create Your First HTML Page HTML Coding Beginners
What is an HTML Element; How HTML Works with HTML Samples
Start with HTML Headings Common Tags HTML
Create HTML Self-Closing Tags and How They Work
Setting Element Attributes in HTML Code
How to Create Links HTML Hyperlinks HTML Links Anchor Tag
Adding Images to HTML Pages
HTML Lists Adding Content Lists with HTML Lists
What Are HTML Tables and How to Use Tables to Present Readable Content
HTML5 New Semantic Elements Meaning in the Element Tag Name
How to Create a Simple HTML Webpage
HTML Online Create a GitHub Page Create Your First Webpage on GitPages
Style Your Webpages with Cascading Style Sheets
Introduction to Getting Started with CSS
Adding Styling to Your HTML with CSS Code for Beginners
Styling Overview Get Styling with CSS
Colors Background and Font Color with CSS Update HTML Element Colors
What Is the CSS Box Model - Box Model Border Padding Margin
Text Options with CSS Code Setting Properties and Value to Transform Text
Adding Fonts and Font Styles to Your Webpage Elements with CSS
Link States Pseudo-Classes Setting Different States with CSS
How to Set Display Properties for Page Elements CSS Styling Code Examples Inline
CSS Position Static Relative Fixed Absolute Sticky Examples
CSS Float Setting Floats in CSS Setting Left Right and None Clearing Floats
More Useful CSS Properties such as z-index, outline, overflow, max-width, and More
CSS Combinators to Select Elements from Your HTML Page Options and Examples
Examples of Common CSS Pseudo Elements firstLetter firstLine After Adding Content
How to Create a Simple CSS Styled Website Responsive Website CSS Float
Creating a Responsive Website with CSS Flexbox Setup Three Column Design Site Example
How to Create a Fully Responsive Website with CSS Grid Modern Web Design CSS
Getting Started with JavaScript
Introduction to Coding JavaScript Making Pages Interactive
Getting Started with JavaScript Introduction to JavaScript Code with Examples
How to Set Up Your Live Server Local Web Design Setup for HTTP Local Pages
JavaScript Variables Let and Const and How to Assign Values to Declare Variables
What Are JavaScript Data Types and How to Set Datatypes Basic Data Types of Strings
JavaScript Objects and Arrays to Store Multiple Values in the Same Variable
Examples of Operators in JavaScript Code and How Operators Work
What JavaScript Functions Are and How to Pass Arguments into a Function and Return
JavaScript Conditions Applying Logic in Code in JavaScript Example
Adding Loops to Your JavaScript Code with Examples of Loop Methods
JavaScript and the DOM Document Object Model (DOM)
Introduction to JavaScript DOM with Coding Examples
Introduction to the DOM and the DOM Tree with JavaScript
Element Selection from Webpages with JavaScript Code Examples
JavaScript Element Manipulation DOM Select and Update Your Page Elements with Code
How to Set Styling Attributes with JavaScript Code - Update Webpage Elements
DOM and Form Elements Getting Values from Input Fields with JavaScript Code
DOM Element Event Listeners Create Interactive Webpages with JavaScript
How to Add Event Listeners to Your Webpage Elements with JavaScript Code
Setting Page Event Listener for DOM Content Loaded and keyup and keydown Events
How to Create Page Elements with JavaScript Code
Update Element Position and Move Page Elements with JavaScript Code
How to Add Animation to Your Webpage Elements Using JavaScript requestAnimation
How to Create a Modern Website from Scratch – Responsive Web Design
Promotional Video – Creating a Website from Scratch
Website from Scratch with Floats
Editor Setup and Code
HTML Structure Tags
Create an HTML Page
Use CSS to Design a Responsive NavBar for the Website
Add Google Fonts Select from Web Fonts CSS Web Design
How to Style Main Webpage Content Create Columns
How to Add Columns to Webpage Footer CSS Web Design Lesson
