Discover Classes. Earn Rewards.

Web Development with HTML and CSS

Learn the coding languages used to create webpages and develop websites from scratch in this hands-on class at NYC Career Centers. Master HTML to structure and tag content, and use CSS to style and make your website responsive. Get ready to code and bring your website to life!

  • Beginner
  • 18 and older
  • $975
  • 185 Madison Ave, New York, NY & Virtually Online
  • 21 hours over 3 sessions

Start Dates (3)

  • $975
  • Career Centers @ 185 Madison Ave Suite 1104, 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 coding class:

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 NYC Career Centers.

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 11 business days before the class/program start date and receive a refund, less the registration fee (10% of the undiscounted course price).
  • Cancellations within 11 business days are not permitted, but students may reschedule up to 4 business days before the class start date.

For cancellations and reschedules, please email us at [email protected]

Reviews of Classes at NYC Career Centers (679)

(4.5-star rating across 679 reviews)
  • Web Development with HTML and CSS

    Reviewed by Harry B. on 2/8/2018
    Learned a lot and exactly what I needed to know in such a small amount of time. Well worth the price!
  • Web Development with HTML and CSS

    Reviewed by Laura L. on 4/27/2015
    I found the class to be informative. The professor addressed all of our questions and we moved at a pace that was comfortable while still covering a lot of material.
  • Web Development with HTML and CSS

    Reviewed by Jesse Zeigler on 6/4/2014
    Fantastic instructor. Small class size gave plenty of room for Q & A.
  • Web Development with HTML and CSS

    Reviewed by Nicholas R. on 9/26/2016
  • Web Development with HTML and CSS

    Reviewed by colleen b. on 10/13/2015
  • Web Development with HTML and CSS

    Reviewed by Maria H. on 10/13/2015
  • Web Development with HTML and CSS

    Reviewed by David G. on 10/13/2015
  • Web Development with HTML and CSS

    Reviewed by Melissa O. on 8/19/2015
  • Web Development with HTML and CSS

    Reviewed by Giovanni b. on 7/12/2015
  • Web Development with HTML and CSS

    Anonymous review on 6/15/2015
  • Web Development with HTML and CSS

    Reviewed by Lauren Dolnick on 9/18/2014
  • Web Development with HTML and CSS

    Reviewed by Stephanie Prevost on 5/8/2014
See reviews for other classes at NYC Career Centers
loading...
Hide Reviews

Review Summary by CourseHorse

Students rave about their experience in the Web Development with HTML and CSS classes, praising the excellent training, friendly staff, and outstanding instructors. The small class sizes allow for plenty of individual attention, and the professors are highly skilled at addressing questions and covering a lot of material at a comfortable pace. Students feel that they learned a lot in a short amount of time and found the class to be informative. They also appreciate the easy-to-use website that provides clear information about class details and costs. Quotes: 1. "Learned a lot and exactly what I needed to know in such a small amount of time. Well worth the price!" 2. "I found the class to be informative. The professor addressed all of our questions and we moved at a pace that was comfortable while still covering a lot of material." 3. "Fantastic instructor. Small class size gave plenty of room for Q & A."

Questions & Answers (1)

Get quick answers from CourseHorse and past students.

Question from Francisco F.
are there any evening or weekend dates later in the summer or fall?
Answer from Brenda L. CourseHorse StaffCourseHorse Staff
Hi Francisco! We currently don't have evening classes for summer, I'm sorry. You can check back from time to time or save this class to your wish list and we'll email you once new schedule for this class is posted on our website.
Answer Show answer
Cancel

Similar Classes

NYC Career Centers

Since 1988, Career Centers has been a leader in software training courses for individuals and businesses, including Microsoft Excel, VBA, PowerPoint, SQL Server, Adobe Photoshop, InDesign, Illustrator, and AutoCAD.

Our courses are instructor-led in small class sizes, located in our state-of-the-art training...

Read more about NYC Career Centers

CourseHorse Approved

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

NYC Career Centers

NYC Career Centers

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

Google Map

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