Discover Classes. Earn 10% Rewards.

Web Development with HTML & CSS

Learn the coding languages used to create webpages in this hands-on HTML & CSS web development course. Develop websites from scratch, style content, and make pages responsive. Get the skills to create and upload live websites.

  • All levels
  • 18 and older
  • $975
  • Earn 10% Rewards
  • Price Lock
  • Interactive Online Classroom
  • 21 hours over 3 sessions
Book at School

Express Checkout – $975


Proceed to Checkout

No Booking Fees. Lowest Price Guaranteed. Earn 10% Rewards.

Give as a Gift

Start Dates (2)

  • $975/person
  • 21 hours over 3 sessions
20 left
Book
Show all 3 sessions
  • Tue, Apr 08 at 10:00am - 5:00pm
  • Wed, Apr 09 at 10:00am - 5:00pm
  • Thu, Apr 10 at 10:00am - 5:00pm
20 left
Book
Show all 3 sessions
  • Wed, Jul 09 at 10:00am - 5:00pm
  • Thu, Jul 10 at 10:00am - 5:00pm
  • Fri, Jul 11 at 10:00am - 5:00pm
Showing 12 of 2

Class Description

Description

What you'll learn in this web development course:

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.

Learn more about Web Development with HTML & CSS at Noble Desktop.

Remote Learning

This course is available for "remote" learning and will be available to anyone with access to an internet device with a microphone (this includes most models of computers, tablets). Classes will take place with a "Live" instructor at the date/times listed below.

Upon registration, the instructor will send along additional information about how to log-on and participate in the class.

Also available in-person in NYC

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

Refund Policy

  • Students may cancel up to 14 days before the class/program start date and receive a refund, less the registration fee (10% of the undiscounted course price). 
  • Cancellations within 14 days are not permitted, but students may reschedule up to three business days before the class start date.
  • For cancellations and reschedules, please email us at [email protected]

In any event where a customer wants to cancel their enrollment and is eligible for a full refund, a 5% processing fee will be deducted from the refund amount.

Reviews of Classes at Noble Desktop (387)

(4.6-star rating across 387 reviews)
  • Web Development with HTML & CSS

    Anonymous review on 4/5/2019
  • Web Development with HTML & CSS

    Reviewed by Kira B. on 11/16/2017
  • Web Development with HTML & CSS

    Reviewed by Evan I. on 1/9/2015
  • Web Development with HTML & CSS

    Anonymous review on 10/10/2014
See reviews for other classes at Noble Desktop
loading...
Hide Reviews

Review Summary by CourseHorse

Students who took the Web Development with HTML & CSS class at Noble Desktop found it to be informative, engaging, and easy to follow. The methods used to teach the course helped students understand the basics of HTML and CSS. Many students felt more confident in their knowledge of these technologies after taking the class and were able to apply their new skills in their work. The class was praised for its pace, friendliness of the teachers, and the ability to learn either in the classroom or remotely. Overall, the class provided a solid foundation in HTML and CSS coding and was recommended for beginners. Quotes: 1. "I finally understand the basics of HTML and CSS, and I'm ready for more. Where other guides become so daunting and lose me, the method used in this class made it much easier to understand the material and learn." 2. "I am so glad I did [take this class]. I feel like I was able to learn a new skill fairly quickly and I love bragging about it. Truly a lovely place to begin chasing your dream of proving everyone wrong who said, 'Coding is too hard.'" 3. "Not knowing anything about HTML/CSS, I found this class so informative. There was just the right amount of instruction without it ever feeling overwhelming. The instructor was fantastic. She was extremely articulate and explained things so clearly that I really felt like I could truly tackle web development."

Questions & Answers (0)

Get quick answers from CourseHorse and past students.

Noble Desktop

Noble Desktop is a renowned educational institution that specializes in providing comprehensive training in various creative and technology-related fields. Established in 1990 and headquartered in New York City, Noble Desktop has earned a stellar reputation for its high-quality courses and innovative...

Read more about Noble Desktop

CourseHorse Approved

This school has been carefully vetted by CourseHorse and is a verified Online educator.

Noble Desktop

Reviews of Noble Desktop at coursehorse.com

Give This Course as a Gift Card

  • Thousands of classes
  • No expiration
  • Unique and memorable gifts for any occasion
  • Personalized
  • Explore a passion, gain a new skill, discover a new hobby, engage in a memorable experience
  • Instant delivery
  • Lock in a price with the Inflation Buster Gift Card Price Adjuster™

Buy a Gift Card

Book this Class as a Group Event

Booking this class for a group? Find great private group events

Or see all Coding Group Events

Explore group events and team building activities ranging from cooking, art, escape rooms, trivia, and more.

CourseHorse Gift Cards

  • Creative & unique gift for any occasion
  • Thousands of classes & experiences
  • No expiration date
  • Instant e-delivery (or choose a date)
  • Add a personalized message
  • Lock in a price with the Inflation Buster Gift Card Price Adjuster™
Buy a Gift Card
gift card with the CourseHorse logo gift card with the CourseHorse logo
Loading...