Web Development with HTML & CSS
- Format
- Live or Self-paced
Choose how you learn
Compare formats, then explore the details for your choice.
Book directly on nobledesktop.com. Opens in a new tab.
Book live on Noble DesktopSummary
In this coding class, you’ll learn how to develop websites with HTML and CSS, the languages used to create websites and web applications.
You’ll gain hands-on experience coding websites from scratch, all the way through uploading to make the site live. You’ll learn best practices for structuring and tagging the content of your webpages with HTML and styling the content with CSS.
With HTML, you’ll learn how to create webpages with text, images, and more. With CSS, you’ll style the content, create centered page layouts, add background images, style navigation, and make the pages responsive so they adapt to various screen sizes using media queries. To make the site go live, you’ll upload files via FTP. We provide you with prepared content (text and images) so you can focus on coding.
Curriculum
What you'll learn
- Start learning to build websites by hand-coding HTML and CSS
- Markup content (text, images, lists, links, etc.) using HTML (Hypertext Markup Language)
- Style the content using CSS (Cascading Style Sheets), setting font, size, color, spacing, width, and more
- Create multi-page websites with text, images, and more
- Adapt the layout for different screen sizes to create responsive webpages
- Use web browser developer tools to look behind the scenes and experiment with code changes
- Upload your website files using FTP to make the site live
Course syllabus
Section 1
Coding Basics: Intro to HTML Syntax
- Basic tags: HTML, head, title, & body
- Headings, paragraphs, & lists
Tags & Attributes: Strong, Em, Doctype, Lang, & Meta
- Strong & em tags
- Doctype
- Lang attribute
- Meta tag & unicode character set
Coding Links: Absolute & Relative URLs
- Anchor tags & hrefs
- Linking to other websites
- Linking to pages within a website
- Opening a link in a new browser window/tab
Adding Images
- Break tag
- Image tag & source attribute
- Using width, height, & alt attributes
Section 2
Intro to Cascading Style Sheets (CSS)
- Style tag
- Tag selectors
- Font-size, font-family, color, & line-height properties
- Hexadecimal color codes
CSS Class Selectors
- Class attribute
- CSS class selectors
- Span tag
- CSS opacity
Div Tags, ID Selectors, & Basic Page Formatting
- Dividing up content with the div tag
- Assigning IDs to divs
- Setting width & max-width
- CSS background-color
- Adding padding inside a div
- Centering content
- CSS borders
- CSS shorthand & the DRY principle
Browser Developer Tools & Validating HTML
- Opening the DevTools in Chrome
- Editing HTML in the DevTools Elements panel
- Enabling, disabling, & editing CSS in the DevTools
- Using DevTools to fine-tune your CSS
- Hexadecimal shorthand
- Checking for errors: validating your code
Section 3
HTML Semantic Elements & the Document Outline
- Using headings to product a good document outline
- Header, nav, aside, & footer elements
- Articles & sections
- Main element
- Figure & figcaption elements
Revolution Travel: Page Layout
- Organizing content into semantic sections
- Adding images
- Tagging headings
The Box Model
- What is the box model?
- Setting width
- Adding a hero image
- Fluid-width images
- Setting a default font for the page
- Margin & padding spacing
- Centering divs
Coding Links: Images & Page Jumps
- Anchor tags & relative URLs
- Wrapping links around images
- External links (using the target attribute)
- Links within a page
Section 4
Styling Links
- Styling the anchor tag
- The :link, :visited, :hover, :focus, & :active pseudo-classes
- Ordering link styles
Styling the Navigation
- Semantically correct navigation
- Overriding default list styles
- CSS navigation styles
- Using descendant selectors
Specificity, Shared CSS, & Centering Content
- CSS specificity
- Overriding other link rules
- Moving embedded styles into an external CSS file
- Sharing styles across a site
- Text-align property
Setting the Viewport Meta Tag
- Disabling mobile browser text size adjustment
- Viewport meta tag
- device-width
- initial-scale
- maximum-scale
Section 5
Starting a New Site & CSS Background Images
- Setting a default font
- Removing default page margin
- Linking to an external style sheet
- CSS background images
- background-position
- background-repeat
- background-size
Adding Custom Fonts (using Google Fonts)
- How to use Google Fonts
- Safe fallbacks in the font stack
- Improving line-height & margin for text legibility
Page Layout: Fine-Tuning with the Box Model
- Removing the extra space below an image
- Setting a max-width
- Outer & inner wrappers
- The difference between ID & class selectors
Section 6
Navigation Bar Layout: Intro to Flexbox
- Coding & styling semantically correct navigation
- Intro to using Flexbox for layout
Hipstirred: Hi-Res Images
- Retina or HiDPI graphics (@2x images)
- Setting HTML or CSS size to half the image’s native size
- Code pixels vs. hardware pixels
Creating Columns: Intro to CSS Grid & Media Queries
- Creating a 2-column layout with CSS Grid
- Finding an appropriate breakpoint
- Using a media query to change the layout at a specific screen size
What's included
- Free course retake within one year to refresh the material and gain practice.
- Course workbook
- Class recordings
Stated by the provider. Confirm what your tuition covers before enrolling.
Live classes
Choose dates and book your instructor-led class on nobledesktop.com.
-
–
In-person or live online
Starts at 10:00 · America/New_York (EST); final session ends at 17:00 EST
-
–
In-person or live online
Starts at 10:00 · America/New_York (EDT); final session ends at 17:00 EDT
-
–
In-person or live online
Starts at 10:00 · America/New_York (EDT); final session ends at 17:00 EDT
Confirm current dates and availability on Noble Desktop before booking.
Self-paced course
Learn through recorded lessons on your own schedule.
This course is available for 30 days. You can choose when to start your access period. Once you activate, you will have 30 days to complete it (access the course materials, quizzes, projects and videos). You may request one extension of seven (7) days. Other extension requests will be evaluated on a case-by-case basis. Videos are not downloadable.
- Tuition
- $975
- Course length
- 18 hours
- Schedule
- On your schedule
In this coding class, you’ll learn how to develop websites with HTML and CSS, the coding languages used to create webpages.
You’ll get hands-on experience coding websites from scratch, all the way through uploading to make the site live. You’ll learn best practices for structuring and tagging the content of your webpages with HTML, and styling the content with CSS.
Using HTML, you’ll learn how to create webpages with text, images, and more. With CSS, you’ll style the content, create centered page layouts, add background images, style navigation, and make the page responsive so it adapts to various screen sizes using media queries. To make the site go live, you’ll upload files via FTP. We provide you with prepared content (text and images) so you can focus on coding.
Self-paced curriculum
What you'll learn self-paced
- Start learning how to build websites by hand-coding HTML & CSS
- Mark up content (text, images, lists, links, etc.) using HTML (Hypertext Markup Language)
- Style the content using CSS (Cascading Style Sheets) by setting font, size, color, spacing, width, and much more
- Create multi-page websites with text, images, & more
- Adapt the layout for different-sized screens to create responsive webpages
- Use web browser developer tools to look behind the scenes and experiment with code changes
- Upload your website files using FTP to make the site live
Self-paced syllabus
Section 1
Coding Basics: Intro to HTML Syntax
- Basic tags: HTML, head, title, & body
- Headings, paragraphs, & lists
Tags & Attributes: Strong, Em, Doctype, Lang, & Meta
- Strong & em tags
- Doctype
- Lang attribute
- Meta tag & unicode character set
Coding Links: Absolute & Relative URLs
- Anchor tags & hrefs
- Linking to other websites
- Linking to pages within a website
- Opening a link in a new browser window/tab
Adding Images
- Break tag
- Image tag & source attribute
- Using width, height, & alt attributes
Section 2
Intro to Cascading Style Sheets (CSS)
- Style tag
- Tag selectors
- Font-size, font-family, color, & line-height properties
- Hexadecimal color codes
CSS Class Selectors
- Class attribute
- CSS class selectors
- Span tag
- CSS opacity
Div Tags, ID Selectors, & Basic Page Formatting
- Dividing up content with the div tag
- Assigning IDs to divs
- Setting width & max-width
- CSS background-color
- Adding padding inside a div
- Centering content
- CSS borders
- CSS shorthand & the DRY principle
Browser Developer Tools & Validating HTML
- Opening the DevTools in Chrome
- Editing HTML in the DevTools Elements panel
- Enabling, disabling, & editing CSS in the DevTools
- Using DevTools to fine-tune your CSS
- Hexadecimal shorthand
- Checking for errors: validating your code
Section 3
HTML Semantic Elements & the Document Outline
- Using headings to product a good document outline
- Header, nav, aside, & footer elements
- Articles & sections
- Main element
- Figure & figcaption elements
Revolution Travel: Page Layout
- Organizing content into semantic sections
- Adding images
- Tagging headings
The Box Model
- What is the box model?
- Setting width
- Adding a hero image
- Fluid-width images
- Setting a default font for the page
- Margin & padding spacing
- Centering divs
Coding Links: Images & Page Jumps
- Anchor tags & relative URLs
- Wrapping links around images
- External links (using the target attribute)
- Links within a page
Section 4
Styling Links
- Styling the anchor tag
- The :link, :visited, :hover, :focus, & :active pseudo-classes
- Ordering link styles
Styling the Navigation
- Semantically correct navigation
- Overriding default list styles
- CSS navigation styles
- Using descendant selectors
Specificity, Shared CSS, & Centering Content
- CSS specificity
- Overriding other link rules
- Moving embedded styles into an external CSS file
- Sharing styles across a site
- Text-align property
Setting the Viewport Meta Tag
- Disabling mobile browser text size adjustment
- Viewport meta tag
- device-width
- initial-scale
- maximum-scale
Section 5
Starting a New Site & CSS Background Images
- Setting a default font
- Removing default page margin
- Linking to an external style sheet
- CSS background images
- background-position
- background-repeat
- background-size
Adding Custom Fonts (using Google Fonts)
- How to use Google Fonts
- Safe fallbacks in the font stack
- Improving line-height & margin for text legibility
Page Layout: Fine-Tuning with the Box Model
- Removing the extra space below an image
- Setting a max-width
- Outer & inner wrappers
- The difference between ID & class selectors
Section 6
Navigation Bar Layout: Intro to Flexbox
- Coding & styling semantically correct navigation
- Intro to using Flexbox for layout
Hipstirred: Hi-Res Images
- Retina or HiDPI graphics (@2x images)
- Setting HTML or CSS size to half the image’s native size
- Code pixels vs. hardware pixels
Creating Columns: Intro to CSS Grid & Media Queries
- Creating a 2-column layout with CSS Grid
- Finding an appropriate breakpoint
- Using a media query to change the layout at a specific screen size
What's included with self-paced
- Course workbook
- Self-paced video lessons
Self-paced lessons
Watch free previews and explore the lessons included with enrollment at Noble Desktop.
Web Development with HTML & CSS Course Online (Self-Paced)
-
Welcome & Downloading Course Materials
Lesson 1: HTML Essentials: Structure, Links & Images
1:10
Download the PDF workbook and class files, then watch the coding videos and complete the step-by-step exercises to learn HTML and CSS through repetition.
This preview is temporarily unavailable. Please try again later.
-
Before You Begin Getting a Code Editor
Lesson 1: HTML Essentials: Structure, Links & Images
3:06
Set up your code editor by installing Visual Studio Code, configuring browser preview and keyboard shortcuts, and preparing to follow along with the training materials.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Coding Basics Intro to HTML Syntax
Lesson 1: HTML Essentials: Structure, Links & Images
28:28
Learn how to create and structure a basic HTML webpage using tags like html, head, body, p, h1, ul, and li, then preview and edit it using Visual Studio Code and a web browser.
View enrollment options at Noble Desktop -
Enrollment required
Tags & Attributes Strong, Em, Doctype, Lang, & Meta
Lesson 1: HTML Essentials: Structure, Links & Images
16:16
Learn to apply semantic HTML tags like strong and em for accessibility, use language and charset attributes for correct rendering, and include required metadata like for proper browser interpretation.
View enrollment options at Noble Desktop -
Enrollment required
Coding Links Absolute & Relative URLs
Lesson 1: HTML Essentials: Structure, Links & Images
18:57
Create and organize internal and external website links using proper HTML anchor tags, file naming conventions, and relative or absolute paths.
View enrollment options at Noble Desktop -
Enrollment required
Adding Images
Lesson 1: HTML Essentials: Structure, Links & Images
15:50
Add images to webpages using the tag with a src attribute for the image path and an alt attribute for accessibility, without requiring a closing tag.
View enrollment options at Noble Desktop -
Intro to Cascading Style Sheets (CSS)
Lesson 2: Styling Content and Page Layout
7:07
Learn how to use embedded CSS to style HTML elements by customizing properties like color, font, size, and spacing.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
CSS Class Selectors
Lesson 2: Styling Content and Page Layout
18:51
Learn how to use CSS classes and span tags to selectively style HTML elements with semantic naming and specificity.
View enrollment options at Noble Desktop -
Enrollment required
Div Tags, ID Selectors, & Basic Page Formatting
Lesson 2: Styling Content and Page Layout
27:06
Use div tags to create a centered, max-width content wrapper with appropriate padding, margin, and background styling, leveraging Emmet shortcuts, span vs. div behavior, and CSS shorthand to structure and style the page efficiently.
View enrollment options at Noble Desktop -
Enrollment required
Browser Developer Tools & Validating HTML
Lesson 2: Styling Content and Page Layout
22:15
Use browser DevTools to experiment with HTML and CSS changes in real time, inspect elements, identify layout issues, and validate your HTML for errors using a validator.
View enrollment options at Noble Desktop -
HTML Semantic Elements & the Document Outline
Lesson 3: Building Page Structure with Semantic HTML & the Box Model
15:00
Understand that the Web Hypertext Application Technology Working Group, not the W3C, now defines the HTML living standard used by modern browsers.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Revolution Travel Page Layout
Lesson 3: Building Page Structure with Semantic HTML & the Box Model
23:25
Build the foundational HTML structure of a responsive travel website by creating semantic sections, organizing content with proper heading levels, and inserting images and navigation using VS Code and Emmet shortcuts.
View enrollment options at Noble Desktop -
Enrollment required
The Box Model
Lesson 3: Building Page Structure with Semantic HTML & the Box Model
22:23
Continue building the Revolution Travel website by embedding CSS to style layout, typography, spacing, and responsiveness for a more polished and flexible design.
View enrollment options at Noble Desktop -
Enrollment required
Coding Links Images & Page Jumps
Lesson 3: Building Page Structure with Semantic HTML & the Box Model
19:54
Add internal, external, image, and same-page anchor links to your website, apply unique IDs for jump links, and enhance user experience with smooth scrolling and basic link styling using classes.
View enrollment options at Noble Desktop -
Styling Links
Lesson 4: Styling Navigation and Preparing for Mobile
8:34
Style links using CSS pseudo-classes like :link, :visited, :hover, :focus, and :active to control their color, decoration, and behavior across different user interactions and browsers.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Styling the Navigation
Lesson 4: Styling Navigation and Preparing for Mobile
23:20
Style a navigation list using CSS by removing default bullets, eliminating margins and padding, displaying list items inline-block for proper spacing and box model behavior, and targeting only nav-specific lists to avoid affecting others.
View enrollment options at Noble Desktop -
Enrollment required
Specificity, Shared CSS, & Centering Content
Lesson 4: Styling Navigation and Preparing for Mobile
25:56
Move embedded CSS to an external stylesheet, link it across all pages to enable global styling updates, improve maintainability, and ensure consistent design using proper specificity and browser caching.
View enrollment options at Noble Desktop -
Enrollment required
Setting the Viewport Meta Tag
Lesson 4: Styling Navigation and Preparing for Mobile
17:01
Add the viewport meta tag and CSS text-size-adjust properties (including vendor prefixes) to ensure consistent and accessible mobile rendering across devices.
View enrollment options at Noble Desktop -
Starting a New Site & CSS Background Images
Lesson 5: Designing a Branded Homepage with Custom Fonts & Layout
14:23
Create and style a responsive hero section with centered text and a background image using CSS, incorporating best practices like fallback colors, percentage-based padding, and background-size: cover.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Adding Custom Fonts (using Google Fonts)
Lesson 5: Designing a Branded Homepage with Custom Fonts & Layout
34:45
Load and apply custom Google Fonts to a webpage using CSS while optimizing layout with max-width, auto margins, padding, and font-display settings.
View enrollment options at Noble Desktop -
Enrollment required
Page Layout Fine Tuning with the Box Model
Lesson 5: Designing a Branded Homepage with Custom Fonts & Layout
20:56
Add a logo using an SVG image with defined width and height to improve loading, fix inline spacing issues with vertical-align: bottom in CSS, apply padding and background colors to header and footer, remove unwanted paragraph margins in the footer, and use reusable class-based wrapper divs to control content width independently of full-width elements.
View enrollment options at Noble Desktop -
Navigation Bar Layout Intro to Flexbox
Lesson 6: Responsive Layouts with Flexbox, Grid & HiDPI Images
8:57
Use Flexbox to align elements side by side with display: flex, align-items for vertical alignment, and margin with auto for flexible spacing.
This preview is temporarily unavailable. Please try again later.
-
Enrollment required
Hipstirred Hi Res Images
Lesson 6: Responsive Layouts with Flexbox, Grid & HiDPI Images
18:38
Use images that are twice the pixel dimensions of their display size in code to ensure they appear sharp on high-resolution (2x or 3x) screens.
View enrollment options at Noble Desktop -
Enrollment required
Creating Columns Intro to CSS Grid & Media Queries
Lesson 6: Responsive Layouts with Flexbox, Grid & HiDPI Images
24:20
Learn how to use CSS Grid and media queries to build responsive, multi-column layouts that adapt to different screen sizes.
View enrollment options at Noble Desktop -
Enrollment required
Course Wrap up & Your Next Steps
Lesson 6: Responsive Layouts with Flexbox, Grid & HiDPI Images
3:13
Practice coding regularly, review previous lessons and exercises, complete additional challenges, and build small personal web projects to reinforce your skills.
View enrollment options at Noble Desktop