Web Development Level 1
Intro to Front-End Web Development Course in NYC
- $975
- 18 Hours
-
Mac or PC provided
We provide computers to use during class. Choose a Mac or a PC during the checkout process.
- Small in-person class
-
Free retake
Students may retake the course once within six months if there is an available seat.
- 594 Broadway, 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.
Register For a Class
Customize your own schedule (choose dates at checkout), or choose a preset package track by expanding the dates below.
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.comLooking for corporate training?
We offer custom onsite training and discounted class vouchers.
Course Overview
- 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 OutlineSection 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