Web Development Make a Single Page Website Carousel controls

Name: Web Development Make a Single Page Website Carousel controls
Rating: 4.5 (13 reviews)

Create your own custom website HTML CSS and jQuery together step by step learning website creation

Created byLaurence Svekis

Last updated 11/2024

English

What you'll learn

create a website from scratch
write HTML and CSS code
add animated scrolling to website
use jquery to create dynamic effects

Course content

4 sections • 26 lectures • 2h 9m total length

Fixed navbar single page website introduction2:59
Learn to build a single-page website from scratch by starting with a wireframe and HTML structure, then styling with CSS and adding dynamic carousel functionality with jQuery.
Resource Introduction4:53
Explore the course resources, including the Brackets open-source editor, placeholder image and text generators, and Google fonts, and test live preview with Chrome dev tools on localhost.
Web Design Planning wireframe outline2:37
Build a single page carousel style website from scratch with vertical navigation on the right. Navigate full screen slides via scrolling or a floating bar, sketched quickly with wireframe tools.
Web Design HTML structure7:48
Transform a design plan into a two-container single page by building a navigation with anchor links to five sections, using semantic HTML elements and a wrapper for consistent layout.
Adding placeholder design content7:44
Learn to add placeholder content to reserve spacing while designing a single page website, using dummy text to simulate real content across sections like home, about me, portfolio, and services.
Setup Content Sections 100%7:59
Position Navbar5:35
Create a nav bar using a nav bar class, position it fixed at the top with percentage vertical and horizontal offsets, set height and opacity, and apply z-index for layering.
Create floating navbar indicators8:25
transform a standard navigation bar into floating, interactive indicators by removing default list styling and applying hover and active states with css and javascript.
HTML and CSS Course Code1:57

Quick introduction to jQuery3:09
Learn how to bring jQuery into a single-page website, compare it with JavaScript, and link or embed the library to interact with page elements and enable dynamic behavior.
jQuery to select elements with hash9:25
Animate Scroll jQuery6:53
Implement scrolling between sections with jQuery by preventing default actions and animating scrollTop for 1000 milliseconds. Capture the clicked section via section target and reflect the active section with indicators.
jQuery Scroll window and mapping of section info9:11
Leverage jquery to map each section and track the window scroll position with scrollTop, determine the active section from the top, and apply an active indicator on navigation anchors.
Calculate which section the window is currently in6:52
Map each page section, compute the current section by top offset, and reveal the active section id to drive indicators and scroll-based highlighting.
Change calls to active on scroll6:37
Set the active nav item as you scroll a single-page site, updating last and current sections, filtering anchors, and toggling active classes in the navigation bar.
Source Code HTML jQuery1:54
Source Code CSS0:22

website tweak3:24
Making it responsive8:47
Tune the navigation bar for responsiveness using percentage widths and breakpoints around 1200 px to center content. Adjust margins and padding to keep the menu accessible as the viewport changes.
Update section content4:10
Fine tune css to present content better by removing borders and updating section and article styling with background colors, padding, border radius, and responsive spacing, including future portfolio section updates.
Pseudo Elements setup sections6:04
Final adjustments on design6:40
Refine a single page site by updating the contact form and footer styling, unify input layouts, adjust borders and padding, and apply responsive tweaks for resizing.
Source Code Conclusion2:02
End source Code2:50

Requirements

Basic HTML and CSS
JavaScript and/or jQuery
Desire to learn
Computer Access

Description

Introduction to designing and building a Single Page responsive website from scratch.

Within the course students will be introduced to planning and designing websites. Learn how to write HTML and CSS code to create a website. Learn about text formatting, graphics, and making functional HTML structure.

Staring with a design concept, from an image carousel, create a modern website that has a floating indicator menu which can automatically animate the scroll process, scrolling the web visitor to the correct section on the page.

This course is perfect for those new to web design and also those who want to expand their portfolio by building unique different types of websites. Everything you need to know from concept to completed site is provided within this course. By the end of the course you too will be able to make a website just like the one within the course.

Understand where to start with web design
HTML CSS jQuery
Wire-frames placeholder text
Learn how to recognise different web page containers, and how to build your HTML to be CSS ready
Learn about writing HTML code
Incorporate web design principles
Enhance your website using text formatting, colors, and styling
format your HTML elements with CSS
Plan design and build a single page responsive website
Create dynamic effects and animate your scroll
Add jQuery to supercharge your website and make it interactive
Learn how HTML CSS and jQuery work together

Everything you need to create a website is included within this course. This course is focused around web design and will be mainly CSS based. HTML is used to structure the pages using common HTML tagging. jQuery is introduced for dynamic functionality. Concepts within jQuery include event handlers, variables, objects and conditional statements. Course will cover linking HTML and CSS to the jQuery methods discussed within the course.

included within this course

HD quality video
Source Code
Examples
Top resources

I'm here to help you learn about web design and ready to answer any questions you may have.

Upon successful completion of this course students will have a solid foundation in the core principles of web design and web development.

Who this course is for:

web designers
web developers
anyone who wants to build websites from scratch
anyone who wants to learn more about using HTML and CSS together

Web Development Make a Single Page Website Carousel controls

What you'll learn

Explore related topics

Course content

Introduction to web design9 lectures • 50min

Making it Dynamic JavaScript and jQuery8 lectures • 44min

Tweaking and updates for website7 lectures • 34min

Bonus Section2 lectures • 1min

Requirements

Description

Who this course is for: