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

Once you have the basics under your belt, you’ll move on to real-world page layout. You’ll learn text and link styles, centered page layout, background images, CSS-based navigation, forms, uploading files via FTP, and much more. We will provide you with the content and prepared images for use in these projects but this training will give you hands-on practice coding websites from scratch all the way through uploading them to make them live.

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

Register for a class

$975 Discounts Policies

NYC or Live Online

Show all dates

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
The Div Tag & Basic Page Formatting
  • Creating divisions with the div tag
  • Setting a div 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
Fluid Layout & Max-Width
  • Making images fluid
  • Divs for presentational style
  • Assigning IDs to divs
  • Assigning max-width to content
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
Section 4
Coding Links: Images & Page Jumps
  • Anchor tags & relative URLs
  • Wrapping links around images
  • External links (using the target attribute)
  • Links within a page
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
Section 5
Setting the Viewport Meta Tag
  • Disabling mobile browser text size adjustment
  • The viewport meta tag
  • device-width
  • initial-scale
  • maximum-scale
HTML & CSS Wireframe
  • Setting a default font
  • Removing default page margin
  • Stacking sections
  • Creating a placeholder style
  • Linking to an external style sheet
  • Using DevTools to inspect the box model
CSS Background Images
  • 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
Section 6
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
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
  • Travel website coded with HTML and CSS

    Learn how to lay out pages with shared CSS for a unified look as well as an optimized workflow.

  • Travel website coded to be responsive on mobile

    Learn best practices for fluid layouts that work across devices.

  • Coffee website coded with background images and icons

    Create impactful layouts with full background hero images, colorful social media icons, and a clear call-to-action.

  • Registration form coded with HTML and CSS

    Learn to create and style forms.

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

NYC or Live Online

Show all dates