Explore Products

Best Sellers

New Releases

Books

Videos

Audiobooks

Free Learning

The HTML and CSS Workshop

You're reading from The HTML and CSS Workshop Learn to build your own websites and kickstart your career as a web designer or developer

Product type Paperback

Published in Nov 2019

Publisher Packt

ISBN-13 9781838824532

Length 700 pages

Edition 1st Edition

Languages

CSS

Concepts

Web Design

Authors (4):

Matt Park

Brett Jephson

Marian Zburlea

Lewis Coulson

View More author details

Table of Contents (15) Chapters

Preface

1. Introduction to HTML and CSS FREE CHAPTER

2. Structure and Layout

3. Text and Typography

4. Forms

5. Themes, Colors, and Polish

6. Responsive Web Design and Media Queries

7. Media – Audio, Video, and Canvas

8. Animations

9. Accessibility

10. Preprocessors and Tooling

11. Maintainable CSS

12. Web Components

13. The Future of HTML and CSS

Appendix

7. Media - Audio, Video, and Canvas

Activity 7.01: Media Page

Solution

Create an HTML file and name it Activity 7.01.html. Save the following code in the file. This is a copy of the template provided. We have changed the title to Films on Demand – Video Promo:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Films on Demand - Video Promo</title>
        <meta name="description" content="Buy films from our           great selection. Watch movies on demand.">
        <meta name="viewport" content="width=device-width,           initial-scale=1">
        <link href="styles/normalize.css" rel=&quot...

The rest of the chapter is locked

Register for a free Packt account to unlock a world of extra content!

A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.

Unlock this book and the full library FREE for 7 days

Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of

Start free trial

Renews at $19.99/month. Cancel anytime

Authors (4)

Lewis Coulson

Lewis Coulson

Lewis Coulson is a senior frontend developer with over 10 years of commercial experience. He has worked at a range of organizations ranging from creative agencies to government departments.

See other products by Lewis Coulson

Marian Zburlea

Marian Zburlea

Marian Zburlea has been into web developing since 1997. His passion is to innovate and design for the future. He is also a proud mentor who helps the masses to jump-start their web developer career.

See other products by Marian Zburlea

Matt Park

Matt Park

Matt Park has been a web developer since 2007, and has worked for various web agencies around the UK and built many iconic brand websites over the years ranging from startups to large corporations. He currently works as a senior front-end developer for The Constant Media, and is involved with working with many high profile brand websites daily. Striving for pixel perfection, Matt aims to deliver high quality websites while maintaining high coding standards.

See other products by Matt Park

Brett Jephson

Brett Jephson

Brett Jephson is a product engineer specializing in frontend engineering and design systems. He has worked in media, games, and app companies for many years, putting all the latest and greatest web technologies to use in many interesting ways while championing accessibility and good UI.

See other products by Brett Jephson

Other recommended products

Related to this chapter

Getting Started with Web Components

Getting Started with Web Components

Web Components are the set of APIs that helps you build standard UI functions that work across any browser, with any JavaScript framework. This practical guide will help you fulfill this promise through examples and best practices. It will help you implement the web components in your existing frontend application to let you fully realize the capabilities of web components.

Aug 2019 5h 16m

Getting Started with Web Components

Getting Started with Web Components

Web Components are the set of APIs that helps you build standard UI functions that work across any browser, with any JavaScript framework. This practical guide will help you fulfill this promise through examples and best practices. It will help you implement the web components in your existing frontend application to let you fully realize the capabilities of web components.

Aug 2019 5h 16m

Getting Started with Web Components

Getting Started with Web Components

Web Components are the set of APIs that helps you build standard UI functions that work across any browser, with any JavaScript framework. This practical guide will help you fulfill this promise through examples and best practices. It will help you implement the web components in your existing frontend application to let you fully realize the capabilities of web components.

Aug 2019 5h 16m

Getting Started with Web Components

Getting Started with Web Components

Web Components are the set of APIs that helps you build standard UI functions that work across any browser, with any JavaScript framework. This practical guide will help you fulfill this promise through examples and best practices. It will help you implement the web components in your existing frontend application to let you fully realize the capabilities of web components.

Aug 2019 5h 16m

Getting Started with Web Components

Getting Started with Web Components

Web Components are the set of APIs that helps you build standard UI functions that work across any browser, with any JavaScript framework. This practical guide will help you fulfill this promise through examples and best practices. It will help you implement the web components in your existing frontend application to let you fully realize the capabilities of web components.

Aug 2019 5h 16m

Responsive Web Design with HTML5 and CSS

Responsive Web Design with HTML5 and CSS

This book addresses the challenges you face in making your websites responsive across all screen sizes, and trains you to resolve each of those obstacles by efficiently implementing the latest tools in HTML and CSS.

Apr 2020 13h 36m

Responsive Web Design with HTML5 and CSS

Responsive Web Design with HTML5 and CSS

This book addresses the challenges you face in making your websites responsive across all screen sizes, and trains you to resolve each of those obstacles by efficiently implementing the latest tools in HTML and CSS.

Apr 2020 13h 36m

Responsive Web Design with HTML5 and CSS

Responsive Web Design with HTML5 and CSS

This book addresses the challenges you face in making your websites responsive across all screen sizes, and trains you to resolve each of those obstacles by efficiently implementing the latest tools in HTML and CSS.

Apr 2020 13h 36m

Responsive Web Design with HTML5 and CSS

Responsive Web Design with HTML5 and CSS

This book addresses the challenges you face in making your websites responsive across all screen sizes, and trains you to resolve each of those obstacles by efficiently implementing the latest tools in HTML and CSS.

Apr 2020 13h 36m

Responsive Web Design with HTML5 and CSS

Responsive Web Design with HTML5 and CSS

This book addresses the challenges you face in making your websites responsive across all screen sizes, and trains you to resolve each of those obstacles by efficiently implementing the latest tools in HTML and CSS.

Apr 2020 13h 36m

Responsive Web Design with HTML5 and CSS

Responsive Web Design with HTML5 and CSS

This book addresses the challenges you face in making your websites responsive across all screen sizes, and trains you to resolve each of those obstacles by efficiently implementing the latest tools in HTML and CSS.

Apr 2020 13h 36m

Responsive Web Design with HTML5 and CSS

Responsive Web Design with HTML5 and CSS

This book addresses the challenges you face in making your websites responsive across all screen sizes, and trains you to resolve each of those obstacles by efficiently implementing the latest tools in HTML and CSS.

Apr 2020 13h 36m

Personalised recommendations for you

Based on your interests and search pattern

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Mastering Node.js Web Development

Mastering Node.js Web Development

Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.

Jun 2024 25h 56m

Mastering Node.js Web Development

Mastering Node.js Web Development

Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.

Jun 2024 25h 56m

Mastering Node.js Web Development

Mastering Node.js Web Development

Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.

Jun 2024 25h 56m

Mastering Node.js Web Development

Mastering Node.js Web Development

Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.

Jun 2024 25h 56m