HTML5 CSS3 JQUERY Single Page Website Project from Scratch

Name: HTML5 CSS3 JQUERY Single Page Website Project from Scratch
Rating: 4.4 (45 reviews)

Build your own website from scratch Step by Step easy to follow guide web development. Learn to use HTML5 CSS3 JQUERY

Created byLaurence Svekis

Last updated 11/2024

English

What you'll learn

create a scrolling single page website
add jquery to create amazing effects to web pages
use HTML5 and CSS3 to create a website
build a website from scratch
create nav bar menus
create responsive websites
grow your portfolio
use JQUERY within webpages

Course content

4 sections • 34 lectures • 2h 11m total length

HTML5 CSS3 Course introduction2:06
HTML5 Single Page Website Resources2:56
Course Resources1:00
HTML5 webpage setup code6:48
HTML5 add HTML coding5:29
HTML add dummy text and images2:37
Update the page with dummy text and placeholder images to create a finished look for client presentations, using a blind text generator to fill content, and preview sections on scroll.
HTML5 website anchor links4:32
Learn to create a single-page site using HTML5 anchor links and IDs to navigate sections, style with CSS3, and prep a fixed navigation for seamless scrolling.
HTML5 setup CSS3:09
HTML5 sticky navigation menu2:58
HTML5 add navigation menu7:27
Learn to build a CSS-based navigation menu from scratch by styling list items into circles, adding hover effects, and using jQuery to manage active states.
JavaScript setup HTML5 website3:05
JQUERY selector click menu setup3:10
Listen for clicks on hash anchors with a jQuery selector, prevent default, and log the event; then update classes and animate scrolling to the target section.
JQUERY add remove classes3:38
How to Use Jquery to Scroll your webpage4:09
Jquery Scrolling options4:56
Learn to implement jQuery scrolling options by selecting sections with a selector, using offset values to locate sections, and animate window scrolling with swing and custom scroller.
Jquery scroll position conditions and calculations10:00
Completed Navigation One page website scroll automation3:46
Source Code for One Page Website Basic Template4:00

CSS Create Sticky Top Nav Menu5:47
Create a sticky top navigation that stays fixed while scrolling a one-page site, converting the menu to a horizontal header with a black background and white text.
Position add spacing for navigation menu5:19
Navigation Styling Nav Bar6:03
Build and style a navigation bar for a single-page site by applying main nav and nav classes to ul and list items, adjusting display, padding, background colors, and active state.
Style nav menu CSS2:40
Style the nav menu with CSS by removing underlines, centering text, bolding fonts, and updating background and text colors, while refining active and hover states for a true menu look.
Add images and Colors to sections6:30
HTML5 website creation7:23
CSS3 styling of content2:19
Create a contact Form for the website6:53
Make it Responsive10:20
Apply CSS media queries to make the website responsive, set images to 100 percent width, and adjust navigation by hiding or switching to icon menus on smaller screens.
Completed Project 1 page responsive website template4:37
Source code HTML5 index file4:00
Source code CSS3 style file4:00
Source code JavaScript Jquery Script file1:00

Requirements

desire to learn
basic HTML and CSS
computer and internet access

Description

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 in 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. Build an amazing website in less than an hour.

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.

Lots of bonus content, an instructor who helps and responds to questions quickly.

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

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

Who this course is for:

anyone who wants to learn to create websites
learn HTML5 and CSS3
learn JQUERY
learn about the DOM and how to use the data

HTML5 CSS3 JQUERY Single Page Website Project from Scratch

What you'll learn

Explore related topics

Course content

How to Build a one page scrolling website from scratch18 lectures • 1hr 16min

One Page Website Bonus Code Customization and Tweaks13 lectures • 1hr 7min

Updates for website code1 lecture • 1min

Bonus Section2 lectures • 1min

Requirements

Description

Who this course is for: