| |
|
|
| |
EVENT DETAILS |
Building Websites with HTML & CSS
You write HTML and CSS code to create webpages. In this class we'll introduce you to what HTML and CSS are and how to code. We focus on best practices for structuring the content of your webpages with HTML and then styling the content with CSS.
Once you have the basics under your belt, you'll move on to real-world page layout. You'll learn text and link styles, centered page layout, background images, CSS-based navigation, two-column layouts, forms, uploading files via FTP, and much more. We will provide you with all the content and prepared images for use in these projects but this training will essentially give you hands-on practice coding websites from scratch all the way through uploading them to make them live.
The course workbook can be completed in any code editor. In class, you can use either Sublime Text or Dreamweaver in Code View.
WHAT YOU'LL LEARN
SECTION 1
Coding Basics: Intro to HTML Syntax
Topics
HTML, Head, Title, and Body Tags
Headings, Paragraphs, and Lists
Strong and Em Tags
The Doctype Declaration (DTD)
The Lang Attribute
Meta Tag: the Unicode Character Set
Coding Links
Topics
Anchor Tags and Hrefs
Linking to Pages Within a Website
Linking to Other Websites
Opening a Link in a New Browser Window
Adding Images
Topics
The Image Tag and Source Attribute
Using the Width, Height and Alt Attributes
Using Horizontal Rule
The Break Tag
SECTION 2
Intro to Cascading Style Sheets (CSS)
Topics
The Style Tag
Tag Selectors
Class Selectors
The Class Attribute
The Div Tag & Basic Page Formatting
Topics
Div Stands for Division
Setting a Div Width
Adding Padding Inside a Div
CSS Background-Color
CSS Borders
CSS Shorthand and the DRY principle
Revolution Travel: Real World Layout
Topics
Content Structure with Multiple Divs
Assigning IDs to Divs
Adding Images
Organizing Content Into Divs
Tagging Headings
The Box Model and Background-Images
Topics
Using ID Selectors
The Background-Image Property
What Is the Box Model?
Padding and Margin Spacing
Setting Div Width
Setting Page Defaults for Font Styles
SECTION 3
Floats and Images
Topics
Adding Images
Adding an Image Title
Floating Images
Class Selectors
Margins
Links
Topics
Anchor Tags and Relative URLs
External Links (Using the Target Attribute)
Spambot Resistant Email Links
Linking Within a Page (Named Anchors)
Styles for Links and Navigation
Topics
Styling the Anchor Tag
Refining your Styles: the Hover Pseudo-Class
Creating CSS Navigation Styles
Using Descendent (Nested) Selectors
Managing White-Space & Wrapping Issues
SECTION 4
Shared CSS & Centering Content
Topics
Moving Embedded Styles into an External CSS File
Sharing Styles Across a Site
Text-Align
Centering Divs
Fixing Page Shift with Overflow-y
NY Solar: More Complex Page Layout
Topics
Planning Out a Two-Column Layout
Content Structure with Multiple Divs
Assigning IDs to Divs
Adding Images
Organizing Content Into Divs
Two-Column Layout: Floats and Clearing
Topics
Linking to an External Style Sheet
Using Floats to Position Divs
Using a Content Wrapper Div
Clearing Floated Elements
More Box Model: Margins & Padding
Topics
Margins Vs. Padding
CSS Shorthand: TRBL
SECTION 5
NY Solar Navigation Styles
Topics
Styling the Anchor Tag
Styling the Hover Pseudo-Class
Using Descendent Selectors
More CSS Borders
Managing White-Space & Wrapping Issues
NY Solar Heading Styles
Topics
Fixing Spacing Around Images
Moving Borders with Padding
Fine-Tuning Lists, Paragraphs and the Footer
Topics
More Descendent (Nested) Selectors
Styling Lists
Organizing Styles
Using Browser Developer Tools
Topics
Opening the DevTools in Chrome
Editing HTML in the DevTools Elements Tab
Enabling, Disabling and Editing CSS in the DevTools
Using DevTools to Fine-Tune Your CSS
SECTION 6
FTP Uploading to a Live Website
Topics
What is FTP?
Using an FTP Client
Going Live
Creating a Form
Topics
The Form Tag
The Input and Label Elements
Name and ID Attributes
Fieldset and Legend Elements
Select, Option & Optgroup
Input Types: Text, Checkbox, Radio & Submit
Submitting Form Data to a Server-Side Script
Topics
Reviewing the PHP Script
Setting the Form Action
Uploading and Testing the Form
|
|
|
|
|
|
