Yelp Facebook LinkedIn YouTube Twitter Instagram

Step-by-Step Training Workbook

Web Development Level 1 Book

Build Websites with HTML & CSS

Web development level1 v2.2 2x

Buy the workbook

This book comes free with our Web Development Level 1 class

You write HTML and CSS code to create webpages. In this book we’ll introduce you to what HTML and CSS are and how to code. Using HTML, you’ll learn how to create webpages with text, images, and more. With CSS you’ll style the content, create centered page layouts, add background images, style navigation, and make the page responsive so it adapts to various screen sizes using media queries. To make the site go live you’ll upload files via FTP. We provide you with prepared content (text and images) so you can focus on the coding. In this training you’ll get hands-on practice coding websites from scratch, all the way through uploading to make the site live. This course workbook can be completed in any code editor.

Includes Downloadable Class Files (works on Mac & PC)
ISBN: 978-1-941333-54-9

Download Sample Exercise
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

How our eBooks Work Buying eBooks for Someone Else

Features of Noble Desktop eBooks
  • Searchable, with live text that you can copy and paste.
  • Printable.
  • eBook graphics are in color (printed books are black and white).
  • Widely compatible: We provide the most common eBook formats (EPUB, MOBI, & PDF) so you can load them onto the device or app you choose; such as Mac, PC, iPhone, iPad, Kindle, Android, and more.
  • Free updates for the edition you buy. When we make major changes to a book (requiring a new edition), an affordable upgrade option will be available.
  • DRM-free: Files are subtly watermarked with your name and email, but we do not restrict the devices or apps you can use to view our eBooks.
  • Lifetime access to downloads from free your Noble Desktop account.
The Best Way to Enjoy Our Books

Our workbooks are meant to be used while you work on your computer. They typically contain step-by-step exercises that walk you through doing tasks on your computer. An ideal setup would be to have the eBook loaded onto a device (like a tablet/smartphone) or on a second computer monitor, so you can read the book as you work on your computer. You can also print the PDF if you prefer.

Which File Format Is Right for You?
PDF
  • Ideal for printing.
  • An exact match to the printed book. If the text reflow of an EPUB or MOBI file is confusing please refer to the PDF.
  • PDF is compatible with most devices, but it’s not optimized for small screens. If using a smaller screen you’ll likely want to use the EPUB or MOBI files.
EPUB
  • The industry standard eBook format which works with all devices, except for the Amazon Kindle. EPUB can be read on Mac, PC, iPhone, iPad, iPod Touch, Nook, Sony Reader, Kobo, Android, and many more.
  • Ideal for smaller screens as the layout reflows to fit the current device (at the type size of your choice).
MOBI (Kindle)
  • Amazon’s format for Kindle devices and Kindle app.
  • Ideal for smaller screens as the layout reflows to fit the current device (at the type size of your choice).
  • Using an iOS Device such as iPhone & iPad? The Kindle app for Apple iOS devices requires a specialized format which we do not support. While our MOBI will work in the Kindle app, it will not render well on iOS devices. We recommend using the EPUB format with Apple’s iBooks app if reading on an iOS device.
Recommended Reading Apps
iPhone, iPad
  • iBooks (EPUB)
Mac
Windows PC
Android
Can You Share the eBook or Printouts?

Noble Desktop books are intended for use by you, the owner. They are not intended to be loaned or given to others. The files are subtly watermarked with your name and email, but we do not apply any DRM. You can copy your eBooks to any of your own devices without restriction. You can print the PDF files for your own use, but not to give to others. You cannot sell used eBooks. Ownership is solely yours and cannot be transferred to someone else.

Teachers and training centers wishing to print copies for students should email for licensing options and pricing.

Buying an eBook for Someone Else
  • When you buy an eBook for yourself, it will be added into your account. It will be watermarked with your information and is intended for use only by you.
  • You can purchase eBooks for someone else, such as a friend or colleague. Schools and training centers can purchase eBooks for their students (be sure to apply for teacher pricing).
  • When buying eBooks for someone else, you will receive an eBook voucher code. Send that code to the recipient and they can redeem it. An eBook voucher code can be redeemed once, for the specific book you purchase for them.
  • The recipient of the eBook voucher code will need to log into their Noble Desktop account, or create a free account. In their account they will enter the code on their My eBooks page and the eBook will be added immediately into their account.
  • The recipient receives all the same benefits of Noble Desktop eBooks, which includes lifetime access to download their eBook, as well as free updates to that edition. When the next edition is released, an affordable upgrade option will be available to them.

Examples of What You Learn

  • Coffee website coded with background images and icons

    Use HTML & CSS to code layouts with images, text, links, call-to-action buttons, and more.

  • Travel website coded to be responsive on mobile

    Create fluid layouts that work across devices.

  • Registration form coded with HTML and CSS

    Learn to use the DevTools built into web browsers to inspect and experiment with code.

  • Travel website coded with HTML and CSS

    Use CSS to style content and lay out pages.

Why Our Books Are Unique

Our books are packed with step-by-step exercises that walk you through projects. You’ll learn by doing exercises, not reading long explanations. The goal is to give you hands-on practice with the program, getting you started quickly with the things that are most important for real life work.

Buy the Web Development Level 1 Book

This book comes free with our Web Development Level 1 class