Browse Library

Front-end Web developer MasterClass HTML CSS JavaScript

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

Instructed by Laurence Svekis

$15 $60 75% off

2 days left at this price! Buy Now

30-Day Money Back Guarantee

Full Access to this course
Play & Pause Videos
High Quality Recorded Lectures 24
Learn Online from Mobile/PC/Tablet
Download Course for Offline Viewing
Inlcudes Real Projects
Lifetime access & free updates
Certificate of Completion
Free Instructor Support

$19 /month

Buy Subscription See all plans
  • Access to all marketplace courses
  • Access to all new courses
  • Play & Pause Videos
  • High Quality Recorded Lectures
  • Learn Online from Mobile/PC/Tablet
  • Download Course for Offline Viewing
  • Inlcudes Real Projects
  • Certificate of Completion
  • Free Instructor Support

$199 /month

Buy Subscription See all plans
  • Access to all marketplace courses
  • Access to all new courses
  • Play & Pause Videos
  • High Quality Recorded Lectures
  • Learn Online from Mobile/PC/Tablet
  • Download Course for Offline Viewing
  • Inlcudes Real Projects
  • Certificate of Completion
  • Free Instructor Support
  • 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
  • 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

  • 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

  • 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

  • Lecture 1 :
  • Resources
  • 1. How do i access the course after purchase?

    Once you purchase a course (Single course or Subscription), you will be able to access the courses instantly online by logging into your account. Use the user name & password that you created while signing up. Once logged in, you can go to the "My Courses" section to access your course.
  • 2. 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.
  • 3. 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.
  • 4. 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.
  • 5. 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.
  • 6. Do i get any certification after completing the course?

    Yes. Once you succesfully complete any course on Learnfly marketplace, you get a certiifcate of course completion emailed to you within 24 hours with your name & the Learnfly badge. You can definately brag about it & share it on your social media or with friends as one of your achievement. Click here to view the sample certificate Click Here
  • 7. For how long can i access my course after the purchase?

    If you buy a single course, that course is accessible to you for a lifetime. If you go for a premium subcription, you can access all the courses on Learnfly marketplace till your subscription is Active.
  • 8. Whats the difference between Single Course Purchase & Go Premium option?

    With Single Course Purchase, you only get an access of one single course. Whereas, with premium monhtly or annual subscription, you can access all the existing or new courses on learnfly marketplace. You can decide what option suits you the best and accordingly you can make your purchase.
  • 9. Is there any free trial?

    Currently, we don't have any free trial but it may be available in near future.
  • 10. What is the refund policy?

    We would hate you to leave us. However, if you are not satisfied, you can ask for a full refund within 30 days & we will be happy to assist you further.

Laurence Svekis,

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 othe