The HTML and CSS Workshop: A New, Interactive Approach to Learning HTML and CSS

Master HTML and CSS to create modern, stylish, and responsive websites with the help of real-world examples and hands-on activitiesKey FeaturesLearn HTML and CSS to produce highly functional and appealing websitesOvercome common challenges in web design and developmentEnsure that your websites are accessible and engaging on all devicesBook DescriptionWith 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.What you will learnUnderstand how websites are built, structured, and styledMaster the syntax and structure of HTML and CSSKnow how to build websites from scratch using HTML5 and CSS3Create intuitive forms that allow users to input dataStyle your website by integrating videos, animations, and themesDesign robust websites that work on all modern devices seamlesslyDiscover how to maintain and improve the performance of a websiteWho this book is 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. Cover FM Copyright Table of Contents Preface Chapter 1: Introduction to HTML and CSS Introduction HTML Syntax Content Types The HTML Document The HTML DOM The Doctype Declaration Structuring an HTML Document HTML Head Body Our First Web Page Exercise 1.01: Creating a Web Page Metadata Exercise 1.02: Adding Metadata Mistakes in HTML Validating HTML Exercise 1.03: Validation Exercise 1.04: Validation Errors Activity 1.01: Video Store Page Template CSS Syntax Adding Styles to a Web Page Exercise 1.05: Adding Styles Exercise 1.06: Styles in an External File CSSOM CSS Selectors Element, ID, and Class The Universal Selector (*) Attribute Selectors Pseudo-classes Pseudo-elements Combining Selectors Exercise 1.07: Selecting Elements CSS Specificity The Special Case of !important Activity 1.02: Styling the Video Store Template Page Dev Tools The Top Bar The Elements Tab How a Web Page Renders Summary Chapter 2: Structure and Layout Introduction Structural Elements The header Tag The footer Tag The section Tag The article Tag The nav Tag The aside Tag The div Tag A News Article Web Page Exercise 2.01: Marking up the Page Wireframes Activity 2.01: Video Store Home Page CSS Page Layouts Video Store Product Page Float-Based Layouts The float Property The width Property Clearing Floated Elements Flex-Based Layouts The flex Container The flex Items Grid-Based Layouts The grid Container The grid Items Exercise 2.02: A grid-Based Layout The Box Model Content Box The padding Property The border Property The margin Property Exercise 2.03: Experimenting with the Box Model Putting It All Together Exercise 2.04: Home Page Revisited Exercise 2.05: Video Store Product Page Revisited Activity 2.02: Online Clothes Store Home Page Summary Chapter 3: Text and Typography Introduction Text-Based Elements Headings Paragraphs Inline Text Elements Lists Exercise 3.01: Combining Text-Based Elements Semantic Markup Styling Text-Based Elements CSS Resets CSS Text Properties CSS Font Properties The display Property Video Store Product Page (Revisited) Exercise 3.02: Navigation Breadcrumbs Exercise 3.03: Breadcrumb Exercise 3.04: Page Heading and Introduction Exercise 3.05: Product Cards Activity 3.01: Converting a Newspaper Article to a Web Page Summary Chapter 4: Forms Introduction Form Elements The form Element The input Element The label Element The textarea Element The fieldset Element The select Element The button Element Exercise 4.01: Creating a Simple Form Styling Form Elements Label, Textbox, and Textarea Buttons Select Boxes Validation Styling Exercise 4.02: Creating a Form with Validation Styling Video Store Forms Exercise 4.03: New Account Signup Form Exercise 4.04: Checkout Form Activity 4.01: Building an Online Property Portal Website Form Summary Chapter 5: Themes, Colors, and Polish Introduction The Markup Inverting Colors New HTML Elements in the Theme New CSS Background Properties Exercise 5.01: Creating a Dark Theme Creating a Dark Theme with the HSL Function Exercise 5.02: Creating a Dark Theme Using hsl() CSS Invert Filter Exercise 5.03: Creating a Dark Theme with the CSS Invert Filter CSS Hooks Exercise 5.04: Customizing a Theme with CSS Hooks Activity 5.01: Creating Your Own Theme Using a New Color Palette Summary Chapter 6: Responsive Web Design and Media Queries Introduction Mobile-First Responsive Web Design Responsive Viewport Understanding Basic Media Queries Exercise 6.01: Using Media Queries to Change the Page Layout Device Orientation Media Queries Exercise 6.02: Using Media Queries to Detect Device Orientation Combining Multiple Media Queries Print Stylesheets Exercise 6.03: Generating a Printable Version of a Web Page Using CSS Media Queries Activity 6.01: Refactoring the Video Store Product Cards into a Responsive Web Page Summary Chapter 7: Media – Audio, Video, and Canvas Introduction Audio Exercise 7.01: Adding Audio to a Web Page Attributes The Autoplay Attribute The preload Attribute The loop Attribute The controls Attribute Styling Audio Controls Exercise 7.02: Styling Controls Multiple Sources The video Element Attributes The width and height Attributes The poster Attribute Exercise 7.03: Adding Video to a Web Page Limitations The track Element Adding Subtitles Exercise 7.04: Adding Subtitles Images The img Element The picture Element Programmable Graphics The svg Element The canvas Element Exercise 7.05: Drawing Shapes Gradients Exercise 7.06: Gradients Animating a Canvas Exercise 7.07: Animated canvas Activity 7.01: Media Page Summary Chapter 8: Animations Introduction CSS Transitions Exercise 8.01: Implementing Our First Simple Animation Exercise 8.02: Enhanced Control in CSS Transitions Exercise 8.03: CSS Transition Performance Exercise 8.04: CSS Transition with Multiple Values Advanced CSS for Animations CSS Positioning Overflow Opacity Blur Inserting Content with attr() Exercise 8.05: Animating a Website Menu Transition Duration Sweet Spot Slowing Animations Down Animation Acceleration and Deceleration Keyframe Animations in CSS Using the CSS Animation Property Exercise 8.06: CSS Preloader Using Keyframes More CSS Tips and Tricks Activity 8.01: Animating Our Video Store Home Page Summary Chapter 9: Accessibility Introduction What Is Accessibility? Accessible Images Exercise 9.01: Accessible Ratings Semantic HTML Accessible Forms Exercise 9.02: Accessible Signup Form Keyboard Accessibility Accessible Motion Accessibility Tools Axe Tool Exercise 9.03: Using Axe Activity 9.01: Making a Page Accessible Summary Chapter 10: Preprocessors and Tooling Introduction to CSS Preprocessors Getting Started with Node.js, npm, and SASS SCSS Introduction Exercise 10.01: Using SCSS Variables Nesting in SCSS Exercise 10.02: Rewriting Existing CSS with Nested SCSS Import, Control Directives, and Mixins in SCSS Exercise 10.03: Using SCSS Mixins and Control Directives Loops in SCSS Exercise 10.04: Loops in SCSS Activity 10.01: Converting the Video Store Home Page into SCSS Summary Chapter 11: Maintainable CSS Introduction to Maintainable CSS Block, Element, and Modifier Block Element Modifier Exercise 11.01: Using BEM Markup Using BEM Markup with SCSS Exercise 11.02: Applying SCSS to BEM Structuring Your SCSS into Maintainable Files Exercise 11.03: Using Structured SCSS Files Good Practices for Maintainable CSS Activity 11.01: Making Our Video Store Web Page Maintainable Summary Chapter 12: Web Components Introduction Custom Elements The define Method Naming Conventions Unique Names Extends HTMLElement Exercise 12.01: Creating a Custom Element Behavior of a Custom Element Exercise 12.02: Adding and Using Custom Elements with Attributes Custom Element Life Cycle Exercise 12.03: Custom Element Life Cycle Extending a Built-in Element Exercise 12.04: Custom Element Extending HTMLAnchorElement Shadow DOM Attaching a Shadow DOM Inspecting the Shadow DOM Exercise 12.05: Shadow DOM with a Custom Element HTML Templates Exercise 12.06: Templates Creating a Web Component Activity 12.01: Creating a Profile Sharing a Web Component Summary Chapter 13: The Future of HTML and CSS Introduction Keeping up with the Web Chrome Canary Experimental Flags Browser Vendor Status Caniuse Exercise 13.01: Verifying Browser Support for Web Pages Created Using CSS Grid CSS Houdini CSS Paint API Exercise 13.02: Creating a Red Fill Paint Worklet Custom Properties Exercise 13.03: The Fill Color Paint Worklet Input Properties Exercise 13.04: Paint Worklet with Mouse Input CSS Properties and Values API Animating Custom Properties Exercise 13.05: Animating a Paint Worklet Current Browser Support Progressive Enhancement Exercise 13.06: Progressive Enhancement Activity 13.01: Button Library Summary Appendix Index !!!!!!!!!!!!!!!!!!!! wooh! took a lot of time to hack the packet website and get the damn book without paying :) Cut through the noise and get real results with a step-by-step approach to learning HTML and CSS programming Key Features An HTML and CSS tutorial with step-by-step exercises and activities Structured to let you progress at your own pace, on your own terms Use your physical print copy to redeem free access to the online interactive edition Book Description You already know you want to learn HTML and CSS, and a smarter way to learn HTML and CSS is to learn by doing. The HTML and CSS Workshop focuses on building up your practical skills so that you can build your own static web pages from scratch, or work with existing themes on modern platforms like WordPress and Shopify. It's the perfect way to get started with web development. You'll learn from real examples that lead to real results. Throughout The HTML and CSS Workshop, you'll take an engaging step-by-step approach to beginning HTML and CSS development. You won't have to sit through any unnecessary theory. If you're short on time you can jump into a single exercise each day or spend an entire weekend learning about CSS pre-processors. It's your choice. Learning on your terms, you'll build up and reinforce key skills in a way that feels rewarding. Every physical print copy of The HTML and CSS Workshop unlocks access to the interactive edition. With videos detailing all exercises and activities, you'll always have a guided solution. You can also benchmark yourself against assessments, track progress, and receive free content updates. You'll even earn a secure credential that you can share and verify online upon completion. It's a premium learning experience that's included with your printed copy. To redeem, follow the instructions located at the start of your HTML CSS book. Fast-paced and direct, The HTML and CSS Workshop is the ideal companion for a HTML and CSS beginner. You'll build and iterate on your code like a software developer, learning along the way. This process means that you'll find that your new skills stick, embedded as best practice. A solid foundation for the years ahead. What you will learn Get to grips with the key features of HTML5 and CSS3 Learn how to integrate animation, media, and custom themes Understand how you can easily customize and maintain CSS Develop your own mobile-first approach while designing websites Learn how to diagnose and resolve common style and structural problems Who this book is for Our goal at Packt is to help you be successful, in whatever it is ..