Web Design Make a Single Page Website Carousel controls | Laurence Svekis | Skillshare

Web Design Make a Single Page Website Carousel controls

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
21 Videos (2h 4m)
    • Web Design Make a Single Page Website Carousel controls

    • 1 Fixed navbar single page website introduction

    • 2 Resource Introduction

    • 3 Web Design Planning wireframe outline

    • 4 Web Design HTML structure

    • 5 Adding placeholder design content

    • 6 Setup Content Sections 100%

    • 7 Position Navbar

    • 8 Create floating navbar indicators

    • 10 Quick introduction to jQuery

    • 11 jQuery to select elements with hash

    • 12 Animate Scroll jQuery

    • 13 jQuery Scroll window and mapping of section info

    • 14 Calculate which section the window is currently in

    • 15 Change calls to active on scroll

    • 18 website tweaks

    • 19 Making it responsive

    • 20 Update section content

    • 21 Pseudo Elements setup sections

    • 22 Final adjustments on design

    • 23 Source Code Conclusion


About This Class

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.  





  • --
  • Beginner
  • Intermediate
  • Advanced
  • All Levels
  • Beg/Int
  • Int/Adv


Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

Laurence Svekis

Web technology Instructor

Providing Smart digital solutions online since 2001. I am considered a true web technology expert. Having professional experience in a wide range of digital areas. Everything from Search Marketing, Video Marketing, Content creation, User Experience, application architecture, and web programming.

Understanding how users flow through the web and learning what drives users to interact online has been the cornerstone of what I do. The more seamless the process the better the user experienc...

See full profile

Report class