Please ensure Javascript is enabled for purposes of website accessibility

About This Course

Who is the target audience?

  • Web designers and web developers
  • Entrepreneurs
  • Anyone who wants to explore modern website building
  • Anyone who wants to build a portfolio of websites

What am I going to get from this course?

  • Create several different types of websites
  • Understand what HTML CSS and JavaScript can do
  • Be able to make webpages dynamic
  • Create modern websites from scratch
  • Make interactive web content
  • Design and develop a website

Do you want to become a professional web developer and are looking for a starting place? Then this course is for you!  

Build your portfolio become a professional web developer. 

This is everything you need to know to jump into web development and build a successful base for building your own websites from scratch.   

One of the best ways to learn is seeing examples of code being implemented and used in REAL web projects.  Applied learning, in this course we not only cover the core foundation languages of front-end web development we show you how to use them with plenty of examples.  See how they work in different projects.

One of the biggest hurdles when getting involved with web development is finding a starting point.  Explore how everything HTML CSS JavaScript can work together to build Dynamic and interactive modern websites that are ready for the real world.  If you are unfamiliar with any of the languages used to create the websites within the course, we have you covered.   Learn HTML, CSS, JavaScript, and jQuery pick and choose what you want to learn, it’s all available for you anytime.  Need help in one area more than others, not to worry you will have access to multiple examples of the source code being put to use in a real project.

Everything you need in one place! One Massive course!  Watch it all or watch what you need to learn at the time. 

Benefits of this course:

  • Supercharge your portfolio – Build 10 different real world websites from scratch.  Having a portfolio to demonstrate websites you can build as well as being able to use them as templates that can be easily customised to suit any web design need.  Not every website is created the same way, so in the course we provide you 10 examples of modern websites.  Single page websites, bootstrap websites, parallax websites, and more.  This sites are unique and custom built within the course.   
  • Prerequisites don’t worry we have you covered and ready to you to learn the skills you need – We’ve included full sections explaining HTML, CSS, JavaScript and jQuery that you can use a reference for more information about coding that is used to build websites.  No filler content, straight to the point, commonly used syntax for building modern websites.  
  • Useful bonus code snippets – The stuff you need to make your website come to life.  Learn how to build a web contact form, fully functional being able to send emails from your website. Mouse events and more to make your website dynamic and interactive.   Regular updates and more content updates.
  • Resources your need – Learn how to think like a web developer and web designer.   How to start creating websites, how to plan out your web design and more.   Explore top resources and links to use to improve what you can do making websites.  Source code from during the project, and source code of completed project is included.   This means with this course you get 10 custom templates to use within your projects.  
  • Professional web development  – Have access to the resources you need,  Create your portfolio as you learn web development.  At the end of the course you will be ready to make websites from scratch.   Parachute in and get started in the business. Learn from a experienced web developer see how it’s done!  We show you the types of websites that you can build quickly and are in demand.
  • No stone left unturned this course is full of high quality content ready for you to use as needed. Whatever your skill level we guarantee that you will find value within this course.   Have it all at the ready when you need it.   
  • Taught by a professional instructor with over 18 years of industry experience!   Step by step training that you won’t find anywhere else.  We guide you through learning how to create websites from scratch.  By the end of the course you will feel comfortable and be ready to start creating your own websites.  Jump in, you will be amazed at what YOU can do.  Making your dreams come to life online, with modern websites.
  • I’m here to help you learn about web design and web development, and ready to answer any questions you may have.   When you are ready, join now and start creating your own websites today.

Our Promise to You

By the end of this course, you will have learned how to build websites from scratch.

30 Day Money Back Guarantee. If you are unsatisfied for any reason, simply contact us and we’ll give you a full refund. No questions asked.

Get started today and learn more about building websites from scratch.

Course Curriculum

30h 55m

Section 1 - Learn How To Build Websites
Introduction To Course 00:00:00
How To Use This course 00:00:00
Course Resources 00:00:00
Course Resources Online 00:00:00
Getting A Website 00:00:00
What Is HTML CSS And JavaScript 00:00:00
Resource List 00:00:00
Section 2 - HTML Foundations For Building Websites
Introduction To learning HTML 00:00:00
Basics Of HTML 00:00:00
How To Create A Basic HTML Template 00:00:00
Basic HTML Template Source Code 00:00:00
Headings Paragraphs And Line Breaks Content Structuring 00:00:00
Adding Images Into HTML 00:00:00
Ordered Lists Unordered Lists 00:00:00
Hyperlinks Relative Paths Vs Absolute Paths 00:00:00
Divs And Spans, Tel And Mailto 00:00:00
HTML5 Semantic Elements 00:00:00
Transfer Build Content To Editor 00:00:00
Basic HTML Page Structure Sample 00:00:00
How To Create HTML Forms 00:00:00
HTML5 Input Types 00:00:00
Additional Form Elements 00:00:00
Form Resources 00:00:00
HTML Conclusion 00:00:00
Section 3 - CSS Foundations For Building Websites
Introduction To CSS 00:00:00
CSS Selecting Elements From HTML 00:00:00
Working With CSS Colors 00:00:00
CSS Background Options 00:00:00
Adding Fonts 00:00:00
Pseudo Classes And Design Patterns 00:00:00
Using The Float Property 00:00:00
Box Model Margins 00:00:00
Box Model Padding Shorthand 00:00:00
CSS To Create A Navbar 00:00:00
Display Properties CSS 00:00:00
CSS Overflow Handling 00:00:00
CSS Positioning Elements 00:00:00
CSS Tweaks And Updates 00:00:00
Media Queries Making Your Website Responsive 00:00:00
HTML CSS Summary 00:00:00
Source Code HTML And CSS 00:00:00
CSS Conclusion 00:00:00
Section 4 - Quick JavaScript For Building Websites
Introduction To JavaScript Overview 00:00:00
What Is JavaScript 00:00:00
How To Add JavaScript In Web Pages 00:00:00
Basics Of JavaScript Dev Tools – How To Comment And More 00:00:00
Introduction To Variables Within JavaScript 00:00:00
Understanding Variables 00:00:00
Variables Source Code 00:00:00
Arrays And Objects 00:00:00
Working With Arrays And Objects 00:00:00
Using And Updating Array Values 00:00:00
Array And Object Source Code 00:00:00
Introduction To Functions 00:00:00
Local Global Variables In Functions 00:00:00
Source Code Functions 00:00:00
Ternary Comparison 00:00:00
Conditional Statements 00:00:00
Switch Statements 00:00:00
Source Code Statements Conditions 00:00:00
Introduction To Looping 00:00:00
JavaScript For Loops 00:00:00
Source Code Loops 00:00:00
Introduction To The Document Object Model 00:00:00
Accessing Page Elements From JavaScript 00:00:00
Selecting Elements Via JavaScript 00:00:00
Source Code Selecting 00:00:00
Updating CSS With JavaScript 00:00:00
Source Code CSS 00:00:00
JavaScript Events 00:00:00
Event Listeners Selecting Elements 00:00:00
Source Code Listeners 00:00:00
addEventListener More Events Trigger Options 00:00:00
Source Code addEventListener 00:00:00
What Can You Do With JavaScript 00:00:00
JavaScript Overview Conclusion 00:00:00
Section 5 - Quick jQuery For Building Websites
Introduction To Using jQuery 00:00:00
What Is jQuery And Why Do We Use It 00:00:00
Getting Started With jQuery 00:00:00
jQuery Selectors 00:00:00
Each Value From Multiple Selector Elements 00:00:00
Updating Elements Via jQuery 00:00:00
Source Code Selectors HTML 00:00:00
CSS Selectors And jQuery Selectors 00:00:00
Introduction To Event Binding 00:00:00
Event Listeners jQuery Mouse Events 00:00:00
Event Source Code 00:00:00
Keyboard Event Triggers 00:00:00
Source Code Keyboard Events 00:00:00
Resize And Scroll Event Listeners On Window Object 00:00:00
Source Code Windows Object 00:00:00
Finding Input Values From Form jQuery 00:00:00
jQuery Traversing Elements 00:00:00
Select Elements From HTML Content 00:00:00
Source Code Selection 00:00:00
jQuery Working With CSS 00:00:00
Source Code CSS 00:00:00
Hide And Show Page Sections 00:00:00
jQuery Effects Fading 00:00:00
jQuery Effects Source Code 00:00:00
jQuery Sliding Effects 00:00:00
jQuery Animate 00:00:00
Source Code 00:00:00
jQuery AJAX Made Easy JSON And More 00:00:00
Loading Data Into HTML Via jQuery 00:00:00
jQuery AJAX Get getJSON 00:00:00
AJAX With jQuery 00:00:00
Source Code 00:00:00
jQuery Conclusion 00:00:00
Resources jQuery 00:00:00
Using Map And Each Within jQuery 00:00:00
Source Code Map And Each 00:00:00
Section 6 - What Is Bootstrap
Introduction To Using Bootstrap 00:00:00
What Is Bootstrap And How Do You Use It 00:00:00
Bootstrap Containers 00:00:00
Basic Bootstrap Template 00:00:00
Bootstrap Grid System 00:00:00
Grid System Source code 00:00:00
How To Practice And Learn The Bootstrap Grid 00:00:00
Bootstrap Containers Jumbotron 00:00:00
Bootstrap Typography 00:00:00
Amazing Bootstrap Table Styling Options 00:00:00
Bootstrap Table Source 00:00:00
Bootstrap Form Inputs 00:00:00
Button Options With Bootstrap 00:00:00
Button Source Code 00:00:00
Typography Options 00:00:00
Bootstrap Images And Alignments 00:00:00
Images Source Code 00:00:00
Bootstrap Alerts 00:00:00
Bootstrap Navbar 00:00:00
Responsive Navbar Bootstrap 00:00:00
NavBar Source Bootstrap 00:00:00
Carousel Image Slider With Bootstrap 00:00:00
Bootstrap Carousel Indicators 00:00:00
Carousel Source Code 00:00:00
Building A Modal Within Bootstrap 00:00:00
Creating A Modal Complete 00:00:00
Modal Source Code 00:00:00
Bootstrap Utility Classes 00:00:00
Source Code Bootstrap Utility Classes 00:00:00
Bootstrap Conclusion Resources 00:00:00
Bootstrap Resources 00:00:00
Conclusion To Bootstrap Section 00:00:00
Bootstrap 4 Beta Update 00:00:00
Section 7 - Create A Quick Simple Website Using HTML And CSS
Website 1 Introduction 00:00:00
HTML And WireFrame 00:00:00
Build HTML Structure 00:00:00
HTML Structure Source Code 00:00:00
Add Placeholder Content 00:00:00
Add Styling To HTML Structure 00:00:00
How To Turn Unorderd List Into A Navbar 00:00:00
Source Code Navbar 00:00:00
Media Screen Sizes: Make It Responsive 00:00:00
Responsive Columns 00:00:00
Clear Floating Move Around Sections 00:00:00
Google Fonts And Customizing 00:00:00
Source Code HTML 00:00:00
Course Code CSS 00:00:00
Website 1 Conclusion 00:00:00
Section 8 - Build A Single Page Responsive Website
Introduction Website 2 00:00:00
Create A Wireframe Of Website 00:00:00
Build HTML Page Structure In Prep For Styling 00:00:00
Build Navigation Menu And Page Content 00:00:00
Build HTML Tags Nesting Of Semantic Elements 00:00:00
Adding Styling To Your Webpage 00:00:00
Linking To Libraries Google Fonts And More 00:00:00
Sticky Headers Section Styling 00:00:00
Build A Navigation Bar With CSS 00:00:00
Add Background Images 00:00:00
Section Text rgba 00:00:00
CSS Media For Responsive Web Design 00:00:00
Update Menu To Be Responsive On Resize 00:00:00
Introduction To JavaScript And jQuery 00:00:00
Add Click Events: Create Interactions For Users 00:00:00
Use jQuery To Get Pixel Position Of HTML Elements 00:00:00
Scroll Webpage Dynamically 00:00:00
Hide Menu When Clicked On Small Screen 00:00:00
Final Fix Of Issues Completed Website 00:00:00
Source Code Single Page Website HTML 00:00:00
Source Code Single Page Website CSS 00:00:00
Conclusion website 2 00:00:00
Section 9 - Bootstrap Template From Scratch
Website 3 Bootstrap Introduction 00:00:00
Website Structure 00:00:00
Add Styling To Sections 00:00:00
Building A Navigation Menu 00:00:00
Navbar With Bootstrap Easy 00:00:00
Adding Buttons To Elements 00:00:00
Rows And Columns Images Made Responsive 00:00:00
Contact Form Using Bootstrap For Styling 00:00:00
Add Background Images 00:00:00
jQuery Scrolling Effect 00:00:00
Adding Modals 00:00:00
Summary 00:00:00
Website 3 Conclusion 00:00:00
Section 10 - Responsive Website Template
Website 4 Introduction: Responsive Navbars 00:00:00
Website Wireframe Plan 00:00:00
Build HTML Structure Layout 00:00:00
HTML Structure Source Code 00:00:00
Floating Elements 00:00:00
Update Header Elements 00:00:00
Build Nav Menu CSS 00:00:00
CSS Positioning And Nav Menu Source Code 00:00:00
Margins Padding Logo Area Update 00:00:00
Source Code 00:00:00
Source Code CSS 00:00:00
Update Styling Nav Menu Updates 00:00:00
Main Wrapper Update Set Selected Item In Menu 00:00:00
Use jQuery To Get URL Page Value 00:00:00
jQuery Dynamic Classes 00:00:00
Source Code 00:00:00
Add Web Fonts Google Fonts To Website 00:00:00
Select Page Styling 00:00:00
Images Products Resize 00:00:00
Section Summary 00:00:00
Source Code HTML 00:00:00
Source Code CSS 00:00:00
Source Code JS 00:00:00
Resources 00:00:00
Website 4 Conclusion 00:00:00
Section 11 - Two Column Responsive Website Template
Website 5 Columns Introduction 00:00:00
Website Planning Design Sketch 00:00:00
Building HTML Structure 00:00:00
HTML Adding Placeholder Content 00:00:00
Source Code HTML 00:00:00
Create Styling For Webpage 00:00:00
CSS Course 00:00:00
Header Positioning With CSS 00:00:00
Create A Navigation Menu Bar 00:00:00
Quick Fixes Image And Nav 00:00:00
Making A 2 Column Website 00:00:00
Quick Tweaks Of CSS 00:00:00
3 Column Fat Footer Styling 00:00:00
Source Code HTML And CSS 00:00:00
Making Your Website Fully Responsive 00:00:00
Updating Media Sizes 00:00:00
Create Additional Web Pages 00:00:00
HTML Index.html Page Source Code 00:00:00
CSS style.css Source Code 00:00:00
Website 5 Conclusion 00:00:00
Section 12 - Simple Bootstrap 3 Menu Website
Bootstrap 4 Changes From Bootstrap 3 00:00:00
Website 6 Introduction To Bootstrap Navbars 00:00:00
Website Planning 00:00:00
Building HTML Page Structure 00:00:00
Adding Bootstrap To A Website 00:00:00
Adding Placeholder Content 00:00:00
Source Code HTML 00:00:00
Adding Default Styling 00:00:00
Update Logo Slogan Section 00:00:00
Create A Navbar With Active Element 00:00:00
Index Page Welcome Message 00:00:00
Source Code 00:00:00
Create A Two Column Content Area 00:00:00
Create Footer Element 00:00:00
Make It Responsive 00:00:00
Setting Up Font Awesome 00:00:00
Update Navbar To Be Responsive 00:00:00
JavaScript To Hide And Show Elements 00:00:00
Source Code First NavBar 00:00:00
Create Another Responsive Navbar 00:00:00
Source Code Second NavBar 00:00:00
How To Add Bootstrap JavaScript Library 00:00:00
Add Bootstrap Menu NavBar 00:00:00
Bootstrap Menu Navbar 00:00:00
Source Code Bootstrap 00:00:00
Create Website Pages 00:00:00
Online Code Editor 00:00:00
Links And Resources 00:00:00
Website 6 Conclusion 00:00:00
Section 13 - Single Page Website With Parallax Website
Website 7 Parallax Backgrounds Introduction 00:00:00
Create Wireframe Of Website 00:00:00
HTML Structure Create Nav Menu 00:00:00
Creating HTML Sections 00:00:00
Basic HTML Source Code 00:00:00
Placeholder Content 00:00:00
Apply CSS To HTML 00:00:00
How To Create A Navbar From UL 00:00:00
Full Page Size Sections And Background Defaults 00:00:00
Add Background Images 00:00:00
Make Your Text Standout 00:00:00
Tweaking The Navbar For Responsive Effects 00:00:00
Responsive Updates And Fixes 00:00:00
Navbar For Small Screens 00:00:00
Adding Footer And Updating Sections 00:00:00
Source Code HTML And CSS 00:00:00
Adding jQuery Create Event Triggers 00:00:00
jQuery Binding Window Events 00:00:00
Adding Icon Library 00:00:00
Animate Scrolling With jQuery 00:00:00
Slidemenu Up jQuery 00:00:00
Add Parallax Effect 00:00:00
Create A Contact Form 00:00:00
Single Page Parallax Site Summary 00:00:00
Source Code HTML jQuery 00:00:00
Source Code CSS 00:00:00
Resources 00:00:00
Website 7 Conclusion 00:00:00
Section 14 - Single Page Carousel Control Website
Website 8 Introduction 00:00:00
Website Plan Wireframe 00:00:00
Web Design HTML Structure 00:00:00
Adding Placeholder Design Content 00:00:00
Setup Content Sections 100% 00:00:00
Position Navbar 00:00:00
Create Floating Navbar Indicators 00:00:00
HTML And CSS Course Code 00:00:00
Quick Introduction To jQuery 00:00:00
jQuery To Select Elements With Hash 00:00:00
Animate Scroll jQuery 00:00:00
jQuery Scroll Window And Mapping Of Section Info 00:00:00
Calculate Which Section: The Window Is Currently In 00:00:00
Change Calls To Active On Scroll 00:00:00
Source Code HTML jQuery 00:00:00
Source Code CSS 00:00:00
Website Tweak 00:00:00
Making It Responsive 00:00:00
Update Section Content 00:00:00
Pseudo Elements Setup Sections 00:00:00
Final Adjustments On Design 00:00:00
Source Code Conclusion 00:00:00
Source Code Project 00:00:00
Website 8 Conclusion 00:00:00
Section 15 - Multiple Page Website From Scratch With Active Class
Website 9 Introduction: Multiple Page, Multiple Column 00:00:00
Website Planning Wireframe Design 00:00:00
Create Parent Elements HTML Structure 00:00:00
Add Resources And Dummy Placeholder Content 00:00:00
Apply Styling To HTML Top Level Elements 00:00:00
Creating A Content Wrapper 00:00:00
Navbar Setup And Styling 00:00:00
Creating A Header 00:00:00
Source Code HTML And CSS 00:00:00
Setting Up Sections Sidebar And Footer 00:00:00
CSS Tweaks And Fixes 00:00:00
Add Media Queries Make It Responsive 00:00:00
Add Additional Media Queries 00:00:00
Source Code Media Queries 00:00:00
Setup Responsive Navbar 00:00:00
Setup Menu For Toggle Of Class 00:00:00
Source Code HTML And CSS 00:00:00
Add jQuery Event Trigger 00:00:00
jQuery Source Code 00:00:00
Setting Classes On The Fly 00:00:00
Page Tweaks And Options 00:00:00
Source Code With jQuery 00:00:00
Create Additional Pages For Website 00:00:00
Update Contact Form 00:00:00
Source Code 00:00:00
Website 9 Conclusion 00:00:00
Section 16 - Single Page Bottom Menu Website
Introduction Website 10 HTML CSS jQuery Together 00:00:00
Wireframe Planning Of Website 00:00:00
Web Design HTML Page Structure 00:00:00
Add Placeholder Content To Prepare For Styling 00:00:00
Setup CSS Defaults 00:00:00
Create A Sticky Footer Position It At The Bottom 00:00:00
Source Code 00:00:00
Navbar Coding Options For Styling 00:00:00
Navbar Options Code 00:00:00
Add Styling To Sections 00:00:00
Source Code Sections 00:00:00
Add Section Background Covers 00:00:00
Image Tweaks And Adjustments To CSS 00:00:00
Header Update Style 00:00:00
Contact Form Styling 00:00:00
HTML CSS Source Code 00:00:00
Add jQuery To Website 00:00:00
Animate Scrolling Of Webpage 00:00:00
Update Classes On Scroll 00:00:00
Source Code With jQuery 00:00:00
Google Fonts And Background Shadows 00:00:00
How To Add Social Icons 00:00:00
Resources To Update CSS And Customize 00:00:00
Final Updates 00:00:00
Source Code 00:00:00
Website 10 Conclusion 00:00:00
Section 17 - Making A Contact Form
Introduction To Making A Contact Form 00:00:00
Create HTML Bootstrap Structure 00:00:00
Create Form Structure 00:00:00
Add PHP Session Holder 00:00:00
Source Code Contact Form 00:00:00
PHP Get Post Data 00:00:00
Anti Spam Check Using PHP 00:00:00
PHP Send Email 00:00:00
Upload File And Send Email To Email Address 00:00:00
PHP Form Fixes 00:00:00
PHP Form Mail Source Code 00:00:00
jQuery Form Check Setup 00:00:00
jQuery Toggle Error Messages 00:00:00
Web Contact Form Live Test 00:00:00
Web Contact Form Tweaks And Adjustments 00:00:00
Complete Web Form Source Code 00:00:00
Section 18 - Code Snippets In Action Just Useful Code For Web Development
Code Snippets Introduction 00:00:00
Popup Images Using JavaScript 00:00:00
Source Code Popup Images 00:00:00
Mouse Event Listeners JavaScript 00:00:00
Source Code Mouse Event Listeners 00:00:00
Section 19 - Conclusion
Complete Websites Conclusion 00:00:00
Template Design © VibeThemes. All rights reserved.

Setup Menus in Admin Panel



Enter your Name and Email for a chance to win Lifetime Access to all courses!
Promotion ends today.



Enter your Name and Email for a chance to win Lifetime Access to all courses!
Promotion ends today.

Success! You are now entered to win lifetime access to all courses. Winners are selected at the beginning of each month. 

P.S. Look out for our exclusive sales only shown to students on our email list!