In this coding class, you'll learn how to build websites using HTML and CSS, the essential languages for creating webpages. This hands-on course will guide you through the process of coding websites from scratch and uploading them to make them live.
You'll start by mastering HTML to structure and tag the content of your webpages, including text, images, links, and lists. Then, you’ll dive into CSS to style the content, adjust layouts, add background images, and make your pages responsive to different screen sizes using media queries. Finally, you'll learn how to upload your site using FTP to bring your project to life. We provide text and images, so you can focus on honing your coding skills.
- Learn to hand-code websites using HTML & CSS
- Mark up content like text, images, links, and lists with HTML
- Style content with CSS, adjusting fonts, sizes, colors, and spacing
- Create multi-page websites with text, images, and other elements
- Make your website responsive for different screen sizes using media queries
- Use browser developer tools to inspect and modify code
- Upload your website files via FTP to make your site live
Course Outline
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
This course is available for 30 days. You can choose when to start your access period. Once you activate, you will have 30 days to complete it (access the course materials, quizzes, projects and videos). You may request one extension of seven (7) days. Other extension requests will be evaluated on a case-by-case basis. Videos are not downloadable.
