Website Development Build single Page Website Parallax site

Name: Website Development Build single Page Website Parallax site
Rating: 4.4 (62 reviews)

Step by step guide to building a modern single page website from scratch

Created byLaurence Svekis

Last updated 11/2024

English

What you'll learn

create a website design
code HTML and CSS to create a functional website
add interactive jquery coding
create background image effects within webpages

Course content

3 sections • 30 lectures • 2h 20m total length

Parallax Single Page Site Introduction2:53
Design and build a fully responsive parallax single-page site from scratch, starting with sketching and wireframing, then coding HTML and CSS with jQuery-powered animations and a responsive menu.
Course Resources7:35
Create Wireframe of Website6:08
HTML structure create Navmenu5:28
Creating HTML sections5:08
Basic HTML source Code0:30
Placeholder content3:18
Update a basic HTML page by adding placeholder images, dummy text, and hyperlinks to prototype a parallax single-page site; fix spacing and structure before applying KSAZ styling.
Apply CSS to HTML4:26
Apply css to html by styling header with fixed positioning, height, width, border, and background. Refine navigation by hiding icon, aligning right, and styling list items in grayscale.
How to create a Navbar from UL8:08
Full page size sections and background defaults6:05
Add background images4:46
Create a parallax single-page site using different background images for each section and their urls, and ensure readability with contrasting colors and a max width of twelve hundred picks.
Make your text standout4:59
Tweaking the navbar for responsive effects8:02
Responsive Updates and Fixes8:23
Build a responsive parallax single-page website by setting sections to 100vh, importing Google Fonts, and styling hover links, images, and navigation for mobile displays.
Navbar for small screens3:25
Finalize the responsive navigation for small screens, ensure the nav icon appears, and style the menu to drop down full width with updated list items and jQuery enhancements.
Adding Footer and updating sections7:36
Update the portfolio section with inline list items, padding, and borders; add a footer, set responsive widths, and explore parallax effects for a polished single-page website.
Source Code HTML and CSS3:13

Adding jQuery create event triggers7:09
jQuery binding window events3:12
Bind window resize events with jQuery to toggle the navigation menu based on display, showing or hiding the menu and adapting the icon for responsiveness.
Adding icon library2:33
Animate Scrolling with jQuery8:31
Slidemenu up jQuery3:08
Toggle and close the responsive navigation with a slide toggle, validate the nav icon display property, and prepare for a jQuery-driven parallax effect that holds images in place during scrolling.
Add Parallax effect6:37
Create a Contact Form9:56
Create a responsive single-page site with a parallax image effect by building an HTML contact form featuring name, email, and message fields, labeled inputs, and a submit button.
Single Page Parallax site summary3:14
Source Code HTML jQuery2:41
Source Code CSS1:06
resources0:01

Requirements

basic HTML and CSS
basic knowledge of how JavaScript and/or jQuery works
desire to learn

Description

Do you want to build your web portfolio and expand your knowledge of web design?

Recently trending web design concept of parallax involves the background moving at a different rate to the foreground content. This creates an interesting effect as the visitor scroll down the website.

Within this course we introduce the concept of web design for modern websites. Creating an HTML frame, adding CSS styling and then applying dynamic interaction via jQuery.

This course is perfect for anyone who wants to learn about web design and how to create modern custom websites from scratch. Everything you need is included within this course. Learn how it all fits together within this unique project based learning course.

Build a real web project and add cool animation effects. This course is designed to teach you step by step what each line of code does, how and where to apply the code to get the desired results.

This course provides everything you need to get started with web design.
Project introduction and planning
Step by Step learning about web design
HTML page structuring designing your website template
Creating proper structure to prepare for CSS
Applying CSS to styling you website
Creating effects within your website
Adding jQuery for dynamic interactive content
Adding animations to scroll
using jQuery to check viewer scroll location to create active navbar
Tweaking and updating CSS

What you get

Step by step learning
Source Code is included
Top resources provided
Work alongside lessons
HD quality video
Professional experienced instructor

This course covers web design with an introduction to using jQuery for advanced web functionality.
By the end of the course you will have the skills and know how to make a website.
I am here to help you learn how to create your own websites and ready to answer any questions you may have.
Want to know more, what are you waiting for take the first step. Join now to start learning how you too can create websites today.

Who this course is for:

web designers
web developers
anyone who wants to learn how to make websites
anyone who wants to expand their portfolio designing modern websites

Website Development Build single Page Website Parallax site

What you'll learn

Explore related topics

Course content

Web Design Learn how to build a website from scratch17 lectures • 1hr 30min

Adding in animated effects with jQuery11 lectures • 48min

Bonus Section2 lectures • 2min

Requirements

Description

Who this course is for: