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

English [Auto],

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
Build a single page parallax website from scratch, using brackets with live preview, XAMPP local server, Chrome DevTools, placeholder images and text, and optional jQuery for animated scrolling.
Create Wireframe of Website6:08
learn to build a single page website from scratch with index.html and optional style.css, plan a responsive navigation, and implement parallax scrolling.
HTML structure create Navmenu5:28
Create a semantic single-page HTML structure with a header, main content area, and a navigation bar using an unordered list of internal sections like home, boat, services, portfolio, and contact.
Creating HTML sections5:08
Structure a single-page website using a wrapper div and multiple sections identified by id and class, linked from navigation, including home, about, services, portfolio, and contact.
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
Learn to build a navigation bar from an unordered list, remove default margins and dots, float items right, apply hover effects and styling to links, and enable anchor navigation.
Full page size sections and background defaults6:05
Build a single-page parallax site by adjusting navigation margins, setting section min-heights, hiding overflow, and applying background cover with center positioning for distinct sections.
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
Style a single-page parallax site with semi-transparent backgrounds for sections and articles. Make headers pop with white backgrounds, add padding and uppercase text, and ensure responsive layout for older browsers.
Tweaking the navbar for responsive effects8:02
Explore responsive navbar design by applying rounded corners and margins, centering the wrapper, and converting a fixed navigation into a collapsible menu using a 640px breakpoint and media queries.
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
Add jQuery to your website by linking the library, then use the document object model to trigger a click event with a slide toggle for the navigation menu.
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
Learn to add the font awesome icon library to a single page website, select a menu icon, import icons, and adjust margins for a responsive navigation with jQuery scroll effects.
Animate Scrolling with jQuery8:31
Animate scrolling on a single-page site with jQuery by handling nav link clicks, preventing default, reading href for target section, and scrolling to its top offset with a duration.
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
Implement a parallax effect by creating a fixed point class and updating it with jQuery on scroll, making sections move differently on small and large screens.
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
Review your single page parallax site to verify the menu and layout on screens. Use HTML, CSS, and jQuery to customize sections, apply parallax effects, and adjust images and overflow.
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: