Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

The Starter HTML/CSS Toolkit: Design, Make, & Host A Website

Name: The Starter HTML/CSS Toolkit: Design, Make, & Host A Website
Rating: 5.0 (3 reviews)

Speedy Web Dev Course: HTML, CSS, UX/UI Design, Hosting

Created byNeshanth Anand

Last updated 8/2024

English

English [Auto],

What you'll learn

Building websites with basic functionality but unlimited design.
Learn about HTML elements, CSS (flexbox too!), creating beautiful UI
Write classes to manage your formatting and classes.
Find different ways to host websites.
Build classes to facilitate your CSS styling.
Practice with website project topics.
Learn about design accessibility, create a beautiful for all users.

Coding Exercises

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

Course content

5 sections • 23 lectures • 4h 17m total length

Course Promo + Overview of the Course0:35
Learn HTML, CSS, UX, and UI fundamentals, with bite-sized 10-20 minute lectures, hands-on exercises, and hosting projects to build and host your website.
What and Why for Web Development (that's a lot of W's)1:28
Installing an IDE for your code and setting up your environment1:39
In this video you will learn to:

Set up an IDE
Install the "Live Server" extension

The HTML Boilerplate + Text level tags16:58
In this lecture you will learn:

Creating an HTML document
Seeing the site on a local and live server
Text level tags
Lecture 4 exercise
Lists/Bullet points13:40
In this lecture you will learn:

Auto Save settings for VS Code IDE
Reorganizing your HTML folder, and adding new text files
3 different types of lists
Changing the style (just a little CSS..) of lists
Lecture 5 exercise
Semantic Tags13:21
Discover how semantic HTML tags define content, including article, aside, details with summary, header, main, nav, and footer. Learn to comment HTML and use the non-semantic div for layout.
Lecture 6 exercise
Links (Anchor Tags)24:53
Learn to create and navigate with anchor tags using href, relative paths, and in-page scrolling. Explore mailto, tel, download, and nav bar concepts.
Lecture 7 exercise
Images and Iframes14:16
Learn to add images, videos, and iframes to web pages using img, video, and iframe tags, with alt text, figures, captions, and embedding content.
Lecture 8 exercise
Intro to HTML quiz

CSS Intro + CSS Syntax + CSS Classes11:29
Explore css basics as the artist of your website, learning how css styles html, including inline, internal, and external methods, and tag, id, and class selectors.
Coloring the HTML2:59
Learn to apply color in html/css by setting text color, background color on the body, and adjust header transparency with rgb values, including 0.32 near transparent, in Visual Studio Code.
Lecture 10 exercise
Font-Styling / Bordering the HTML10:15
Learn to style text with fonts and borders in CSS using internal styles, including font-family, font-weight, letter-spacing, font-size, border-radius, color, and top, bottom, left, and right borders.
The Button (Fancy Anchor Tag!)7:49
Turn an anchor tag into a stylish button with a CSS class, removing underline, applying a dark orange background, border, radius, Monster Rat font, bold weight, padding, and hover/active effects.
Creating The Button!
Basic Spacing of the HTML15:35
Learn basic HTML spacing by building colored boxes, using percent-based widths, text alignment, padding, borders, and margins (including negative margins) to position elements and understand the box model.
CSS Flexbox + External CSS11:32
Learn to build a flexbox with a container and multiple boxes, apply internal CSS, then switch to external CSS by linking a style.css, and explore flex-direction, justify-content, and align-items.
CSS Sample Design Walkthroughs Part #1 (Excercise + Lecture)26:12
Create an ocean-themed fragrance website via a css walkthrough, building a video-background site with an index.html, favicon, a responsive nav bar, custom fonts, and refined scroll styling.
CSS Sample Design Walkthroughs Part #2 (Excercise + Lecture)18:21
Explore building a content section with semantic article tags, custom fonts from Google Fonts, and responsive css like flexbox, borders, and background images to craft a polished webpage.
CSS quiz

Typography and Color Theory3:39
Explore typography and color theory to design smarter websites, mastering serif, sans serif, monospace, and script fonts with monochromatic, analogous, and complementary color schemes, and using Google Fonts.
Wireframing8:06
Master prototyping in HTML and CSS with wireframes in whimsical, practicing mobile first layout, hero images, navbars, avatars, and buttons before coding.
Project Topics1:24

Where to Host?10:36
Explore three hosting options—web hosting providers, servers, and a raspberry pi—and learn how to partially host a website for free, including domain name considerations.
Lecture 20 [UPDATE]: New Web Host Venue1:38
Learn how to switch hosting to Cloudflare, set up an application in Workers and Pages, upload index.html and assets, deploy the site, and troubleshoot missing media.
Contact HTML Form40:08
Build a basic HTML contact form with fieldsets and labels, using text, password, email inputs, dropdowns, checkboxes, radios, time and file inputs, styled with CSS and a mailto action.
Congrats!0:38
Celebrate completing the starter HTML/CSS toolkit by applying HTML basics, CSS styling, ux, and UI design to build and host your own beautiful, professional website.

Requirements

No clue why this section is here, you don't need experience for this course!

Description

Welcome to the world of web development! In this comprehensive course, you'll learn how to create websites from scratch and host them independently, without external guidance. Whether you're a beginner or have some prior experience, we'll take you on a journey to master web development. This course is cut down to the chase, with the stuff you need to create a professional-grade website! Here's a breakdown of what you'll cover:

Section 1: Introduction to Web Development

Overview of the course

Section 2: HTML Mastery

The HTML Boilerplate + Text level tags
Lists/Bullet points
Semantic Tags
Links (Anchor Tags)
Images and Iframes

Section 3: CSS Styling

CSS Intro + CSS Syntax + CSS Classes
Coloring the HTML
Font-Styling / Bordering the HTML
The Button (Fancy Anchor Tag!)
Basic Spacing of the HTML
CSS Flexbox
CSS Sample Design Walkthroughs Part #1
CSS Sample Design Walkthroughs Part #2

Section 4: UX/UI Design Fundamentals

Typography and Color Theory
Wireframing
Project Topics

Section 5: Web Hosting

Where To Host?
Creating a contact form in HTML

_______________________________________

By the end of this course, you'll have a strong command of HTML and CSS, be skilled in creating visually appealing user interfaces, and have the knowledge to host your websites. Also, you will gain a sense of what accessible design is and how to create websites that are optimal for all users! Join us on this exciting adventure into the world of web development and turn your ideas into digital reality!

Who this course is for:

For anyone interested in making their own websites or learning how to make beautiful UI.

The Starter HTML/CSS Toolkit: Design, Make, & Host A Website

What you'll learn

Explore related topics

Coding Exercises

Course content

Introduction3 lectures • 4min

Intro to HTML, just a simple page..5 lectures • 1hr 23min

CSS, now that looks much better!8 lectures • 1hr 44min

UX/UI, Designing Smartly3 lectures • 13min

Web Hosting4 lectures • 53min

Requirements

Description

Who this course is for: