Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
HTML CSS Easy steps to create a web template from scratch
Rating: 4.2 out of 5(280 ratings)
22,317 students

HTML CSS Easy steps to create a web template from scratch

Complete easy to follow guide to create your own web template using HTML and CSS Quick Crash course for beginners
Created byLaurence Svekis
Last updated 11/2024
English
English [Auto],

What you'll learn

  • create HTML and CSS web templates
  • write HTML code
  • write CSS code

Coding Exercises

This course includes our updated coding exercises so you can practice your skills as you learn.

See a demo
Image of coding exercise example

Course content

2 sections16 lectures1h 1m total length
  • How to make a website template course introduction2:37

    Learn to build a responsive web template from scratch with HTML and CSS, using Notepad or CodePen, and implement a mobile-first structure with navigation, header, content, and footer.

  • Resources used in the course2:52

    Learn to create a web template from scratch with HTML, CSS, and JavaScript using Pen.io for previews and Notepad or other editors, saving as index.html and testing in a browser.

  • How to make a website template HTML structure5:16

    Learn to create a basic website structure using Notepad, mirroring a typical two-column layout with header, navigation, and footer, and include doctype, html, head, body, and title tags.

  • Add a title to the page
  • attaching style sheets4:43

    Attach and link a separate stylesheet to html pages to create a reusable web template, using css via linked style sheets and inline styling on elements.

  • How to make a website basic HTML5 page struture6:08

    Learn to structure a basic HTML5 page using divs, header, nav, and footer inside a main container, and work with CodePen workflows for clean, responsive markup.

  • How to make a website add a navbar6:55

    Learn to build a website navbar with HTML ul, li, and links; style it with CSS as a navigation bar, and use classes and an active state.

  • HTML source code1:00
  • How to make a website setting ids3:07

    Explore basic web template structure by labeling the sidebar, main content, header, footer, and nav bar with id and class attributes, then apply CSS to differentiate layout and reuse sections.

  • How to make a website template Box model padding6:22

    Style a website navigation bar by turning list items into a horizontal menu of hyperlinks, applying padding and box model concepts, and using the padding shorthand for responsive spacing.

  • How to make a website template hover colors5:21

    Learn to style a website navigation menu with hover colors, remove text decorations, tune padding, and use ems for font size to create a clean, responsive navigation bar.

  • How to make a website template CSS floats7:02

    Create a two-column web template using CSS floats, with a left menu at 25% width and main content at 75%, plus padding, background, and a footer that clears the float.

  • How to make a website template center fixed width3:33

    Set a max width of 1200 pixels for the container, center it with auto margins, and add a header background color; large screens stay fixed, small screens stay fluid.

  • Practice CSS
  • How to make a website template mobile ready7:37

    learn to build a mobile-first website template with bootstrap's grid system, using media queries and a viewport tag to stack content, hide sidebars, and ensure responsive scaling.

  • CSS Source Code2:00
  • Course Resources1:00

Requirements

  • computer access
  • desire to learn

Description

Beginners course, this is perfect for anyone starting out and looking find a starting point to develop website.

Crash course to learn how to create HTML and CSS web templates. HTML5 web template design from scratch.

Learn to create your own web template from scratch in 1 hour!!!

This course is designed for anyone who wants to better understand how to create their own websites, within this course we show you how to make a basic web template from scratch. You can reuse and update this template to make unlimited websites.

Step by Step guide

  • Learn how to create HTML code
  • How to structure an HTML5 web template and common tags.
  • Add a nav bar for navigation explained
  • connect HTML and CSS ids, classes and tags
  • Box model explained
  • Floats and fixed width
  • Make it RESPONSIVE and mobile ready

This course is designed to be easy to follow along, its encouraged to practice the code being presented through out the course. Resources, source code, and everything you need to learn to make websites is provided. Start with simple HTML structure as we explain how it integrates with CSS.

Learn about web design and its core concepts and much more.....

We walk you through step by step with detailed explanations of code and more.

  • quick lessons get right to the point
  • fully covered topics with real world examples
  • source files downloadable to work along
  • challenges and lessons and code samples
  • code snippets
  • Links to top resources to save time
  • 30 day money back guarantee
  • new course material added regularly
  • trusted name in education since 2002
  • full HD easy to read source coding
  • quick response support to students
  • regular discussions

We teach you the latest techniques and tools to use in order to create amazing web content. Everything you need to know is included in this course. Learn at your own pace, lifetime access to this course.

Who this course is for:

  • anyone who wants to create websites
  • web developers
  • anyone who wants to learn HTML and CSS
  • learn HTML and CSS
  • web developer beginners