# Web Design Summer Program Live Online (High School) Canonical URL: ## Overview In this web design and coding class, you’ll learn how to design websites in Sketch and 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. Learn to create webpage layouts in Sketch, as well as optimize web graphics for hi-res screens and fast downloads. ### Important Class Notes - **Schedule: ** Every weekday from 10 am — 1 pm for two weeks - **Method of Delivery:** Live Online (live-streamed with the ability to ask questions and interact with instructor real-time). - **Prerequisites & Ages:** The program is ideal for high school and coding students with a strong interest in coding. Prior coding/programming experience is not required, but students must be comfortable with computer basics. - **Computer:** Live online attendees should have their own Mac or PC. We will assist with any software setup prior to the course. ## 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 - 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 ## FAQ ### Do you offer payment plans or student financing for this course? This course does not qualify for payments plans or student financing. ## Pricing **Tuition:** $2495