Please ensure Javascript is enabled for purposes of website accessibility

About This Course

Who this course is for:

  • Web developers
  • Backend developers
  • People who want to learn how to code

What you’ll learn: 

  • Learn to create a contact form
  • Learn how to apply JQUERY with HTML and CSS
  • Access and interact with the Document Object Model DOM
  • Add Bootstrap for styling
  • Use Awesome fonts for cool fonts


  • No prior knowledge is required to take this course

Create your own Single Page Scrolling Website from Scratch. Single page websites are extremely popular, in this course we show you how to build one from scratch. All the source files and resource links are included, so you too can build your own website by the end of this course.

With over 14 years experience in web development, I’ll introduce you to website design, explained step by step.

Starting with a setup of a basic HTML5 web template. Next, we add some content and create a shell to build the one page website on.

Next, we bring the content to life using CSS3. Styling turns the HTML code into a styled webpage.

JavaScript and jQuery are then used to create amazing scrolling effects. Using data from the DOM, and properly calculating the section sizes we show you how to create page scrolling with jQuery.

All the source files and resources are included so you can get started quickly.

Bonus content – update the code to create a fully functional website. Expand your portfolio and practice website design. We turn the previous menu into a fully functional sticky header menu. Add images and colors to create the sample website, ready for the real world. Make it responsive and have it re-size and expand to fit any screen.

Learn to Create your own website in easy to follow steps. Let’s get started creating amazing websites!

Course Curriculum

Section 1 - How To Build A One Page Scrolling Website From Scratch
HTML5 CSS3 Course Introduction 00:00:00
HTML5 Single Page Website Resources 00:00:00
Course Resources 00:00:00
HTML5 Webpage Setup Code 00:00:00
HTML5 Add HTML Coding 00:00:00
HTML Add Dummy Text And Images 00:00:00
HTML5 Website Anchor Links 00:00:00
HTML5 Setup CSS 00:00:00
HTML5 Sticky Navigation Menu 00:00:00
HTML5 Add Navigation Menu 00:00:00
JavaScript Setup HTML5 Website 00:00:00
JQUERY Selector Click Menu Setup 00:00:00
JQUERY Add Remove Classes 00:00:00
How To Use jQuery To Scroll Your Webpage 00:00:00
jQuery Scrolling Options 00:00:00
jQuery Scroll Position Conditions And Calculations 00:00:00
Completed Navigation One Page Website Scroll Automation 00:00:00
Source Code For One Page Website Basic Template 00:00:00
Section 2 - One Page Website Bonus Code Customization And Tweaks
CSS Create Sticky Top Nav Menu 00:00:00
Position Add Spacing For Navigation Menu 00:00:00
Navigation Styling Nav Bar 00:00:00
Style Nav Menu CSS 00:00:00
Add Images And Colors To Sections 00:00:00
HTML5 Website Creation 00:00:00
CSS3 Styling Of Content 00:00:00
Create A Contact Form For The Website 00:00:00
Make It Responsive 00:00:00
Completed Project 1 Page Responsive Website Template 00:00:00
Source Code HTML5 Index File 00:00:00
Source Code CSS3 Style File 00:00:00
Source Code JavaScript jQuery Script File 00:00:00
Section 3 - Updates For Website Code
Source Code Updated Using Window Scroll 00:00:00
Template Design © VibeThemes. All rights reserved.

Setup Menus in Admin Panel