Fundamentals of Web Development
In this course, you will learn the basics of building a website from scratch using HyperText Markup Language (HTML) and Cascading Style Sheets (CSS). You will learn about best practices, how to lay a webpage out, as well as styles, background images, CSS-based navigation, multi-column layouts, forms, and uploading files to a server via FTP.
Course Outline
1. Coding Basics: Introduction to HTML Syntax
- Headings, Paragraphs, and Body Tags
- Strong and EM Tags
- The Doctype Declaration (DTD)
- The Lang Attribute
- Meta Tag: The Unicode Character Set
2. Coding Links
- Linking to Pages Within a Website
- Linking to Other Websites
- Opening a Link in a New Browser Window
3. Adding Images
- The Image Tag and Source Attribute
- Using the Width, Height and Alt Attributes
- Using Horizontal Rule
- The Break Tag
4. Intro to Cascading Style Sheets (CSS)
- The Style Tag
- Tag Selectors
- Class Selectors
- The Class Attribute
5. The Div Tag and Basic Page Formatting
- Understanding Divisions
- Setting a Div Width
- Adding Padding Inside a Div
- CSS Background-Color
- CSS Borders
- CSS Shorthand and the DRY principle
- Content Structure with Multiple Divs
- Assigning IDs to Divs
- Adding Images
- Organizing Content Into Divs
- Tagging Headings
6. The Box Model and Background-Images
- Using ID Selectors
- The Background-Image Property
- The Box Model
- Padding and Margin Spacing
- Setting Div Width
- Setting Page Defaults for Font Styles
7. Floats and Images
- Adding Images
- Adding an Image Title
- Floating Images
- Class Selectors
- Margins
8. Links
- Anchor Tags and Relative URLs
- External Links (Using Target Attributes)
- Spambot Resistant Email Links
- Linking Within a Page (Named Anchors)
9. Styles for Links and Navigation
- Styling the Anchor Tag
- Pseudo-Classes
- Creating CSS Navigation Styles
- Using Descendent (Nested) Selectors
- Managing White-Space and Wrapping Issues
10. Shared CSS and Centering Content
- Moving Embedded Styles into an External CSS File
- Sharing Styles Across a Site
- Text-Align
- Center Divs
- Fixing “Page Shift” with Overflow-y
- Planning a Two-Column Layout
11. Two-Column Layout: Floats and Clearing
- Linking to an External Style Sheet
- Using Floats to Position Divs
- Using a Content Wrapper Div
- Clearing Floated Elements
12. More Box Model: Margins and Padding
- Margins vs. Padding
- CSS Shorthand: TRBL
13. More Practice with CSS
- Styling Anchor Tags
- Styling the Hover Pseudo-Class
- Using Descendent Selectors
- More CSS Borders
- Managing White-Space and Wrapping Issues
- Fixing Spacing Around Images
- Moving Borders with Padding
14. Fine-Tuning Lists, Paragraphs, and the Footer
- More Descendent (Nested) Selectors
- Styling Lists
- Organizing Styles
15. 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
16. FTP Uploading to a Live Website
- What is FTP
- Using an FTP Client
- Going Live
17. Creating a Form
- The Form Tag
- The Input and Label Elements
- Name and ID Attributes
- Fieldset and Legend Elements
- Select, Option * Optgroup
- Input Types: Text, Checkbox, Radio, and Submit
18. Submitting Form Data to a Server-Side Script
- A Simple PHP Script
- Setting the Form Action
- Uploading and Testing the Form
Reviews
There are no reviews yet.