Intro to Front-end Web Development Course 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 Midtown, located at 185 Madison Avenue, New York, NY.

Learn the Skills Guarantee™

Hands-on, personalized training

Learn with real-world projects
Cutting edge curriculum

Step-by-step instruction to boost retention
Learn from industry experts

Gain industry knowledge from professionals
Free retake

Retake the course for free within one year

Learn the concepts and skills covered in this course or your tuition is on us. See details and terms & conditions.

The Career Centers instructors are highly skilled communicators who really know their craft. They are wonderful about explaining and re-explaining when necessary and I never felt rushed or foolish for asking a question.
—Diane Speros

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

Course Syllabus

Download Syllabus PDF

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

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

Schedule & Enrollment: Web Development Level I

$975
18 Hours
NYC or Live Online
Free retake
Setup assistance
Expert instructors
Small classes

This course is offered by our affiliate school, Noble Desktop.
View upcoming course dates and register at nobledesktop.com

This Course is Available in NYC or Live Online

On Campus in NYC

185 Madison Avenue, NYC

In-person training happens at our campus in NYC where you’ll get face-to-face interaction with instructors and direct collaboration with other students. Courses are hands-on with all the necessary computers and software provided to you in class.

Classes are interactive and led by an experienced instructor who is in the classroom with you.
Each attendee will be set up on a computer (your choice of Mac or PC) with all the necessary software.
Retake the course for free (in-person or live online) within one year.

Live Online

Live online training happens through Zoom during the same time as the in-person class and gets you the same interactivity and access to the instructor as in-person students. There are no extra fees and we’ll work with you to ensure your remote setup is perfect.

Classes are activity-based and taught in real-time by an experienced instructor.
You can hear the instruction, ask questions, and share your screen—all in real-time.
Retake the course for free (in-person or live online) within one year.

Online Training Demo

1-Minute Overview

Testimonials for Live Online Training

“Overall experience on Zoom was maybe even better than in IRL classroom because the instruction takes place right on your own screen, with less distraction. Great overall experience.”
“Given the fact that we had to do this entire class remotely due to Covid-19, I didn’t have very high expectations it would run so smoothly. However, I don’t think it could’ve gone any better. Not only do I feel very comfortable with the program now, but I’m actually excited to use it!”
“This was the first online class I’ve taken with ND and it was a great experience. Looking forward to the other classes I’ve signed up for!”

More about live online training

Frequently Asked Questions

Does this course require any prior knowledge or experience?

Students must be comfortable using a computer. No other prior knowledge is required.
Do you offer any discounts for this course?
Discounts

We don’t currently offer discounts as we do our best to affordably prices our courses.

Take this course as part of a certificate program and save:
- Web Design Certificate
  
  Price: $3,800 | Hours: 90 Hours
- Front-End Web Development Certificate
  
  Price: $2,995 | Hours: 72 Hours
- Web Design with WordPress & PHP Certificate
  
  Price: $5,000 | Hours: 120 Hours
- Full-Stack Web Development Certificate
  
  Price: $6,995 | Hours: 198 Hours
- Software Engineering Certificate
  
  Price: $10,995 | Hours: 288 Hours
- HTML Email Certificate
  
  Price: $1,395 | Hours: 30 Hours
- Web & Visual Design Certificate
  
  Price: $4,995 | Hours: 120 Hours
Are there any additional fees or expenses?

There are no extra fees or taxes for our courses. The price you see on this page is the maximum you’ll pay us.

However, if you plan to take the course live online, you may need to obtain required software. We’ll help you get set up with a free trial of paid software prior to the class. Most of our coding classes utilize freely-available open-source software. For most of our design and motion graphics courses, we will help you get set up with a free trial of Adobe Creative Cloud. If you attend the course in-person, we will have a computer already set up for you with all of the required software for no additional cost.
Do you offer payment plans or student financing for this course?

This course does not qualify for payments plans or student financing. See our Payment Plan FAQ to find related programs that qualify.
Can I take this course online (remote learning)?
You may attend this training virtually (online) at the scheduled time the course is offered (New York, Eastern Time).

How does attending “live online” work?
- Students can attend this training remotely through screen sharing software (we use Zoom).
- Participants can hear the instruction, ask questions, and even share their screen with the instructor.
- For audio you can use your computer’s microphone/speakers or call a phone number that we’ll provide.
- Classes are activity-based and taught by a live instructor, so we strongly encourage students who are local to the area to attend in person!
- You will need your own computer and copy of any required software. If you don’t have the software, you can usually do a free trial or purchase your own license. If you need assistance, contact us at nyc@careercenters.com

Learn the Skills Guarantee™

Hands-on, personalized training

Cutting edge curriculum

Learn from industry experts

Free retake

Earn a Certificate of Completion

What You’ll Learn

Course Syllabus

Section 1

Coding Basics: Intro to HTML Syntax

Coding Links: Absolute & Relative URLs

Adding Images

Intro to Cascading Style Sheets (CSS)

Section 2

CSS Class Selectors

Div Tags, ID Selectors, & Basic Page Formatting

Using Browser Developer Tools

HTML5 Semantic Elements & Validating HTML

Section 3

Revolution Travel: Page Layout

The Box Model

Floats & Images

Coding Links: Images & Page Jumps

Section 4

Styling Links

Styling the Navigation

Specificity, Shared CSS, & Centering Content

Setting the Viewport Meta Tag

Section 5

Starting a New Site & CSS Background Images

Fun with Fonts

Hipstirred Layout: Fine-Tuning with the Box Model

CSS Buttons & Floats

Section 6

Hipstirred: Hi-Res Images

Uploading to a Live Website via FTP

Creating Columns (Floats & Clearing)

Introduction to Media Queries

Schedule & Enrollment: Web Development Level I

This Course is Available in NYC or Live Online

On Campus in NYC

Live Online

Online Training Demo

Testimonials for Live Online Training

Frequently Asked Questions

Does this course require any prior knowledge or experience?

Do you offer any discounts for this course?

Discounts

Take this course as part of a certificate program and save:

Are there any additional fees or expenses?

Do you offer payment plans or student financing for this course?

Can I take this course online (remote learning)?

How does attending “live online” work?

Looking for corporate training?

Why Learn at Career Centers

Highly Reviewed by Our Alumni

Compare Web Development Level I to Similar Courses

Intro to HTML & CSS

Web Design Certificate

Front-End Web Development Certificate

Web Development Level 2