Class Description, Introduction to Web Development
Building Websites with HTML and CSS
Learn HTML and CSS quickly and easily through step by step exercises. The best way to learn web development is by building actual websites. The Web Guru has distilled years of experience into simple projects that will teach you the essentials of good web design. He will take you through the process step by step from absolute basics to building highly functional websites.
This class is project based and you will get plenty of hands on practice coding websites from scratch, adding content and images, styling with CSS, testing in various browsers and uploading the website to a live web server to make them live to the public.
Who should take class?
- Anyone responsible for building or managing a website and wants a deeper understanding of how web technologies work
- Graphic designers who need more understanding of the web
- Content creators who publish to the web
What’s Included?
- Instruction from an Adobe Certified Expert (ACE) and Adobe Certified Instructor (ACI), who is also an experienced web developer and designer
- Detailed notes
- Lesson files and hands-on exercises
- Follow up sessions with the instructor by phone and email
What You Will Learn
- HTML Syntax: Tags and Attributes
- HTML content: Headings, Paragraphs, Lists
- Hyperlinks
- Adding images
- Writing CSS rules
- The Div tag and basic page layout
- HTML5 semantic elements
- Fluid layouts
- CSS box model
- Background images
- Using Google fonts
- CSS floats for layouts
- Uploading to a live website
- Forms
Detailed Curriculum, Introduction to Web Development
1. Coding Basics: Intro to HTML
- The HTML, Head, Title, and Body Tags
- Headings, Paragraphs, and Lists
- Bolding and Italicizing
- The Doctype Declaration (DTD)
- The Lang Attribute
- The Meta Tag and the Unicode Character Set
2. Hyperlinks
- Anchor Tags and Hrefs
- Linking to Other Websites
- Linking to Pages Within a Website
- Opening a Link in a New Browser Window
3. Adding Images
- The Break Tag
- The Image Tag and Source Attribute
- Using the Width, Height, and Alt Attributes
- Using Horizontal Rules
4. Intro Cascading Style Sheets (CSS)
- The Style Tag
- Tag Selectors
- Class Selectors
- Font-Size, Font-Family, Color, and Line-Height Properties
- Hexadecimal Shorthand
- The Span Tag
5. The Div Tag & Basic Page Formatting
- Creating Divisions with the Div Tag
- Setting a Div Width
- CSS Background-Color
- Adding Padding Inside a Div
- Centering Content
- CSS Borders
- CSS Shorthand and the DRY principle
6. Using Browser Developer Tools
- 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
7. HTML5 Semantic Elements
- The Outline Algorithm
- The Header, Nav, Aside, and Footer Elements
- Understanding Articles and Sections
- The Main Element
- The Figure and Figcaption Elements
- Validation
8. Fluid Layout & Max-Width
- Making Images Fluid
- Divs for Presentational Style
- Assigning IDs to Divs
- Assigning Max-Width to Content
9. Travel Website: Real World Layout
- Organizing Content into Semantic Sections
- Adding Images
- Tagging Headings
10. The Box Model
- What is the Box Model?
- Setting Div Width
- Fixing a Display Issue in Internet Explorer
- Setting Page Defaults for Font Styles
- Padding and Margin Spacing
11. Floats & Images
- Adding a Hero Image
- Fluid Images
- Floating Images
- Class Selectors
- Margins
12. Coding Links: Images, Email, & Named Anchors
- Anchor Tags and Relative URLs
- Wrapping Links Around Images
- External Links (Using the Target Attribute)
- Spambot-Resistant Email Links
- Links Within a Page
13. Styling Links
- Styling the Anchor Tag
- The :link, :visited, :active, and :hover Pseudo-Classes
- LoVe/HAte: Ordering Link Styles
14. Styling the Navigation
- Semantically Correct Navigation
- Overriding Default List Styles
- CSS Navigation Styles
- Using Descendant Selectors
15. Shared CSS and Centering Content
- Moving Embedded Styles into an External CSS File
- Sharing Styles Across a Site
- The Text-Align Property
- Centering Divs
16. Setting the Viewport Meta Tag
- The Viewport Meta Tag
- Device-Width
- Initial-Scale
- Maximum-Scale
17. HTML and CSS Wireframe
- Stacking Sections
- Linking to an External Stylesheet
- Using DevTools to Unpack the Box Model
18. CSS Background Images
- HTML Images vs. CSS Background Images
- Background-Position
- Background-Repeat
- Background-Size
19. Fun with Fonts
- How to Use Google Fonts
- Safe Fallbacks in the Font Stack
- Improving Line-Height and Margin for Legibility
20. Real World Layout: Fine Tuning with Box Model
- Removing Default Page Margin
- Setting a Max-Width
- Outer and Inner Wrappers
- The Difference Between ID and Class Selectors
21. CSS Buttons and Floats
- Styling Semantically Correct Navigation
- Floats for Layout
- Float Insert Position
- Simple CSS Buttons
- CSS Border-Radius
- Reusing Class Selectors
22. Hi-Res Images
- Retina or HiDPI Graphics (@2x Images)
- Setting HTML and CSS Size to Half the Image’s Native Size
- Hardware Pixels vs. Reference Pixels
23. Uploading to a Live Website via FTP
- What is FTP?
- Using an FTP Client
- Going Live
24. Form Basics
- The Form Tag
- The Input and Label Elements
- Name and ID Attributes
- The Button Element
- Styling the Form