Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
The HTML and CSS Workshop
The HTML and CSS Workshop

The HTML and CSS Workshop: Learn to build your own websites and kickstart your career as a web designer or developer

Arrow left icon
Profile Icon Lewis Coulson Profile Icon Marian Zburlea Profile Icon Matt Park Profile Icon Brett Jephson
Arrow right icon
$17.99 $26.99
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.3 (7 Ratings)
eBook Nov 2019 700 pages 1st Edition
eBook
$17.99 $26.99
Paperback
$38.99
Subscription
Free Trial
Renews at $19.99p/m
Arrow left icon
Profile Icon Lewis Coulson Profile Icon Marian Zburlea Profile Icon Matt Park Profile Icon Brett Jephson
Arrow right icon
$17.99 $26.99
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.3 (7 Ratings)
eBook Nov 2019 700 pages 1st Edition
eBook
$17.99 $26.99
Paperback
$38.99
Subscription
Free Trial
Renews at $19.99p/m
eBook
$17.99 $26.99
Paperback
$38.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Product feature icon AI Assistant (beta) to help accelerate your learning
Table of content icon View table of contents Preview book icon Preview Book

The HTML and CSS Workshop

2. Structure and Layout

Overview

By the end of this chapter, you will be able to use the correct HTML5 elements to markup a web page; style a web page using float, flex, and grid layouts; describe how the box model works; and build a home page and a product page layout. This chapter introduces the essential HTML elements that are required in order to build a web page. Finally, this knowledge will be utilized by carrying out a number of exercises to create a few well-structured web pages.

Introduction

In the previous chapter, we learned about the basics of HTML and CSS. In this chapter, we will consolidate this basic understanding and look at how web pages are structured with HTML and CSS. When creating web pages using HTML, it is imperative that you use the correct elements. This is because HTML is read by both humans and machines, and so the content of a web page should be associated with the most appropriate element. Additionally, any error in the code might be difficult to track if the code base is too large.

The HTML language offers a vast array of different tags that we can place at our disposal. In this chapter, we will focus on the structural elements that are used to divide the web page up into its key parts. You may be familiar with the concept of a page header or footer, and these would be examples of structural elements. We will be looking at these amongst many other HTML structural elements.

In this chapter, we will focus our attention on the HTML5...

Summary

In this chapter, we have begun our journey into building web pages. Knowing the range of HTML tags available to you is crucial in writing well-formed HTML documents. These include header, footer, and section tags.

You should now feel comfortable taking a visual design or wireframe and converting this into the skeleton of an HTML document. We also looked at three common ways of styling a page layout with CSS. These involved the use of float-, flex-, and grid-based layout techniques. We then looked into what makes up the box model and used this knowledge to build the home and product pages of the video store.

In the next chapter, we will learn about the non-structural HTML elements used for content on a web page. We will then look into a number of common styling approaches to these elements using CSS.

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • Learn HTML and CSS to produce highly functional and appealing websites
  • Overcome common challenges in web design and development
  • Ensure that your websites are accessible and engaging on all devices

Description

With knowledge of CSS and HTML, you can build visually appealing, interactive websites without relying on website-building tools that come with lots of pre-packaged restrictions. The HTML and CSS Workshop takes you on a journey to learning how to create beautiful websites using your own content, understanding how they work, and how to manage them long-term. The book begins by introducing you to HTML5 and CSS3, and takes you through the process of website development with easy-to-follow steps. Exploring how the browser renders websites from code to display, you'll advance to adding a cinematic experience to your website by incorporating video and audio elements into your code. You'll also use JavaScript to add interactivity to your site, integrate HTML forms for capturing user data, incorporate animations to create slick transitions, and build stunning themes using advanced CSS. You'll also get to grips with mobile-first development using responsive design and media queries, to ensure your sites perform well on any device. Throughout the book, you'll work on engaging projects, including a video store home page that you will iteratively add functionality to as you learn new skills. By the end of this Workshop, you'll have gained the confidence to creatively tackle your own ambitious web development projects.

Who is this book for?

Ideal for beginners, this Workshop is designed for anyone who is new to HTML and CSS who wants to learn to design and maintain their own websites.

What you will learn

  • Understand how websites are built, structured, and styled
  • Master the syntax and structure of HTML and CSS
  • Know how to build websites from scratch using HTML5 and CSS3
  • Create intuitive forms that allow users to input data
  • Style your website by integrating videos, animations, and themes
  • Design robust websites that work on all modern devices seamlessly
  • Discover how to maintain and improve the performance of a website

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Nov 28, 2019
Length: 700 pages
Edition : 1st
Language : English
ISBN-13 : 9781838828134
Languages :
Concepts :

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Product feature icon AI Assistant (beta) to help accelerate your learning

Product Details

Publication date : Nov 28, 2019
Length: 700 pages
Edition : 1st
Language : English
ISBN-13 : 9781838828134
Languages :
Concepts :

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total $ 145.97
The Python Workshop
$62.99
The JavaScript Workshop
$43.99
The HTML and CSS Workshop
$38.99
Total $ 145.97 Stars icon

Table of Contents

13 Chapters
1. Introduction to HTML and CSS Chevron down icon Chevron up icon
2. Structure and Layout Chevron down icon Chevron up icon
3. Text and Typography Chevron down icon Chevron up icon
4. Forms Chevron down icon Chevron up icon
5. Themes, Colors, and Polish Chevron down icon Chevron up icon
6. Responsive Web Design and Media Queries Chevron down icon Chevron up icon
7. Media – Audio, Video, and Canvas Chevron down icon Chevron up icon
8. Animations Chevron down icon Chevron up icon
9. Accessibility Chevron down icon Chevron up icon
10. Preprocessors and Tooling Chevron down icon Chevron up icon
11. Maintainable CSS Chevron down icon Chevron up icon
12. Web Components Chevron down icon Chevron up icon
13. The Future of HTML and CSS Chevron down icon Chevron up icon

Customer reviews

Top Reviews
Rating distribution
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.3
(7 Ratings)
5 star 42.9%
4 star 14.3%
3 star 0%
2 star 14.3%
1 star 28.6%
Filter icon Filter
Top Reviews

Filter reviews by




Andrew Lavine Aug 22, 2020
Full star icon Full star icon Full star icon Full star icon Full star icon 5
good textbook for a beginner comp sci course
Amazon Verified review Amazon
Joseph R. Orlando Mar 08, 2020
Full star icon Full star icon Full star icon Full star icon Full star icon 5
A pragmatic, thoughtful and superb presentation. This volume provides a map of novel applications of the CSS and HTLM Paradigm.
Amazon Verified review Amazon
Retired Husband Feb 19, 2021
Full star icon Full star icon Full star icon Full star icon Full star icon 5
This is an excellent advanced web programming book. So far, I'm using it as a reference. It could also be used in a classroom. I'm glad I bought the Kindle version so I can search instantly. Yes, I recommend it.
Amazon Verified review Amazon
William Hall Mar 06, 2021
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
The Packt HTML and CSS Workshop is a great reference book for both beginners and experienced web designers and developers. It is chock full of information,including many activities to immerse yourself fully in coding your own site. The CSS section covers all you need to know about CSS, the box model, and flexand grid layouts. Many people, myself included, like to skip wireframing altogether, but thought it is very basic, it is also very needed to know where youare heading with the layout and design. There is a small section on wireframing in this book, which is helpful in reminding me to always mock up my sites.Other sections of the book cover text, fonts, media queries for mobile, media, audio and video, and animations. Another critical aspect of good design isaccessibilty, and the book covers that as well. I thought the book was, overall, very helpful and informative for anyone with a desire to learn HTML and CSS,and the art of creating not only great looking, but also functional websites and apps.
Amazon Verified review Amazon
turnabout Mar 31, 2020
Full star icon Full star icon Empty star icon Empty star icon Empty star icon 2
Learning HTML and CSS together makes sense and helps to ease the boredom of starting with only HTML. The topic content is kept to a tolerable level and exercises seem to be presented just in time to break up any monotony.Additionally, the exercises are written to make one think, as there is very minimal hand-holding (thank you!). After all, who wants to just "type what I tell you?" End of chapter Activities build upon what was taught by challenging one to perform the task by presenting the final output and listing only general tasks to reach the goal. Solutions are thoughtfully provided in case one is stuck working on an activity.I suggest using Mozilla Developer Network (MDN) searches to work through any ambiguities, errors, or missing content that one will encounter, or to just reinforce a topic.The Video Store activity is interesting, but I wish it was presented more cohesively — as a main project — throughout the book.There was Javascript — and way too much of it in what was expected to be an introduction to HTML and CSS. Please, save the Javascript for a different book!Also, too little training was provided on the basics of colors. I would highly recommend that Chapter 5: Themes, Colors, and Polish be replaced with something more to the point of the discussion of colors. This chapter was too complicated and seemed as if the author just wanted to plug his site or otherwise show readers his Wordpress prowess.My personal recommendation for the 2nd Edition is to remove Chapters 10, 11, 12, and 13 (those belong in an Advanced CSS/SCSS publication); replace Chapter 5 with a simpler discussion of colors; eliminate the Canvas topic from Chapter 7 and rewrite other sections of the chapter as needed to remove Javascript usage.This recommendation would allow for the expansion of the other chapters by allowing the addition of more exercises and explanatory text. Also, explanatory comments within the code samples would be welcomed.Hopefully, the 2nd Edition will focus more on HTML and CSS as "Ideal for those who are looking to get started," and less on Javascript.
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.