Discover Classes. Earn 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
  • 185 Madison Ave, New York, NY & Virtually Online
  • 21 hours over 3 sessions

Start Dates (3)

  • $975
  • Noble Desktop @ 185 Madison Ave 3rd Floor, New York, NY 10016
  • 21 hours over 3 sessions
20 seats left
Book
Show all 3 sessions
  • Mon, Apr 08 at 10:00am - 5:00pm
  • Tue, Apr 09 at 10:00am - 5:00pm
  • Wed, Apr 10 at 10:00am - 5:00pm
20 seats left
Book
Show all 3 sessions
  • Tue, Jul 09 at 10:00am - 5:00pm
  • Wed, Jul 10 at 10:00am - 5:00pm
  • Thu, Jul 11 at 10:00am - 5:00pm
20 seats left
Book
Show all 3 sessions
  • Mon, Oct 21 at 10:00am - 5:00pm
  • Tue, Oct 22 at 10:00am - 5:00pm
  • Wed, Oct 23 at 10:00am - 5:00pm
Showing 13 of 3

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.

Syllabus

Section 1

Coding Basics: Intro to HTML Syntax

  • The HTML, head, title, & body tags
  • Headings, paragraphs, & lists
  • The strong & em tags
  • The doctype
  • The lang attribute
  • The meta tag & the 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

  • The break tag
  • The image tag & source attribute
  • Using the width, height, & alt attributes
  • Using horizontal rules

Intro to Cascading Style Sheets (CSS)

  • The style tag
  • Tag selectors
  • The font-size, font-family, color, & line-height properties
  • Hexadecimal color codes

Section 2

CSS Class Selectors

  • The class attribute
  • CSS class selectors
  • The 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

Using Browser Developer Tools

  • 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

HTML Semantic Elements & Validating HTML

  • The outline algorithm
  • The header, nav, aside, & footer elements
  • Understanding articles & sections
  • The main element
  • The figure & figcaption elements
  • Checking for errors: validating your code

Section 3

Revolution Travel: Page Layout

  • Organizing content into semantic sections
  • Adding images
  • Tagging headings

The Box Model

  • What is the box model?
  • Setting div width
  • Setting a default font for the page
  • Margin & padding spacing

Floats & Images

  • Adding a hero image
  • Fluid images
  • Floating images
  • Class selectors
  • Margins

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
  • The text-align property
  • Centering divs

Setting the Viewport Meta Tag

  • Disabling mobile browser text size adjustment
  • The 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

Fun with Fonts

  • How to use Google Fonts
  • Safe fallbacks in the font stack
  • Improving line-height & margin for text legibility

Hipstirred 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

CSS Buttons & Floats

  • Styling semantically correct navigation
  • Floats for layout
  • Float insert position
  • Vertical alignment & line-height
  • Simple CSS buttons
  • CSS border-radius
  • Reusing class selectors

Hipstirred: Hi-Res Images

  • Retina or HiDPI graphics (@2x images)
  • Setting HTML & CSS size to half the image’s native size
  • Code pixels vs. hardware pixels

Uploading to a Live Website via FTP

  • Web hosts & domain names
  • Things you’ll need to upload a website
  • Using an FTP client & going live

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]"

Reviews of Classes at Noble Desktop (372)

(4.6-star rating across 372 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 NYC educator.

Noble Desktop

Noble Desktop

All classes at this location

We are located in New York City on 34th street and Madison Avenue, a few blocks from Penn Station, Port Authority and Times Square. You may also attend this class live online (virtual training) via Zoom. We will reach out with additional information, including the Zoom info and class files.

Also available virtually online

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...