Yelp Facebook LinkedIn YouTube Twitter Instagram

Web Development Level 1

Web Development Training NYC

Build Websites with HTML & CSS

In this coding class, you’ll learn how to develop websites with HTML and CSS, the coding languages used to create webpages.

Learn to Code

We focus on best practices for structuring the content of your webpages with HTML and then 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 the coding. In this training you’ll get hands-on practice coding websites from scratch, all the way through uploading to make the site live.

  • 18 Hours
  • Mac or PC provided
  • Book included
  • Free retake

Register for a class

$975 Discounts Policies

594 Broadway, NYC or Live Online

What You’ll Learn

  • Start learning how to build websites by hand coding HTML & CSS
  • Create multi-page websites with text, images, & more
  • Learn how to style with CSS
  • Upload your files using FTP to make the site live
View full syllabus

Web Development Level 1 Class 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
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
  • Coffee website coded with background images and icons

    Use HTML & CSS to code layouts with images, text, links, call-to-action buttons, and more.

  • Travel website coded to be responsive on mobile

    Create fluid layouts that work across devices.

  • Registration form coded with HTML and CSS

    Learn to use the DevTools built into web browsers to inspect and experiment with code.

  • Travel website coded with HTML and CSS

    Use CSS to style content and lay out pages.

Class Overview Video

Get Started Coding HTML & CSS

In this introductory class you’ll learn to create and design websites by hand-coding HTML & CSS. We’ll also focus on best practices for both structuring and styling the content of your webpages. By the end of this course, you’ll have built a couple of sites and even uploaded one.

  • “Web Development Level 1 is an excellent introduction to HTML and CSS coding. The fundamental elements were explained and hands-on exercises bolstered an understanding of each function. If you are looking to build a simple web site or gain knowledge of basic coding for customization of existing sites this course is definitely helpful.”

    Carla Siegel

    Attended Web Development Level 1 to start learning coding

  • “Just completed the Web Development Level 1 Class. I never thought that I would learn HTML and CSS so quickly. The instructor was great. I would definitely recommend taking classes at Noble Desktop!!!”

    Marilyn Khan

    Marilyn quickly learned HTML & CSS in the Web Development Level 1 class

  • “I found the Web Development 1 course very informative, easy to follow, and highly engaging. I find the methods used to teach the course very effective. 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.”

    William Montalvan

    William enjoyed the teaching method and learned HTML & CSS

  • “I had always wanted to learn web design but wasn't sure where to start. Noble Desktop gave me the push necessary to get a firm grasp on the basics and built the necessary foundation for me to start exploring new possibilities on my own. The skills learned will most definitely help me grow both professionally and creatively.”

    Luis Felipe Basaure

  • “Noble's learning and instruction approach is very well-structured and organized. You learn (and code) a lot in three days. Web Development Level 1 is a great introduction to the world of Web Development. I look forward to moving to Level 2.”

    Tim Dolan

Hands-on Teaching Style

“I really enjoyed the format of this class...Watching the instructor go through the lesson first and give extra tips to help solidify the information outside of what is written in the workbook is immeasurably helpful... The course helped to show the "why" behind the process. The instructors have been very knowledgeable...The hands on approach is just what is needed in this type of course.”
Sarah Lightman, Senior Marketing Specialist

Students learning web design

Custom Workbook Included

“Web Development Level 1 is an excellent introduction to HTML and CSS coding. The fundamental elements were explained and hands-on exercises bolstered an understanding of each function. If you are looking to build a simple web site or gain knowledge of basic coding for customization of existing sites this course is definitely helpful.”
Carla Siegel, Art Director

Every Web Development class comes with a custom workbook

Learn Practical Skills

“The class was a great introduction to HTML and CSS! I definitely feel like I have a better understanding of WHY you do certain things and the logic behind the code. It was beginner-friendly and taught practical skills that I can already use. After going home on the last day, I was able to update the navigation on my company's website and add a new page that fit the rest of the website's styling. I could even make it mobile compatible! If I'd tried this a week ago, I probably would've crashed the whole site.”
Mary Murphy, Manager

Students learning HTML & CSS skills in class at Noble Desktop

Part of a Certificate Program

This class is included in the Web Design and Web Development certificate programs. Take the other courses to earn a certificate!

Web Design Certificate graduates

Register for Web Development Level 1

$975 Discounts Policies

594 Broadway, NYC or Live Online