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.

The best book on the market for modern web design fundamentals!

The same book currently in used in college-level courses while remaining approachable for beginners! 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 into manageable, practical, and engaging segments designed for first-time developers. 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. Use the enclosed bonus digital asset access to go beyond the book with your own hands-on project, GitHub code repository, online tools, resources, and more! 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! Truly 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. HTML & CSS QuickStart Guide Is Perfect For:

• Jobseekers looking to increase the value of their resume
• Artists, bloggers, and digital entrepreneurs who want to customize their web presence
• 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
• Formatting, sizing, fonts, images, multimedia, forms, sprites, and gradients – all of the tools you need to make your website 100% your own!

HTML and CSS QuickStart Guide Will Teach You:

• 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 that look great on any browser and any device.
• 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 AND CSS DIGITAL ASSETS*

• A complete hands-on project using an industry-standard GitHub code repository along with a complete online HTML, CSS, and web design resource library, web development 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...