HTML and CSS Basics: Begin to Develop and Design Websites

Name: HTML and CSS Basics: Begin to Develop and Design Websites
Rating: 4.5 (158 reviews)

Start mastering the essentials of HTML and CSS.

Created byJerome Morales

Last updated 3/2024

English

English [Auto],

What you'll learn

Learn the core concepts of HTML, including document structure, tags, elements, and attributes, to build the skeleton of web pages effectively.
Gain proficiency in CSS, exploring how to style text, layout content, and control page aesthetics with various css styles properties.
Discover how to construct interactive forms, essential for capturing user data.
Learn the CSS Box Model, an essential concept for web design that involves understanding the layout in terms of margins, borders, padding, contents etc.
Basics of Website Accessibility: Gain insights into creating accessible web content that follow the best practices of semantics.
Familiarize students with VS Code, a powerful and popular code editor for web developers.
Experience using Live Server extension, a dynamic tool for launching a local development server with live reload feature for static and dynamic pages.
Learn the importance of file extensions and how they dictate the way files are interpreted by browsers and editors.

Coding Exercises

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

Course content

3 sections • 18 lectures • 2h 5m total length

Setting Up The Developer's Environment6:05
Set up your web development environment by installing a browser and VSCode, enable file name extensions and show hidden items, and optionally install Notepad++.
Creating Our First HTML Document9:33
Create your first HTML document and learn how HTML uses elements and tags, including h1-h6 and the paragraph tag, to structure content in a browser.
The Evolution of HTML (Supplementary Material)1:02
Emmet Plugin and HTML Elements8:20
Discover how the Emmet plugin speeds HTML coding in VS Code, use h1/h2 headings and paragraphs with lorem ipsum, and apply strong, em, i, br, and hr elements.
Install Live Server Extension and Troubleshooting9:59
Install the Live Server extension in VSCode to enable real-time reloading as you save changes. Troubleshoot by adding head and body tags and choosing a browser to ensure updates render.
Basic HTML Elements Coding Exercise

HTML Basic Structure and HTML Attributes9:37
Learn the html structure with html, head, title, and body tags, and use Emmet to generate boilerplate. Add attributes for styling and images, such as src, alt, width, and height.
Knowledge Check
HTML Entities5:58
Explore HTML formatting elements like subscript, superscript, del, small, and bold versus strong, and use HTML entities such as non-breaking spaces, ©, and & to display symbols.
HTML Entities Coding Exercise
Live Server Settings, Favicon, HTML Boiler Template12:50
Set live server to default Chrome, then explore the HTML5 boilerplate, including doctype html, language, head and title tags, meta utf-8, and adding a favicon via a link rel icon.
HTML Semantics and Web Page Creation16:00
Explore semantic html to structure web pages with header, nav, main, section, article, aside, and footer, boosting accessibility, screen reader support, and search engine optimization.
Knowledge Check

Ways to include CSS in a webpage3:17
Learn how cascading style sheets enhance web aesthetics by applying external, internal, and inline styles, linking style sheets with the rel attribute stylesheet, and using style tags and inline attributes.
Knowledge Check
CSS: Styling the Web Through Time (Supplementary Material)1:12
CSS Syntax and Selectors10:19
Explore css syntax and selectors through hands-on coding, using type, class, and id selectors to style html elements with properties like color, font-family, margin, padding, hover, and focus effects.
Laboratory/Hands-on Activity2:30
Knowledge Check
Inline and Block Level Elements4:14
Learn how the CSS display property differentiates block and inline elements, with examples using paragraphs, buttons, labels, and inputs and how display choices affect layout and wrapping.
The Box Model: Understanding how layout works in CSS (A must read article)2:05
Knowledge Check
Learning By Doing: Building A Job Application Form13:10
Master CSS basics by building a centered form inside a bordered, shadowed container. Style the body, background image, inputs, selects, and a full-width submit button using box sizing.
More Info About Flexbox (Suplementary Material)0:47
Learning By Doing: Building A Landing Page8:31
Build a landing page in VSCode with index.html and style.css, adding a container, heading, paragraph, email input, and a buy button, then apply a centered flex layout and hover effects.

Requirements

No programming experience needed
Basic knowledge in computer and internet

Description

Begin on your journey into web design or web development with this course HTML and CSS Basics: Begin to Develop and Design Websites, a perfect blend for beginners. Tailored specifically for novices or those aiming to refine their foundational web development skills, this course serves as your comprehensive gateway to mastering the core components of website creation whether if you just want to try it out or become an expert and a professional web developer. This curriculum is finely tuned to emphasize the bedrock techniques and their real-world applications, ensuring a focus on practical learning.

Engage in immersive lessons coupled with hands-on projects that promise not just theoretical knowledge but practical prowess in HTML and CSS. This learner-centered approach ensures you gain the competence to construct web pages from scratch. The course covers everything from the basic anatomy of HTML documents to the nuanced art of page styling using CSS, setting a solid foundation for your knowledge and building your skill sets as a developer.

Upon completing this course, you'll have the capability to devise a landing page form creations. These projects not only serve as a testament to your acquired skills but also significantly enrich your portfolio, marking your confident and stylish initial steps into the web development domain. This strategic educational journey is designed to unlock your potential in the digital landscape, providing a robust start to your career in web development and design.

Who this course is for:

Aspiring web designers or developers
Career changers
Hobbyists
Programmers in other field who want to start learning web html and css

HTML and CSS Basics: Begin to Develop and Design Websites

What you'll learn

Explore related topics

Coding Exercises

Course content

Preparations5 lectures • 35min

The HTML Structure4 lectures • 44min

Cascading Style Sheets (CSS)9 lectures • 46min

Requirements

Description

Who this course is for: