Introduction to Web Development Training Class

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

• Intermediate Web Development Training Class