Web Development Level 1
Setup & Introduction
Noble Desktop
Web Development Level 1
Building Websites with HTML & CSS
ISBN: 978-1-941333-54-9
- What is a website?
- Download the Class Files
- Reference: Web Development
- A11Y Layers
- David J. Hark's <html> Class Resources
- HTML Tutorials, Courses, and Books
- w3schools: HTML Element Reference
- HTML Element test file index
- HTML5 Factsheets
- HTML5 Elements
- 10 HTML Elements You Didn’t Know You Needed
- A Look Back at the History of CSS | CSS-Tricks
- Understanding Position in CSS
- 20 Best Web Design and Development Blogs To Follow
- Learn web development
MDN
- <html> MDN
- Web Fundamentals Google
- How To – Learning Guide
- W3Schools Online Web Tutorials
- FTP: File Transfer Protocol
- Fonts
- Getting Started With CSS Layout
- CSS Grid: Now in a browser near you
- Grid 2.0 layouts in Webflow
- Website Design: Creating the Layout in HTML
- Float
- CSS Floats 101
- All About Floats
- Floatutorial: Step by step CSS float tutorial - CSS Maxdesign
- Hosting by 000webhost
- 000webhost is a learning platform for beginners starting their journey on the internet. Learn HTML, CSS, Javascript, PHP and SQL in one place. Create and publish your first ever website. All for free
- Getting started
- Web Hosting FAQ & Knowledge Base
- The Complete WordPress & 000webhost Guide
- David's local Hipstirred site
- HTML 5 Outliner
- The Layer-Cake Pattern of Scanning Content on the Web
- Validator.nu (X)HTML5 Validator (Living Validator)
- Chrome
- Chrome DevTools
- Chrome DevTools Overview
- Edit the DOM
- Introduction to the DOM - Web APIs | MDN
- Firefox
- StatCounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share
- Google Analytics Solutions
- Form Reply Address / Demo Form
- Some Favelets or Bookmarklets
- Only CSS: STARFOX Arwing Drone CodePen
- 9 Best Website Layout Examples and Ideas for Web Design in 2018
- Inter-American Development Bank
- McKee Foods Corp
- U.S. Pharmacopeia
- <!DOCTYPE html> 2584 lines
- Education <!DOCTYPE html> 849 lines
- NALP - The National Association for Law Placement
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 1543 lines
Free Web Page Editors, HTML Editors, Web Page Builders, and Website Builders
WYSIWYG
- The 5 Best Free WYSIWYG Alternatives to Dreamweaver 4948/7156
- 6 Best WYSIWYG HTML Editor Open Source
- Free WYSIWYG Web Editors for Windows
- KompoZer
- BlueGriffon
- Top 10 Website Builders | BESTWeb-Builders4You
Text-based
- Creating_an_HTML_file_MAC (PDF)
- How To Create A Text (TXT) File On A Mac
- Brackets - A modern, open source code editor that understands web design from Adobe.
- Notepad++
- Open Source HTML Editors (Google Search)
- Open Source HTML Editors (Bing Search)
- Mac HTML Web Editors for Beginners (Feb 20, 2020)
- The 4 Best Free Text Editors (Mar 03, 2020)
- 5 Best Free HTML Editor Software Tools for Your Site (Sep. 12, 2019)
- 6 Best Open Source HTML Editors (May 19, 2018)
- 8 Best Free HTML Editors for Windows for 2020 (Mar 05, 2020)
- The Best 10 Free and Open Source HTML Editors (2020)
- 17 Best Free HTML Editors in 2020 (Feb 7, 2020)
Setup & Introduction
Downloading the Class Files
Website Fundamentals
- What are HTML & CSS?
- The structure of an HTML tag
- Graphic file formats (JPEG, PNG, GIF, & SVG)
- File naming conventions
HTML vs. XHTML Syntax
- Differences between HTML & XHTML syntax
Before You Begin
- Choosing a code editor to work in
- Downloading the latest browsers
- Supported browsers
- Required software
- Recommended software
- Installing packages into Sublime Text to boost functionality
Section 1
Setting Up: Do This Before Other Exercises!
- Setting up your class files
Coding Basics: Intro to HTML Syntax
- The HTML, head, title, & body tags
- Headings, paragraphs, & lists
- The strong & em tags
- The doctype
- The lang attribute
- The meta tag & the unicode character set
Coding Links: Absolute & Relative URLs
- Anchor tags & hrefs
- Linking to other websites
- Linking to pages within a website
- Opening a link in a new browser window/tab
Adding Images
- The break tag
- The image tag & source attribute
- Using the width, height, & alt attributes
- Using horizontal rules
Intro to Cascading Style Sheets (CSS)
- The style tag
- Tag selectors
- The font-size, font-family, color, & line-height properties
- Hexadecimal color codes
Section 2
CSS Class Selectors
- The class attribute
- CSS class selectors
- The span tag
- CSS opacity
Div Tags, ID Selectors, & Basic Page Formatting
- Dividing up content with the div tag
- Assigning IDs to divs
- Setting width & max-width
- CSS background-color
- Adding padding inside a div
- Centering content
- CSS borders
- CSS shorthand & the DRY principle
Using Browser Developer Tools
- Opening the DevTools in Chrome
- Editing HTML in the DevTools Elements panel
- Enabling, disabling, & editing CSS in the DevTools
- Using DevTools to fine-tune your CSS
- Hexadecimal shorthand
HTML5 Semantic Elements & Validating HTML
- The outline algorithm
- The header, nav, aside, & footer elements
- Understanding articles & sections
- The main element
- The figure & figcaption elements
- Checking for errors: validating your code
Section 3
Revolution Travel: Page 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 with main element in Internet Explorer
- Setting a default font for the page
- Margin & padding spacing
Floats & Images
- Adding a hero image
- Fluid images
- Floating images
- Class selectors
- Margins
Coding Links: Images & Page Jumps
- Anchor tags & relative URLs
- Wrapping links around images
- External links (using the target attribute)
- Links within a page
Section 4
Styling Links
- Styling the anchor tag
- The :link, :visited, :hover, :focus, & :active pseudo-classes
- Ordering link styles
Styling the Navigation
- Semantically correct navigation
- Overriding default list styles
- CSS navigation styles
- Using descendant selectors
Specificity, Shared CSS, & Centering Content
- CSS specificity
- Overriding other link rules
- Moving embedded styles into an external CSS file
- Sharing styles across a site
- The text-align property
- Centering divs
Setting the Viewport Meta Tag
- Disabling mobile browser text size adjustment
- The viewport meta tag
- device-width
- initial-scale
- maximum-scale
Section 5
Starting a New Site & CSS Background Images
- Setting a default font
- Removing default page margin
- Linking to an external style sheet
- 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 & margin for text legibility
Hipstirred Layout: Fine-Tuning with the Box Model
- Removing the extra space below an image
- Setting a max-width
- Outer & inner wrappers
- The difference between ID & class selectors
CSS Buttons & Floats
- Styling semantically correct navigation
- Floats for layout
- Float insert position
- Vertical alignment & line-height
- Simple CSS buttons
- CSS border-radius
- Reusing class selectors
Section 6
Hipstirred: Hi-Res Images
- Retina or HiDPI graphics (@2x images)
- Setting HTML & CSS size to half the image’s native size
- Code pixels vs. hardware pixels
Uploading to a Live Website via FTP
- Web hosts & domain names
- Things you’ll need to upload a website
- Using an FTP client & going live
Creating Columns (Floats & Clearing)
- Creating a 2-column layout with floats
- Using the clear property
- Adding a border between the columns
- Setting the overflow property to hidden
Introduction to Media Queries
- Finding an appropriate breakpoint
- Using a media query to change the layout at a specific screen size
- Max-width media queries
- Disabling mobile browser text size adjustment
- The viewport meta tag
- Adjusting text size across screens
Bonus Material
Form Basics
- The form tag
- The input & label elements
- The name & ID attributes
- The button element
Submitting Form Data to a Server-Side PHP Script
- Reviewing the PHP code
- Adding a hidden field to point to a landing page
- Setting the form action
- Uploading & testing the form
Spambot-Resistant Email Link
- The mailto protocol for email links
- Why you should avoid mailto
- Using JavaScript to obfuscate an email link
Challenge: Designing Your Own Styles
- Coding CSS
- Tips & ideas
Challenge: Building a Site from Scratch
- Code a small website using provided designs & assets
Reference Material
- Listing on Search Engines
- The Box Model Explained: Padding, Margins, etc.
- Links to Reference Websites, Online Tools, & More