HTML & CSS QuickStart Guide

The Simplified Beginners Guide to Developing a Strong Coding Foundation, Building Responsive Websites, and Mastering the Fundamentals of Modern Web Design

David DuRocher

• Publisher: ClydeBank Media LLC
• Year: 2021
• ISBN:
  9781636100029
• Topic: Computer Science
• Subtopic: Programming in HTML
• Index: Computer Science

Master HTML and CSS fundamentals to create beautiful websites.

**Includes FREE Digital Bonuses! Github Repository, HTML & CSS Cheat Sheets, and More!**

Learn Why QuickStart Guides are Loved by Over 1 Million Readers Around the World

The same book currently in used in college-level courses while remaining approachable for beginners!

Anyone, at any stage of their lives, can learn to code. HTML and CSS are the perfect starting point on that journey—easy to learn, easy to implement, HTML & CSS open the door to a world of coding possibilities.

The Easiest Way to Learn HTML & CSS in a Comprehensive, Step-by-Step Guide

Every one of the over 4 billion webpages online today use HTML markup language to display its content. HTML is everywhere.

Experienced developers know that a mastery of HTML and CSS fundamentals is not only an essential web design skill, but also the solid foundation of a robust coding skillset.

In HTML & CSS QuickStart Guide author, instructor, and 10+ year Fortune 500 tech company veteran David DuRocher breaks down HTML5 and CSS3 fundamentals manageable, practical, and engaging segments designed for first-time developers.

Written by a Web Design Expert with Over 15 Years of Experience

David's unique and engaging approach to teaching HTML and CSS principles means that readers are ready to start designing from the very first chapter without enduring an avalanche of boring jargon or dry technobabble.

No matter whether you are a student, jobseeker looking to improve your resume, freelancer, designer, experienced developer, or just someone who wants to create their own website from scratch, everything you need to know is right here in this book!

HTML & CSS QuickStart Guide Is Perfect For:

• Jobseekers looking to increase the value of their resume
• WordPress, Shopify, and Squarespace users who want to tweak templates and make them their own
• Anyone who wants to create attractive, responsive, and modern websites with no prior experience needed

HTML & CSS QuickStart Guide Covers:

• HTML and CSS for Beginners – all of the core HTML and CSS fundamentals you need to know in one place
• HTML tags, CSS elements, CSS styling, and exactly how to fit the pieces together
• Futureproofing – how to design sites that look great on any browser, any device

With HTML & CSS QuickStart Guide, You'll Easily Understand These Crucial Concepts:

• Modern Web Design Fundamentals – How to use the powerful combination of HTML5 and CSS3 to build functional and responsive web pages
• Site Structure and Responsive Design Principles – How to format HTML and CSS markup to produce attractive web sites and web pages.
• Breathing Life Into Your Projects – How to incorporate forms, multimedia elements, special characters and more into your web projects
• Correct Markup Best Practices – Learn to produce clean, professional HTML documents using industry-standard tools such as GitHub
• HTML and CSS for Beginners – HTML and CSS elements, formatting, padding, gradients, menus, testing, debugging, and more— all supported with abundant visual examples and a practical hands-on project!

*LIFETIME ACCESS TO FREE HTML & CSS DIGITAL BONUSES*

HTML & CSS QuickStart Guide comes with lifetime access to FREE digital resources you can access from inside the book! Each of these bonuses is crafted with our expert author to help you become a better programmer including:

• Github Repository Access & Hands-on Exercises
• Web Design Resource Library
• HTML & CSS Cheat Sheets and more!

PART I

SETTING THE STAGE

| 1 |

The Basics and the Bigger Picture

Chapter Overview

• HTML and CSS power the web.
• HTML, CSS, and JavaScript are frontend languages.
• You must understand your audience.

HTML, or hypertext markup language, is the markup language that makes the web work. In other words, all web pages on the internet use HTML. When you access a web page, your web browser is interpreting a text file written in HTML that contains a set of instructions for formatting the content of the page so a human can read it. The earliest web browsers could only read HTML. In fact, the very earliest ones did not even have a graphical component; they were text-only and could be viewed only in command-line-based operating systems. Obviously, much has changed since the early days of command-line operating systems and HTML-only web pages. HTML now lives in a broader online ecosystem with other languages, online content management systems, and website search engines and aggregators. Let’s explore this ecosystem in more detail.

HTML and CSS Basic Structure

No matter how complicated or fancy a website looks, at its core is HTML. In your web browsing experience, you may have (either accidentally or intentionally) clicked on a button that allowed you to view the source of a website’s code. That code may have looked like gibberish to you then, but by the time you finish this text, you will be able to identify elements of HTML and CSS within code. Although we will cover HTML and CSS syntax in much greater detail later, it is important for now that you be able to identify the basic building blocks of both HTML and CSS, as we will be referring to these features quite often. Let’s get a sneak preview of what HTML and CSS look like on some simplified web pages.

HTML Structure

HTML defines the basic structure of a web page. It provides additional formatting and organization information about the content of a website, no matter if that content is text, images, videos, tables, or data entry forms. Much of this process involves giving instructions to the browser, such as “this is a header,” “this is a paragraph,” “this is a link,” etc. (figure 10).

Think in Terms of Elements

Each browser instruction written in HTML takes the form of an element. An element is the basic building block of HTML; it is fair to think of elements as the basic building blocks of any web page (figure 11).

Each element begins with an opening tag and ends with a closing tag. The tag performs two key functions: it defines the starting point and stopping point of each element, and it defines the element type.

The basic structure of an HTML element

In figure 12, we can see that the tag <h1> defines a heading. All tags are encased in angle brackets <> with the closing tag having a forward slash / to denote the end of the element. All text inside these tags is considered part of that element.

CSS Structure

As you know, most web pages, when viewed through a browser, include much more than basic text. Modern websites employ creative formatting, color, navigation menus, and more. The look and feel of the internet are guided by an additional set of instructions handed to the browser, which tell it how to display the text formatted by the HTML. These instructions have been given by a different but dependent language: CSS, or Cascading Style Sheets. CSS tells the browser to display not only the basic structure of the content...

Table of contents

• HTML & CSS - QuickStart Guide
• Introduction
• PART I - SETTING THE STAGE
• PART II - DIGGING IN
• PART III - ADVANCED
• PART IV - THE WORK ENVIRONMENT
• Conclusion
• Explore More ClydeBank Media
• Appendix I - Web Hosting
• Appendix II - FTP
• Appendix III - Sizing Units
• Appendix IV - Open Graph / Metadata
• Appendix V - Coffee Shop Solutions
• About the Author
• About ClydeBank Media
• Glossary
• References
• Copyright