Learn HTML and CSS together for Beginners

Name: Learn HTML and CSS together for Beginners
Rating: 4.4 (953 reviews)

Learn how to make websites using HTML and CSS This course is for beginners step by step to create a completed website

Created byLaurence Svekis

Last updated 11/2024

English

What you'll learn

Create HTML Code
Create CSS code
Apply HTML and CSS together to build websites

Course content

4 sections • 47 lectures • 3h 56m total length

HTML and CSS introduction6:15
Learn how HTML and CSS work together to build styled web pages, covering tags, attributes, doctype, head and body structure, images, lists, tables, forms, semantic tags, and a JavaScript introduction.
Introduction to HTML58:05
Explore HTML5 fundamentals, including HTML, CSS, and JavaScript roles in rendering, styling, and interactivity, plus validators, the WWW, offline data storage, and audio, video, interactive graphics.
Getting started with HTML11:30
Master the basics of HTML by building a page with HTML, head, title, and body tags, understanding opening, closing, and self-closing tags.
Create an HTML template10:21
Identify tags and elements, learn opening and closing tags, and define elements. Explore attributes like title and style, and see how doctype, HTML5, language, and meta charset shape the template.
How to write HTML code5:59
Apply the do's and don'ts of HTML code using a standard template, with proper nesting and closing tags. Maintain clean code with lowercase tags, consistent whitespace, and matching quotes.
Headings and HTML structure12:18
Explore how to structure an HTML document with doctype, html, head, and body, set meta information, and use heading tags to organize content for accessible, SEO-friendly web pages.
Paragraphs and simple Markup3:28
Explore HTML tags to structure your web page, including opening and closing paragraph tags, line breaks with br, horizontal rules with hr, and pre-formatted text with pre.
Markup in HTML11:25
Explore HTML markup by viewing how tags like small, mark, delete, sub, sup, blockquote, bold, italics, underline, strike, code, and pre-formatted text render in output, highlighting semantics.
Source Code0:23
Content Grouping div and span3:21
Explore how to group content with divs and spans to prepare for css selections, showing how divs create blocks and spans stay inline, enabling targeted styling of text.

What is CSS and how it works within HTML4:44
Discover how CSS colors, backgrounds, and borders style HTML elements, compare inline attributes with stylesheet approaches, and link external stylesheets or internal style blocks to apply consistent design across pages.
Classes and ids within elements5:48
Learn to use IDs and classes to style HTML elements, using # for IDs and . for classes to target elements or groups, with IDs kept unique per page.
Colors in CSS HEX RGB named colors7:46
Learn to apply named colors, hex values, and rgb(a) in CSS to color elements, using red, green, blue components and alpha transparency for see-through effects.
Source Code0:29
CSS background properties8:51
Explore how the CSS background property serves as a shorthand for color, image, repeat, position, and attachment, and apply single or multiple background images to elements like the body.
Source Code0:06
CSS height and Width5:30
learn how to apply height and width to HTML elements using fixed, dynamic, and responsive values, including max-width, min-width, max-height, and min-height, with px and percent units.
CSS borders7:52
Learn how to apply css borders by setting border width, style, and color. Use the shorthand border property and observe how borders appear around elements.
Source Code CSS borders0:05
CSS margin6:00
Learn how CSS margins control spacing around elements by using top, right, bottom, and left values, applying the shorthand forms, auto centering, and interactions with borders in the browser.
Source Code0:06
CSS Box Model Padding3:32
Explore the CSS box model by seeing how padding sits inside the border and expands total size alongside borders and margins, with examples of top, right, bottom, and left padding.

Hyperlinks in HTML7:45
Learn to create hyperlinks using the anchor tag and href, link between pages with relative and absolute paths, control navigation with target attributes, and bookmark sections with IDs in HTML.
Source Code0:25
CSS link Styling5:12
Apply CSS to hyperlinks and other elements by styling link states: unvisited, visited, hover, and active, with colors and backgrounds, and extend these styles to divs.
Source Code0:35
Adding images to HTML5:37
Learn how to add images in HTML using the image tag with src and alt attributes, try placeholder images, and control size with width, height, and CSS.
Ordered lists and Unordered lists HTML8:05
Explore unordered and ordered lists, list items, nesting, and CSS styling, including transforming into a navigation bar and using description lists.
Source Code lists0:04
Exercise turn list into navbar10:38
Convert a word list into a navigation bar by cleaning up HTML, removing bullet points, converting to an ordered list, and applying CSS styling with hover effects.
Source Code0:42
HTML Tables Styling8:05
Learn how to create and style HTML tables using the table, tr, td, and th tags, apply borders, widths, and colors, and use colspan and rowspan to structure data.
Table source code0:12
HTML forms types10:45
Explore HTML forms by building a simple form with text inputs, a submit button, and various input types. Learn to name fields and set the form action for data submission.
HTML form building3:37
Build HTML forms by using select menus with named options and values, and textareas with rows and columns. Learn to set default values and group elements with divs for styling.
Form options0:19
Creating a contact form12:18
This lesson shows how to structure a contact form with fieldset and labels, assign names and ids, include department dropdown and email field, and style inputs and submit with css.
Source Code Contact Form0:22
HTML5 Structure building5:47
Learn HTML5 structure and semantic elements to build accessible pages, using header, nav, section, article, aside, and footer, and integrate iframe and JavaScript into a two-page layout.
HTML iframes6:27
Explore how to embed external page content with HTML iframes, name frames, assign IDs, and manage a navigation frame that updates across pages.
Style HTML5 semanic elements into a website11:17
Transform a basic page into a multi-column layout with a head, a foot, and a navigation bar, using CSS to override defaults, floats, and responsive images.
Update Tweak website8:21
Learn to fix and tune a website by adjusting navigation layout, applying media queries, and resizing elements for small screens, including frames, images, and overflow handling.
Website Source Code2:12
Google Fonts2:21
Learn how to update web fonts quickly using Google Fonts, including linking or importing fonts, applying font-family across pages, and refreshing to see changes.
Resources and Links0:01

Requirements

Basic computer skills
Internet Access

Description

Learn about HTML and CSS and how they are used to create websites.

HTML and CSS are 2 of the 3 main building blocks of websites on the internet today. The internet uses HTML & CSS as a set of instructions that can be then be used by browsers to render out the intended webpage. HTML is fun to write and easy to get started with. If you have ever considered creating your own website and wondered where to get started this is the course for you.

HTML (HyperText Markup Language) is the most basic building block of the Web. It describes and defines the content of a webpage. Explore HTML, how it works and how browsers use it to build webpages. HTML is created by web developers who use it to build websites. Learn how to create your own HTML boilerplate templates, that can be used and reused to make webpages. Explore HTML markup, creating headings, paragraphs, and more. See the different tags and what they do. Learn about grouping elements and how that is the first step to prepare to add styling.

CSS (Cascading Style Sheets) are a stylesheet language used to describe the presentation of a document written in HTML. Its how your page looks, how your HTML elements can be designed to have colors, positions on the page, different dimensions, and more. Explore how to add color and background options to HTML elements. Find out about the Box model and how it is used to add more display properties to HTML elements.

Putting HTML and CSS together to create webpages. We cover how to build a website from scratch.

Hyperlinks how they work
Adding images to webpages
creating a navbar using CSS
HTML tables
HTML forms and creating a contact form for your website
HTML structure and building your page
Tweaking and updating your website
Adding Google Fonts

Experienced instructor - creating websites since 1999!

Learn to create a website from scratch, I'm here to help and ready to answer any questions you may have. Take the first step and learn to create your own website today.

Who this course is for:

Anyone who wants to learn about HTML and CSS
Anyone who wants to create websites
Students who are new to web development

Learn HTML and CSS together for Beginners

What you'll learn

Explore related topics

Course content

Learn the basics of HTML and CSS10 lectures • 1hr 13min

HTML and CSS together12 lectures • 51min

HTML CSS Essentials23 lectures • 1hr 51min

Bonus Section2 lectures • 1min

Requirements

Description

Who this course is for: