Web Development Level 1

Intro to Web Development Training in NYC

In this web development class, you’ll learn how to develop websites with HTML and CSS.

Learn best practices for structuring the content of your webpages with HTML, and then styling the content with CSS.

Using HTML, you’ll create webpages with text, images, lists, videos, and more. With CSS, you’ll style the content and make the page responsive, so it adapts to various screen sizes. By the end of the course, you'll learn how to deploy your sites via FTP.

We provide you with the content so you can focus on the coding. In this course, you’ll get hands-on experience programming websites from scratch, from the first line of code all the way to deployment.

This intro to web development course is held at our coding school in SoHo, located at 594 Broadway, New York, NY.

  • icon for small classesSmall classes
  • icon for small classesComputer provided
  • icon for small classesBook included
  • icon for small classesFree retake

Register for a Class 

$975 18 Hours Mac and PC provided 594 Broadway, NYC In-person classroom training

This course is offered at our design school, Noble Desktop, in SoHo. View upcoming dates and register for this course directly on Noble Desktop’s website.

Register at nobledesktop.com 

What You'll Learn

  • Build websites with HTML and CSS
  • Create multi-page websites with text, images, and more
  • Upload your files using FTP to deploy your site

Full Course Syllabus

Download PDF Outline

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

HTML5 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
  • Fixing a display issue with main element in Internet Explorer
  • 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

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

Section 6

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 (Floats & Clearing)

  • Creating a 2-column layout with floats
  • Using the clear property
  • Adding a border between the columns
  • Setting the overflow property to hidden

Introduction to Media Queries

  • Finding an appropriate breakpoint
  • Using a media query to change the layout at a specific screen size
  • Max-width media queries
  • Disabling mobile browser text size adjustment
  • The viewport meta tag
  • Adjusting text size across screens