Front-end Web developer MasterClass HTML CSS JavaScript

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

Best Seller

Instructed by Laurence Svekis

Want to learn more?
Go for Premium Subscription

Choose your plan:

  • Monthly
  • Annually
$ 29
Monthly Subscription
  • Access to all courses
    You will be able to access all the courses from any category on the platform.
  • Learning paths access
  • Access Assignments & Projects
  • Access on Mobile, PC and Tablet
  • Pause & Resume Courses Anytime
  • Offline viewing
  • Instructor Support
  • Course Completion Certificates
  • Cancel Anytime
Subscribe Now
$ 299
Annual Subscription
  • One year Unlimited Access
  • Access to all courses
    You will be able to access all the courses from any category on the platform.
  • Learning paths access
  • Access Assignments & Projects
  • Access on Mobile, PC and Tablet
  • Pause & Resume Courses Anytime
  • Offline viewing
  • Instructor Support
  • Course Completion Certificates
  • Cancel Anytime
Subscribe Now
Need Help?

Call +1 855 999 1795

( Toll Free )
  • 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
View More...

Section 1 : Introduction to web development course

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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