Web Design HTML CSS Create Single Page Website from Scratch
3.8 (153 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
11,348 students enrolled

Web Design HTML CSS Create Single Page Website from Scratch

Step by Step guide to building a single page website from scratch Learn how to use HTML CSS JavaScript jQuery together
3.8 (153 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
11,348 students enrolled
Created by Laurence Svekis
Last updated 11/2019
English
English [Auto]
Current price: $129.99 Original price: $199.99 Discount: 35% off
7 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 2 hours on-demand video
  • 9 articles
  • 2 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • build a single page website from scratch
  • use HTML and CSS together
  • apply jQuery to create animation effects for scrolling
  • Create amazing looking websites
  • build a portfolio to include one page websites
Requirements
  • Basic HTML and CSS
  • Desire to learn web design
  • computer access
Description

One page scrolling websites are extremely popular and a great way to way to present information for anyone.  

Benefits of one page websites

  • Great for mobile
  • Encourage users to see more content
  • very visually appealing
  • no page refreshes
  • easy to setup
  • engages visitors in a unique way
  • provide information in a unique and easy to consume way

Learn how to build a website from scratch...

  • Everything you need is included
  • Source Files ready
  • Top resources
  • Best links
  • Top tips for better web design
  • Step by step process explained
  • Tools and resources needed for web design

Start by creating a wire frame of the website, and draw up how you want the finished website to look.    Build the structure of the page using HTML.  Full explanations of code as it is built.  Create the HTML menu, content area and basics of web design.    Using HTML5 semantic tags, to create your webpage.

Styling explained.  Make your website come to life adding styling to HTML structure.  Attach external libraries to add more to your CSS.   Learn how to turn your HTML header into a sticky header.  Add styling to transform your unordered list into a custom navigation bar.  Learn about adding backgrounds, setting opacity to sections and more.

Make your website responsive so that it will work on any device across multiple screen sizes.   Resize and scroll the page to sections within your web design.

Add interaction and dynamic effects to your website using jQuery.  Learn about adding event listeners, move the screen position and more.

Start exploring what you can do with your website design

By the end of the course you will have the skills and know how to create your own website from scratch.

I am here to help you learn how to create your own web projects 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 dynamic and interactive web projects today.

Who this course is for:
  • web developers
  • web designers
  • anyone who wants to learn how to build a website from scratch
  • web masters
  • anyone who wants to learn how to use HTML and CSS
Course content
Expand all 29 lectures 02:14:44
+ Build HTML website
5 lectures 28:57
Build HTML page structure in prep for Styling
08:21
Build Navigation Menu and Page Content
09:54
Source Code for project
00:35
Build HTML tags Nesting of Semantic Elements
08:48
HTML source Code
01:19
+ Add Styling to website
10 lectures 56:36
Adding Styling to your webpage
09:55
Linking to Libraries Google Fonts and more
07:20
Sticky Headers Section Styling
08:36
Source Code HTML and CSS
01:31
Build a navigation bar with CSS
06:36
Add background images
07:30
Section text rgba
02:37
CSS Source Code
00:29
CSS media for responsive web design
06:22
Update menu to be Responsive on resize
05:40
+ Add Event listeners to website jQuery
9 lectures 36:53
Introduction to JavaScript and jQuery
06:52
Add Click events create interactions for users
05:07
use jQuery to get pixel position of HTML elements
06:56
Scroll webpage dynamically
03:45
Hide menu when clicked on small screen
05:11
Source Code
01:29
Final Fix of issues completed website
05:20
Source Code Single Page interactive Website HTML full
01:31
Source Code Single Page website CSS Full
00:41