# Web Development Level 1 Canonical URL: ## Overview In this coding class, you’ll learn how to develop websites with HTML and CSS, the coding languages used to create webpages. You’ll get hands-on experience coding websites from scratch, all the way through uploading to make the site live. You’ll learn best practices for structuring and tagging the content of your webpages with HTML, and 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 coding. ## What you'll learn - Start learning how to build websites by hand coding HTML & CSS - Markup content (text, images, lists, links, etc.) using HTML (Hypertext Markup Language) - Style the content using CSS (Cascading Style Sheets) setting font, size, color, spacing, width, and much more - Create multi-page websites with text, images, & more - Adapt the layout for different size screens to create responsive webpages - Use web browser developer tools to look behind the scenes & experiment with code changes - Upload your website files using FTP to make the site live ## Curriculum ### Section 1 #### Coding Basics: Intro to HTML Syntax - Basic tags: HTML, head, title, & body - Headings, paragraphs, & lists #### Tags & Attributes: Strong, Em, Doctype, Lang, & Meta - Strong & em tags - Doctype - Lang attribute - Meta tag & 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 - Break tag - Image tag & source attribute - Using width, height, & alt attributes ### Section 2 #### Intro to Cascading Style Sheets (CSS) - Style tag - Tag selectors - Font-size, font-family, color, & line-height properties - Hexadecimal color codes #### CSS Class Selectors - Class attribute - CSS class selectors - 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 #### Browser Developer Tools & Validating HTML - 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 - Checking for errors: validating your code ### Section 3 #### HTML Semantic Elements & the Document Outline - Using headings to produce a good document outline - Header, nav, aside, & footer elements - Articles & sections - Main element - Figure & figcaption elements #### Revolution Travel: Page Layout - Organizing content into semantic sections - Adding images - Tagging headings #### The Box Model - What is the box model? - Setting width - Adding a hero image - Fluid-width images - Setting a default font for the page - Margin & padding spacing - Centering divs #### 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 - Text-align property #### Setting the Viewport Meta Tag - Disabling mobile browser text size adjustment - 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 #### Adding Custom Fonts (using Google Fonts) - How to use Google Fonts - Safe fallbacks in the font stack - Improving line-height & margin for text legibility #### Page 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 ### Section 6 #### Navigation Bar Layout: Intro to Flexbox - Coding & styling semantically correct navigation - Intro to using Flexbox for layout #### Hipstirred: Hi-Res Images - Retina or HiDPI graphics (@2x images) - Setting HTML or CSS size to half the image’s native size - Code pixels vs. hardware pixels #### Creating Columns: Intro to CSS Grid & Media Queries - Creating a 2-column layout with CSS Grid - Finding an appropriate breakpoint - Using a media query to change the layout at a specific screen size ## Schedule - Jan 5, 2027 – Jan 7, 2027 — NYC - May 11, 2027 – May 13, 2027 — NYC - Sep 7, 2027 – Sep 9, 2027 — NYC ## FAQ ### Is this course open to beginners? Yes, this course is open to beginners. Students must be comfortable using a computer. No other prior knowledge is required. ### Do you offer payment plans or student financing for this course? This course does not qualify for payment plans or student financing. See our Payment Plan FAQ to find related programs that qualify. ### Can I take this course online (remote learning)? No upcoming live online dates are currently available. Please contact us about future availability. ### What happens if I need to miss a session? You have some options: You can watch a recording of the session. We will provide any course materials. Contact us to confirm whether remote attendance is available for your session. You can use your free retake to make up any missed class time. ### What’s included with my tuition? A hands-on learning experience working on projects and exercises, which is proven to boost comprehension, retention, and engagement Expert instructors who are industry professionals and experienced educators that are driven to help you succeed Access to industry-standard software during your training Additional personalized 1-on-1 bonus training with an industry expert to reinforce concepts Comprehensive learning materials including proprietary workbook developed by industry experts A 1-year free retake policy which allows students to retake any part of the course or program for free to refresh the materials and gain additional practice 30-day access to class recordings to review material at your own pace A certificate of completion to verify your accomplishment ### 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. ### Do you offer any discounts for this course? Take this course as part of a certificate program and save: Software Engineering Immersive Price: $10,995 | Hours: 510 Hours Front End Development Certificate Price: $3,495 | Hours: 108 Hours Full-Stack Web Development Certificate Price: $7,995 | Hours: 420 Hours ## Pricing **Tuition:** $975