Fundamentals of Web Development

3 days
DATES & PRICES ▾

Web Programming Training at FMC

Course Description

In this class you will learn how to code HTML and CSS, the coding languages used to create webpages. 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 will move on to real-world page layout. You will learn text and link styles, centered page layout, background images, CSS-based navigation, forms, uploading files via FTP, and much more. We will provide you with the content and prepared images for use in these projects but this training will 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.

Who Needs to Attend

Anyone who will need to build or manage a website in the near future. This course can be taken using either a Windows or Mac computer. You will need to download several web browsers and a simple text editor such as Notepad on Windows or TextEdit on a Mac. Past that, no special software is needed.

Course Book

Noble Desktop Web Development

Prerequisites

None

Course Outline

Section 1

Coding Basics: Intro to HTML Syntax

  • The HTML, Head, Title, and Body Tags
  • Headings, Paragraphs, and Lists
  • Strong and EM Tags
  • The Doctype Declaration (DTD)
  • The Lang Attribute
  • The Meta Tag and the Unicode Character Set

Coding Links

  • Anchor Tags and Hrefs
  • Linking to Other Websites
  • Linking to Pages Within a Website
  • Opening a Link in a New Browser Window

Adding Images

  • The Break Tag
  • The Image Tag and Source Attribute
  • Using the Width, Height, and Alt Attributes
  • Using Horizontal Rules

Section 2

Intro to 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

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

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

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

Fluid Layout & Max-Width

  • Making Images Fluid
  • Divs for Presentational Style
  • Assigning IDs to Divs
  • Assigning Max-Width to Content

Section 3

Revolution Travel: Real World Layout

  • Organizing Content into Semantic Sections
  • Adding Images
  • Tagging Headings

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

Floats & Images

  • Adding a Hero Image
  • Fluid Images
  • Floating Images
  • Class Selectors
  • Margins

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

Section 4

Styling Links

  • Styling the Anchor Tag
  • The :link, :visited, :active, and :hover Pseudo-Classes
  • LoVe/HAte: Ordering Link Styles

Styling the Navigation

  • Semantically Correct Navigation
  • Overriding Default List Styles
  • CSS Navigation Styles
  • Using Descendant Selectors

Shared CSS and Centering Content

  • Moving Embedded Styles into an External CSS File
  • Sharing Styles Across a Site
  • The Text-Align Property
  • Centering Divs

Setting the Viewport Meta Tag

  • The Viewport Meta Tag
  • Device-Width
  • Initial-Scale
  • Maximum-Scale

Section 5

HTML and CSS Wireframe

  • Stacking Sections
  • Linking to an External Stylesheet
  • Using DevTools to Unpack the Box Model

CSS Background Images

  • HTML Images vs. CSS Background Images
  • Background-Position
  • Background-Repeat
  • Background-Size

Fun with Fonts

  • How to Use Google Fonts
  • Safe Fallbacks in the Font Stack
  • Improving Line-Height and Margin for Legibility

Hipstirred 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

Section 6

CSS Buttons and Floats

  • Styling Semantically Correct Navigation
  • Floats for Layout
  • Float Insert Position
  • Simple CSS Buttons
  • CSS Border-Radius
  • Reusing Class Selectors

Hipstirred: 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

Uploading to a Live Website via FTP

  • What is FTP?
  • Using an FTP Client
  • Going Live

Form Basics

  • The Form Tag
  • The Input and Label Elements
  • Name and ID Attributes
  • The Button Element
  • Styling the Form

RELATED TRAINING