Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Responsive HTML and CSS website from Scratch in under 1 hour
Rating: 4.5 out of 5(99 ratings)
6,589 students

Responsive HTML and CSS website from Scratch in under 1 hour

Explore using HTML and CSS to create custom websites. Web Design and web development from scratch source code included
Created byLaurence Svekis
Last updated 11/2024
English

What you'll learn

  • create a website from scratch
  • apply CSS to design a website
  • setup HTML and add CSS styling

Explore related topics

Course content

2 sections • 26 lectures • 1h 42m total length

  • Introduction to HTML and CSS website from scratch2:48

    Learn to build a modern responsive website from scratch with HTML and CSS, starting from a wireframe to a navigation bar, splash page, hover effects, and a responsive layout.

  • Course Resources2:40
  • Designing website wireframe outline8:24

    Sketch a wireframe outline to map site sections, navigation, and containers, then plan a responsive html structure with an intro image, showcase, content blocks, and a footer.

  • Building Boilerplate and some HTML structure7:33

    Learn to quickly build a responsive HTML structure from boilerplate to a complete page, including navigation, sections for image slider and portfolio, and proper doctype, head, and body setup.

  • Adding Placeholder content and images5:49

    Add dummy text and placeholder images using placeholder services like placehold.it, specify image sizes (350x150, 1000x300), and build page structure with divs and h2 headings before applying CSS.

  • Source Code 1-5 lessons0:39
  • Add Stylesheet2:45

    learn to add styling to a web page by linking an external stylesheet and transforming a navigation list into a navigation bar.

  • Change Nav list to navbar9:01
  • Source Code Navbar0:11
  • Fix logo element1:59

    Reset the body margins and refine the logo with padding, color, and font size. Prepare a background image with text overlay and a button for a responsive site.

  • CSS welcome text create buttons7:43

    Create a responsive hero section with a centered background image using cover, adjust spacing to prevent nav overlap, and add welcoming headings with a hoverable button and a pointer cursor.

  • Update section styling4:30

    Apply styling to the section heading by setting font size, transforming text to uppercase, centering, and using relative positioning with auto margins for a neat, responsive layout.

  • Source Code0:17
  • z-index CSS how it works4:39

    Explore how z-index controls layering to keep the top navigation bar above content while using a reusable clear class to clear floats, and refine sections with padding, margins, and colors.

  • images hover floating elements CSS9:55
  • rounded corners elements floating4:50
  • Source Code0:35
  • Create CSS footer4:38

    Create a four-column footer with a dark background, 150px height, and padding, using white text and 21% wide columns for balanced spacing and responsive adjustments.

  • CSS make your website responsive8:08

    Make images scale with max-width: 100% and use media queries to adapt layouts for small screens. Adjust navigation, footer, and typography, then test breakpoints with browser device toolbar around 768px.

  • Website tweaks and updates9:18

    Learn to diagnose and fix responsive issues using Chrome DevTools, adjust element widths and padding, and refine media queries to ensure the site adapts on mobile and tablet.

  • Conclusion Webpage design3:20

    Finish a responsive one-page website by refining the navigation, adding IDs for home and portfolio, and enabling smooth scrolling with JavaScript. Explore the source code and customize it.

  • Website Source Code HTML1:01
  • Website Source Code CSS0:55
  • Course Resources0:04

Requirements

  • basic HTML and CSS
  • computer access
  • internet access

Description

Learn how HTML and CSS can be used to create a modern website from scratch.  

Source Code is included for students to work alongside the instruction provided within the course demonstrating how to build a custom mobile ready responsive website from scratch.  Learn HTML and how HTML is used to develop a webpage structure.  Create a wire-frame sketch of a website watch it get created from scratch using HTML and CSS.

This course covers the basics of HTML and CSS, some pre knowledge of using these languages is required before taking this course.   Its fast paced and jumps right into coding with examples and sample code.

This course covers the complete step by step process of building a website.  Apply CSS to transform the HTML code into a modern website.   

By the end of this course you will be able to create a website from scratch.  Step by step instuction using HTML and CSS to build your website.  Source Code is included.

  • Create a wire frame sketch of how you want you site to look
  • Get placeholder content to design your website
  • Add CSS to HTML un-ordered list and transform it into a navigation menu
  • add logos and images
  • create and style buttons
  • fixed menu at the top zindex
  • debug and tweak your website before launch

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

When you are ready lets start building a custom website from scratch.


Who this course is for:

  • beginners to web development
  • anyone who wants to learn to build a website from scratch
  • web designers
  • web developers
  • web masters

Report abuse