Front-End Web Developer MasterClass: HTML, CSS, JavaScript

Front-end Web developer MasterClass HTML CSS JavaScript

Learn HTML CSS JavaScript all in one place packed with exercises and source code with examples

Created by : Rated :4.8 85226 views

Last Updated: 2024-12-20 05:12:34 English Course Type: Self Learning

Create interactive websites from scratch
Become familiar with coding and creating web pages and applications

Learn HTML CSS and JavaScript all in one course. This is the complete front end web developer starting course.

Whether you are looking to refresh your skills, expand your knowledge or looking to just get started with web development this course is for YOU!

A complete comprehensive course covering the core foundations of the web.

Source Code and examples are included to get you started quickly. Links to top resources and more all available in one massive course.

This course is taught by an instructor with over 18 years of real world industry experience. Ready to help you learn web development and answer any questions you may have.

This course is designed to help you learn and practice front-end coding for website development and design. Learn the core concepts of HTML, CSS and JavaScript.

Friendly support is always available in the Q&A section ready to help you learn.

Join now take the first step to exploring more about web development.

How the internet works :

Learn about DNS names and IP address
What makes a website and how does your browser know what to show you.
Coding languages HTML CSS JavaScript
Web development and what its all about
Terms like frontend and backend code
Hosting, Browsers, FTP +++
Developer tools and resources
Tips for web developers

HTML building the code for websites :

Understanding HTML foundations
Different Types of tags
Creating an HTML boilerplate template
HTML formatting tags
Tags Elements Attributes >
Resources to Learn more about HTM
HTML Headings
Content separation and Common tags
Commenting
Preformatted text
HTML entities ASCii characters
Markup Formatting HTML Markup
Hyperlinks connecting the pages
Using Images Images styling
Lists unordered and ordered
Nested Lists inside lists, List styles, List options, Description Lists
Tables row cells table head and body
HTML Forms with input and methods labels and more
HTML5 Input HTML5 Types color, date, email, month, number, range, search, tel, time, url, week
Input type images upload
HTML5 Semantic elements for building structure
How iFrames work and can be added to HTML

CSS for presentation

What is CSS
How to add styling to HTML elements
CSS defined what it does in Web development
Websites with CSS vs without CSS
Containers grouping content spans and divs
Selects getting the right element
Adding CSS to code
CSS color options palette fonts and backgrounds
Borders Margins Padding - Box model
Text and fonts CSS
tables and lists with CSS
Element Display and positioning
Building a navbar
Advanced CSS selectors
Pseudo Classes and Pseudo Elements
Media Queries

JavaScript Fundamentals

What is JavaScript
Writing JavaScript is code and what it does
Adding JavaScript to your web page
Developer console log
JavaScript data type
What variables are and how they are used
Operators for applying logic to code
Arrays and objects to hold data
Conditionals with logic
Loops for while and do
JavaScript functions at the heart of JavaScript
More Built in functions methods

JavaScript Document Object Model

What is the DOM and how it works
Updating and manipulating elements
Selecting multiple elements
Page event listeners
Click events

Desire to learn
Computer access

Anyone who wants to learn about web development
This course is perfect for complete beginners
This course is great for anyone who wants all the content in one place
Web Application developers
Web Designers

Section 1 : Introduction to web development course 4 Lectures 00:19:07
Lecture 1 :
Web development Introduction Preview
Lecture 2 :
Welcome to front end web development
Lecture 3 :
webdevintro
Lecture 4 :
Quick Resources
Section 2 : How the internet works 13 Lectures 01:00:32
Lecture 1 :
DNS names and IP addresses
Lecture 2 :
Code of the internet
Lecture 3 :
HTML and CSS how they work
Lecture 4 :
JavaScript Code
Lecture 5 :
Web development and how it works
Lecture 6 :
Dynamic Static Frontend Backend Client Side Server Side
Lecture 7 :
Editors creating frontend code
Lecture 8 :
Web development Browsers
Lecture 9 :
File Structure
Lecture 10 :
Hosting websites
Lecture 11 :
Get your website files to your server
Lecture 12 :
Web developer Resources and info
Lecture 13 :
Lesson Resource
Section 3 : Basics of HTML 15 Lectures 01:15:05
Lecture 1 :
What is HTML
Lecture 2 :
How to Write and Practice HTML
Lecture 3 :
How to create an HTML boilerplate
Lecture 4 :
Exercise create a boilerplate template
Lecture 5 :
Exercise creating a boilerplate HTML file
Lecture 6 :
Self Closing tags Meta tags and attributes
Lecture 7 :
Heading Tags
Lecture 8 :
Update template
Lecture 9 :
Common tags P BR HR separate text
Lecture 10 :
Clean Code Comments and more
Lecture 11 :
HTML preformatted text
Lecture 12 :
HTML Character Codes resources
Lecture 13 :
Resources
Lecture 14 :
14 EXERCISE Recreate as HTML
Lecture 15 :
Exercise Source
Section 4 : HTML more tags 38 Lectures 02:38:34
Lecture 1 :
HTML Markup Examples
Lecture 2 :
Source Code
Lecture 3 :
HTML hyperlinks
Lecture 4 :
Hyperlink Attributes
Lecture 5 :
How to create HTML bookmarks
Lecture 6 :
email link HTML mailto
Lecture 7 :
Source Code
Lecture 8 :
Exercise Create Navbar for website
Lecture 9 :
Source Code
Lecture 10 :
Adding Images to websites
Lecture 11 :
Exercise Create Thumbnail portfolio
Lecture 12 :
Source Code
Lecture 13 :
Ordered Lists and Unordered lists
Lecture 14 :
HTML Description List
Lecture 15 :
HTML Description List
Lecture 16 :
HTML Nested Lists
Lecture 17 :
Source Code
Lecture 18 :
Exercise List of services
Lecture 19 :
Source Code
Lecture 20 :
HTML tables
Lecture 21 :
HTML spanning multiple ells
Lecture 22 :
Source Code
Lecture 23 :
Quick Tip Styling
Lecture 24 :
Exercise HTML table
Lecture 25 :
25 Source Code
Lecture 26 :
HTML forms introduction
Lecture 27 :
Contact Form HTML
Lecture 28 :
New HTML5 input types
Lecture 29 :
Form elements HTML
Lecture 30 :
Form content
Lecture 31 :
31 Source Code
Lecture 32 :
Exercise Create Contact Form
Lecture 33 :
33 Source Code
Lecture 34 :
HTML5 semantic elements
Lecture 35 :
35 Source Code
Lecture 36 :
HTML iframe pages
Lecture 37 :
Exercise Create a Website
Lecture 38 :
38 Source Code
Section 5 : Introduction to CSS 43 Lectures 02:46:27
Lecture 1 :
Websites with and without CSS
Lecture 2 :
How to add CSS to HTML Pages
Lecture 3 :
Making selections CSS inspector
Lecture 4 :
Divs and spans content selection
Lecture 5 :
CSS selection id tag class
Lecture 6 :
Colors HEX RGB RGBA values
Lecture 7 :
CSS named color values
Lecture 8 :
CSS background images
Lecture 9 :
CSS background shorthand statement
Lecture 10 :
Code sample
Lecture 11 :
CSS borders shorthand
Lecture 12 :
CSS border Outline
Lecture 13 :
Code Sample Borders
Lecture 14 :
CSS Margins
Lecture 15 :
CSS padding
Lecture 16 :
CSS Box Model Dev Tools
Lecture 17 :
Box Model Example
Lecture 18 :
CSS height and Width
Lecture 19 :
Box Model Challenge
Lecture 20 :
Box Model Challenge Source
Lecture 21 :
Auto Margins Center your elements CSS
Lecture 22 :
CSS font property
Lecture 23 :
CSS Text property
Lecture 24 :
Chrome dev tools editors and options
Lecture 25 :
Adding Font families Google Fonts
Lecture 26 :
Line Height CSS
Lecture 27 :
CSS letter spacing
Lecture 28 :
Code examples Fonts text and letters
Lecture 29 :
CSS links
Lecture 30 :
CSS table styling
Lecture 31 :
Display and Hiding elements CSS
Lecture 32 :
Source Code
Lecture 33 :
Display Four Squares Challenge
Lecture 34 :
Display Four squares Solution
Lecture 35 :
CSS position Properties
Lecture 36 :
DevTools Design Tips
Lecture 37 :
Code Example position
Lecture 38 :
Coding Challenge Make a NavBar from an unordered list
Lecture 39 :
NavBar Start Code
Lecture 40 :
Code Challenge Solution
Lecture 41 :
NavBar Source Code
Lecture 42 :
Code Example
Lecture 43 :
CSS links and resources
Section 6 : Using CSS to build webpage layouts 13 Lectures 00:52:40
Lecture 1 :
Floats section introduction
Lecture 2 :
More about Floats
Lecture 3 :
Introduction to floats
Lecture 4 :
CSS Float images inline with text
Lecture 5 :
CSS float thumbnails
Lecture 6 :
Source Code Thumbnails
Lecture 7 :
HTML build basic page layout CSS
Lecture 8 :
Two column CSS site
Lecture 9 :
Create a 2 column page layout in minutes
Lecture 10 :
Two column site source code
Lecture 11 :
Create 3 column webpage
Lecture 12 :
Three column height background color fix
Lecture 13 :
Three Column Source Code
Section 7 : Advanced CSS 9 Lectures 00:46:01
Lecture 1 :
CSS Combinators
Lecture 2 :
Pseudo Classes
Lecture 3 :
Source Code
Lecture 4 :
CSS Pseudo Elements
Lecture 5 :
Source Code
Lecture 6 :
CSS Selectors by attributes
Lecture 7 :
Selector Example Code
Lecture 8 :
CSS Media Queries secret to responsive design
Lecture 9 :
Media Query Source Code
Section 8 : Do more with CSS 8 Lectures 00:30:36
Lecture 1 :
Multiple Background Images CSS
Lecture 2 :
Element box properties CSS
Lecture 3 :
More border options CSS3
Lecture 4 :
Source Code Example
Lecture 5 :
CSS3 background gradients CSS
Lecture 6 :
Code Sample
Lecture 7 :
CSS3 Animation
Lecture 8 :
Animation Example Code
Section 9 : Apply CSS create a website 7 Lectures 00:36:37
Lecture 1 :
HTML build a basic website structure with HTML
Lecture 2 :
Apply CSS build a navbar
Lecture 3 :
Build 2 Column main content area CSS
Lecture 4 :
Sidemenu links hover CSS
Lecture 5 :
CSS website tweaks
Lecture 6 :
Website Source Code
Lecture 7 :
CSS Resources
Section 10 : JavaScript do more on your web page 19 Lectures 01:12:15
Lecture 1 :
What is JavaScript
Lecture 2 :
How to add JavaScript to Webpages
Lecture 3 :
JavaScript Source Code
Lecture 4 :
Debugging and commenting JavaScript
Lecture 5 :
Source Code Example
Lecture 6 :
JavaScript Basic Data Types
Lecture 7 :
JavaScript Variables
Lecture 8 :
JavaScript Variable Rules
Lecture 9 :
Exercise 1 Output to console link to js file
Lecture 10 :
Exercise Source
Lecture 11 :
Data type Null vs Undefined JavaScript
Lecture 12 :
Declaring multiple variables at once JavaScript
Lecture 13 :
JavaScript Operators
Lecture 14 :
Increment and Decrement Values JavaScript
Lecture 15 :
Assignment Operators JavaScript
Lecture 16 :
Comparison Operators JavaScript
Lecture 17 :
JavaScript String Operators
Lecture 18 :
JavaScript Logical Operators
Lecture 19 :
Examples and Source Operators
Section 11 : JavaScript coding essentials 36 Lectures 02:18:07
Lecture 1 :
prompt and alert JavaScript
Lecture 2 :
Writing content to the HTML document object
Lecture 3 :
Example Code
Lecture 4 :
JavaScript Objects
Lecture 5 :
JavaScript Objects Dynamic Outputs
Lecture 6 :
JavaScript Objects within Objects
Lecture 7 :
JavaScript update values
Lecture 8 :
Source Code
Lecture 9 :
JavaScript Arrays
Lecture 10 :
Working with Array Methods JavaScript
Lecture 11 :
Array Methods extended
Lecture 12 :
Sorting and more with Arrays JavaScript
Lecture 13 :
More with Arrays JavaScript
Lecture 14 :
Objects and Arrays together
Lecture 15 :
Source Code and Examples Arrays and Objects
Lecture 16 :
JavaScript if condition statement
Lecture 17 :
JavaScript switch statement
Lecture 18 :
Source Code conditions
Lecture 19 :
JavaScript Do while loops
Lecture 20 :
For loops and more JavaScript
Lecture 21 :
Looping items in arrays and objects JavaScript
Lecture 22 :
Looping examples
Lecture 23 :
JavaScript introduction to functions
Lecture 24 :
Working with JavaScript Functions
Lecture 25 :
Global and Local Variables Functions
Lecture 26 :
Self-Executing function
Lecture 27 :
Break out of function JavaScript
Lecture 28 :
Example Code functions
Lecture 29 :
JavaScript String Methods
Lecture 30 :
String examples
Lecture 31 :
Strings and Arrays
Lecture 32 :
Numbers to strings back to numbers
Lecture 33 :
Source Code Example
Lecture 34 :
JavaScript Math Method
Lecture 35 :
JavaScript Date Method
Lecture 36 :
Source Code examples
Section 12 : JavaScript DOM 29 Lectures 01:52:29
Lecture 1 :
What is the DOM
Lecture 2 :
Source Code
Lecture 3 :
Select Node value using JavaScript
Lecture 4 :
JavaScript Objects and selection within the DOM
Lecture 5 :
Source Code
Lecture 6 :
Windows Object Model
Lecture 7 :
document write method
Lecture 8 :
Selecting Elements by ID
Lecture 9 :
Update Output Div content from input form
Lecture 10 :
Source Code
Lecture 11 :
Select Elements By Tag Name
Lecture 12 :
Selecting elements by Class
Lecture 13 :
Source Code
Lecture 14 :
Document query Selector
Lecture 15 :
Making Selections like CSS
Lecture 16 :
Source Code
Lecture 17 :
Traversing the DOM
Lecture 18 :
Source Code
Lecture 19 :
Add styling to Elements Dynamically
Lecture 20 :
Source Code
Lecture 21 :
Append and Remove Elements using JavaScript
Lecture 22 :
Source Code
Lecture 23 :
Add Event listeners to elements using JavaScript
Lecture 24 :
Event listeners click events
Lecture 25 :
Source Code
Lecture 26 :
Hover over elements make them change background color
Lecture 27 :
Source Code
Lecture 28 :
Image popup windows
Lecture 29 :
Source Code
Section 13 : Create a single page website from scratch HTML CSS JavaScript 12 Lectures 01:04:16
Lecture 1 :
Single Page Website Introduction
Lecture 2 :
Development Environment Setup
Lecture 3 :
webpage setup
Lecture 4 :
Setup Nav Structure and Elements
Lecture 5 :
Style NavBar CSS
Lecture 6 :
Add Placeholder Content to Sections
Lecture 7 :
Tweak Header NavBar and Sections
Lecture 8 :
Build Sections
Lecture 9 :
Build Page Footer
Lecture 10 :
Final Page Tweaks
Lecture 11 :
JavaScript ScrollSpy Effect
Lecture 12 :
Webpage Final Overview
Section 14 : Course Conclusion resources and helpful tips 1 Lectures
Lecture 1 :
Resources

How do i access the course after purchase?
It's simple. When you sign up, you'll immediately have unlimited viewing of thousands of expert courses, paths to guide your learning, tools to measure your skills and hands-on resources like exercise files. There’s no limit on what you can learn and you can cancel at any time.
Are these video based online self-learning courses?
Yes. All of the courses comes with online video based lectures created by certified instructors. Instructors have crafted these courses with a blend of high quality interactive videos, lectures, quizzes & real world projects to give you an indepth knowledge about the topic.
Can i play & pause the course as per my convenience?
Yes absolutely & thats one of the advantage of self-paced courses. You can anytime pause or resume the course & come back & forth from one lecture to another lecture, play the videos mulitple times & so on.
How do i contact the instructor for any doubts or questions?
Most of these courses have general questions & answers already covered within the course lectures. However, if you need any further help from the instructor, you can use the inbuilt Chat with Instructor option to send a message to an instructor & they will reply you within 24 hours. You can ask as many questions as you want.
Do i need a pc to access the course or can i do it on mobile & tablet as well?
Brilliant question? Isn't it? You can access the courses on any device like PC, Mobile, Tablet & even on a smart tv. For mobile & a tablet you can download the Learnfly android or an iOS app. If mobile app is not available in your country, you can access the course directly by visting our website, its fully mobile friendly.
Do i get any certificate for the courses?
Yes. Once you complete any course on our platform along with provided assessments by the instructor, you will be eligble to get certificate of course completion.
For how long can i access my course on the platform?
You require an active subscription to access courses on our platform. If your subscription is active, you can access any course on our platform with no restrictions.
Is there any free trial?
Currently, we do not offer any free trial.
Can i cancel anytime?
Yes, you can cancel your subscription at any time. Your subscription will auto-renew until you cancel, but why would you want to?

Laurence Svekis,

684774 Course Views

20 Courses

Instructor, 18+yrs Web Experience I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today Providing Web development courses and digital marketing strategy courses since 2002. Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses. "I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I created my first computer applications in 1990, and my first website in 1998. I enjoy sharing my knowledge with others and want to help you share in the wonderful opportunities that the internet provides." "Learning, understanding with a strong passion for education. The internet has provided us with new opportunities to expand and share knowledge." Want to learn more about becoming a web developer, do you want to experience the freedom that technology provides for us? Learn how tobring amazing things to life online. Technology connects us all in many ways. It opens up doors to those who embrace it and learn how to make those connections real. "My courses are designed to help you achieve your goals, learn and update skills" Background : An experienced web application developer, having worked on multiple enterprise level applications, hundreds of websites, business solutions and many unique and innovative web applications. Web application development areas of expertise include HTML, CSS, JavaScript, JQuery, Bootstrap, PHP and MySQL. Anything to do with web creation and digital experience. Passionate about everything to do with web application development, programming to online marketing with a strong focus on social media and SEO. "Understanding technology provides a means to better connect with users. It also opens so many doors. Knowledge is the key to success and I want to help you experience what technology has to offer. I'm passionate about web technologies, and look forward to sharing my knowledge and experience with you!"