Search icon Close icon
Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Checkout

Change country

Modal Close icon
Country selected Country selected
country flag United States
Country selected
country flag Great Britain
Country selected
country flag India
Country selected
country flag Germany
Country selected
country flag France
Country selected
country flag Canada
Country selected
country flag Russia
Country selected
country flag Spain
Country selected
country flag Brazil
Country selected
country flag Australia
Country selected
country flag Singapore
Country selected
country flag Hungary
Country selected
country flag Ukraine
Country selected
country flag Luxembourg
Country selected
country flag Estonia
Country selected
country flag Lithuania
Country selected
country flag South Korea
Country selected
country flag Turkey
Country selected
country flag Switzerland
Country selected
country flag Colombia
Country selected
country flag Taiwan
Country selected
country flag Chile
Country selected
country flag Norway
Country selected
country flag Ecuador
Country selected
country flag Indonesia
Country selected
country flag New Zealand
Country selected
country flag Cyprus
Country selected
country flag Denmark
Country selected
country flag Finland
Country selected
country flag Poland
Country selected
country flag Malta
Country selected
country flag Czechia
Country selected
country flag Austria
Country selected
country flag Sweden
Country selected
country flag Italy
Country selected
country flag Egypt
Country selected
country flag Belgium
Country selected
country flag Portugal
Country selected
country flag Slovenia
Country selected
country flag Ireland
Country selected
country flag Romania
Country selected
country flag Greece
Country selected
country flag Argentina
Country selected
country flag Netherlands
Country selected
country flag Bulgaria
Country selected
country flag Latvia
Country selected
country flag South Africa
Country selected
country flag Malaysia
Country selected
country flag Japan
Country selected
country flag Slovakia
Country selected
country flag Philippines
Country selected
country flag Mexico
Country selected
country flag Thailand
Country selected
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
Home > Web Development > Front End Web Development > Modern HTML & CSS From The Beginning 2.0
Modern HTML & CSS From The Beginning 2.0
Modern HTML & CSS From The Beginning 2.0

Modern HTML & CSS From The Beginning 2.0: Build responsive websites with HTML and CSS - Learning modules, mini-projects and 3 full websites , Second Edition

Arrow left icon
Profile Icon Brad Traversy
Arrow right icon
Mex$179.99 Mex$2051.99
Full star icon Full star icon Full star icon Full star icon Full star icon 5 (2 Ratings)
Video Jul 2024 24hrs 19mins 2nd Edition
Video
Mex$179.99 Mex$2051.99
Subscription
Free Trial
Arrow left icon
Profile Icon Brad Traversy
Arrow right icon
Mex$179.99 Mex$2051.99
Full star icon Full star icon Full star icon Full star icon Full star icon 5 (2 Ratings)
Video Jul 2024 24hrs 19mins 2nd Edition
Video
Mex$179.99 Mex$2051.99
Subscription
Free Trial
Video
Mex$179.99 Mex$2051.99
Subscription
Free Trial

What do you get with a video?

Product feature icon Download this video in MP4 format
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
OR

Contact Details

Modal Close icon
Payment Processing...
tick Completed

Billing Address

Table of content icon View table of contents Download code icon Download Code

Key benefits

  • Detailed explanations of Flexbox, Grid, and responsive design
  • Real-world projects for portfolio building
  • Deployment guidance with Git, GitHub, and hosting services

Description

In the revamped 2024 edition of Modern HTML & CSS From the Beginning, you'll embark on a transformative journey through web development. Starting with the basics, you'll gain a solid understanding of HTML and CSS, exploring their roles and how they work together to create web pages. The course includes essential tools like VS Code and practical techniques using live server and Prettier for an optimized development environment. As you progress, you'll delve into more complex HTML elements and CSS properties, mastering the box model, positioning, and responsive design. Special sections on Flexbox and CSS Grid will revolutionize the way you approach layouts, while advanced topics like transitions, animations, and a touch of JavaScript will elevate your web pages to professional standards. Each section is paired with hands-on projects, ensuring you apply what you learn in real-world scenarios. By the end of the course, you'll have built multiple projects, including a creative website and a tutor website, incorporating accessibility features and deploying your sites using Git, GitHub, and hosting platforms like Netlify and Vercel. This course is designed for both newcomers to web development and seasoned professionals seeking to update their skills with the latest industry standards.

Who is this book for?

This course is designed for aspiring web developers, front-end developers looking to deepen their knowledge, and anyone interested in building websites from scratch. No prior experience is necessary, but a basic understanding of computers and the internet is recommended.

What you will learn

  • Build well-formed HTML documents with proper tags and attributes.
  • Design visually appealing web pages using CSS to control layout, colors, fonts, and more.
  • Implement responsive design principles on websites.
  • Utilize advanced CSS features like Flexbox, Grid, animations, and transitions.
  • Create fully functional web projects and deploy them online.
  • Integrate accessibility best practices to make web content accessible to all users.

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Jul 02, 2024
Length: 24hrs 19mins
Edition : 2nd
Language : English
ISBN-13 : 9781835880562
Category :
Web Development
Languages :
CSS
Concepts :
Front End Web Development
Tools :
Git

What do you get with a video?

Product feature icon Download this video in MP4 format
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
OR

Contact Details

Modal Close icon
Payment Processing...
tick Completed

Billing Address

Product Details

Publication date : Jul 02, 2024
Length: 24hrs 19mins
Edition : 2nd
Language : English
ISBN-13 : 9781835880562
Category :
Web Development
Languages :
CSS
Concepts :
Front End Web Development
Tools :
Git

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
START FREE TRIAL
BUY NOW
$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 Mex$85 each
Feature tick icon Exclusive print discounts
START FREE TRIAL
BUY NOW
$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 Mex$85 each
Feature tick icon Exclusive print discounts
START FREE TRIAL
BUY NOW

Frequently bought together

Modern HTML & CSS From The Beginning 2.0
Modern HTML & CSS From The Beginning 2.0
Read more
Jul 2024 24hrs 19mins
Full star icon 5 (2)
Video
Video
  • Video Video Mex$179.99
Mex$179.99 Mex$2051.99
The Art of Micro Frontends
The Art of Micro Frontends
Read more
Oct 2024 356 pages
eBook
eBook
  • eBook eBook Mex$179.99
  • Paperback Paperback Mex$758.99
Mex$179.99 Mex$607.99
Mex$758.99
Azure for Developers
Azure for Developers
Read more
Aug 2022 632 pages
Full star icon 4.9 (7)
eBook
eBook
  • eBook eBook Mex$179.99
  • Paperback Paperback Mex$1066.99
Mex$179.99 Mex$853.99
Mex$1066.99
Stars icon
Total Mex$ 2,005.97 3,877.97 1,872.00 saved
Modern HTML & CSS From The Beginning 2.0
Mex$179.99 Mex$2051.99
The Art of Micro Frontends
Mex$758.99
Azure for Developers
Mex$1066.99
Total Mex$ 2,005.97 3,877.97 1,872.00 saved Stars icon
Banner background image

Table of Contents

21 Chapters
Introduction Chevron down icon Chevron up icon
Welcome To The Course
How The Web Works
The Roles Of HTML, CSS & JS In Web Development
VS Code Editor & Environment
Essential HTML Chevron down icon Chevron up icon
Section Intro
Create & Open HTML Files
HTML Tags & Attributes
Document Structure
Live Server & Prettier
Sandbox Files Setup
Meta Tags & Search
Headings, Paragraphs & Emphasis
Browser Devtools Intro
Lists
Anchor Tags
Images
Block vs Inline Elements
Line Breaks, Horizontal Rules & Entities
Divs & Spans
Classes & IDs
Semantic Elements
Emmet Crash Course
Keyboard Shortcuts
Pricing Grid Challenge
HTML Form & Input Elements Chevron down icon Chevron up icon
Section Intro
Form & Input Tags
Text-Based Input Tags
Input Field Attributes
Select Boxes & Textarea
Checkboxes & Radio Buttons
Other Input Fields
Datalist
HTML Form Challenge
More HTML Elements Chevron down icon Chevron up icon
Section Intro
Audio Element
Video Element
Image Map
Tables
Iframe
Global Attributes
SVG Element
Popover & Details
Progress & Meter
CSS Basics Chevron down icon Chevron up icon
Section Intro
Implementing CSS
Basic CSS Selectors
Fonts In CSS
Font & Text Properties
Colors (Color Names, HEX, RGB, HSL)
CSS Specificity
Backgrounds
Styling Links
Font Awesome Library
CSS Basics Challenge
Box Model & Positioning Chevron down icon Chevron up icon
Section Intro
Box Model Explained
Sizing & Overflow
Padding
Margin
Universal Selector & Reset
Borders
Display Property
Position Property
Box Shadow
Freelance Form Mini-Project
Shoe Cards Mini-Project
Flexbox Chevron down icon Chevron up icon
Section Intro
What Is Flexbox?
Flexbox Basics - Containers & Items
Align & Justify Items
Flex Properties & Dynamic Sizing
Flex Order
Flexbox Layout Challenge
Pricing Card CSS Mini-Project
Responsive Design Chevron down icon Chevron up icon
Section Intro
What Is Responsive Design?
Flexible Layouts & Percentages
rem & em Units
Viewport Units (vh & vw)
Media Queries
Responsive Pricing Grid
Responsive Flexbox Layout
Container Queries
Container Units
Landing Form Mini-Project Chevron down icon Chevron up icon
Project Intro
Setup & HTML
Base CSS & Header Styles
Main Content Flex & Alignment
Inner Styles
Mobile Layout & Media Queries
Various CSS Features Chevron down icon Chevron up icon
Section Intro
Custom Properties
Vendor Prefixes
Filters
Smooth Scroll Mini-Project
Sticky Nav & Style On Scroll
calc() Function
Nesting
Lumina Creative Website Project Chevron down icon Chevron up icon
Project Intro
Setup & Base CSS
Header & Navigation
Hero Text
Custom Properties
Gallery Section Flexbox
Footer
About Page
Contact Page
Image Lightbox Effect
Git, GitHub & Web Hosting Chevron down icon Chevron up icon
Section Intro
Intro To Git & GitHub
Generate SSH Keys
Git Workflow & Commands
Deploy Website To Netlify
Contact Form Submission
Connect & Configure a Domain Name
Web Accessibility Introduction Chevron down icon Chevron up icon
Section Intro
What Is Web Accessibility?
Skilltide Browser Extension
Screen Reader Testing
Role Attribute
ARIA Attributes
Aria Expanded & Dynamic Elements
Advanced Selectors - Pseudo Classes & Elements Chevron down icon Chevron up icon
Section Intro
Attribute Selectors
Child & Sibling Combinators
Pseudo Elements
Pseudo Classes - first-child, last-child & nth-child
Pseudo Classes - first-of-type, last-of-type, nth-of-type
before & after Pseudo Elements
Image Overlay With :before
is(), where() & has()
Styling Forms
Selectors Challenge
CSS Grid Chevron down icon Chevron up icon
Section Intro
CSS Grid Overview
Grid Columns & Gap
repeat() & minmax()
Grid Rows
Grid Challenge 1
Align & Justify Properties
repeat() With autofit & autofill
Positioning & Spanning Items
Named Grid Lines
Grid Challenge 2
CSS Grid & Media Queries
Grid Template Areas
Lumina Creative Grid Refactor
Transitions, Animation & A Little JavaScript Chevron down icon Chevron up icon
Section Intro
Transitions Overview
Creating Transitions
Transform Property
Absolute Centering With Transform/Translate
3D Transforms
JavaScript & CSS Intro
Hamburger Menu
Keyframes - Part 1
Keyframes - Part 2 (CSS Loader Animation)
3D Rotating Cube
Presentation Website Mini-Project
Tutor Website Project - Part 1 Chevron down icon Chevron up icon
Project Intro
Project Setup
Desktop Navigation
Mobile Navigation
Hero Section
Hero SVG & Media Queries
Navbar Background On Scroll
Learn Section
Chapters Section
Summary Section
Tutor Website Project - Part 2 Chevron down icon Chevron up icon
Info Section
Takeaway Section
Details & Author Sections
Stats Section
Newsletter Section
Footer & Social Icons
Contact Page
Add Accessibility
Deploy To Vercel & Formspree Setup
Leno Website Project (BEM) - Part 1 Chevron down icon Chevron up icon
Project Intro
BEM Methodology Explained
Project Setup
Navbar & Desktop Menu
Mobile Navigation
Hero Section
Navbar Background On Scroll
Testimonials Section
Features Section
Features Mobile Layout
Leno Website Project (BEM) - Part 2 Chevron down icon Chevron up icon
Preview Section
Animated Play Button
Video Modal
Details Area
Screenshots Section
Download Section
Footer
Create The Details Page
Pricing Cards
Details Features
Conclusion Chevron down icon Chevron up icon
Course Wrap Up

Recommendations for you

Left arrow icon
Web Development with Blazor
Web Development with Blazor
Read more
Apr 2024 366 pages
Full star icon 4 (17)
eBook
eBook
  • eBook eBook Mex$179.99
  • Paperback Paperback Mex$1025.99
Mex$179.99 Mex$820.99
Mex$1025.99
React and React Native
React and React Native
Read more
Apr 2024 508 pages
Full star icon 4.3 (9)
eBook
eBook
  • eBook eBook Mex$179.99
  • Paperback Paperback Mex$902.99
Mex$179.99 Mex$721.99
Mex$902.99
Responsive Web Design with HTML5 and CSS
Responsive Web Design with HTML5 and CSS
Read more
Sep 2022 498 pages
Full star icon 4.5 (57)
eBook
eBook
  • eBook eBook Mex$179.99
  • Paperback Paperback Mex$922.99
Mex$179.99 Mex$738.99
Mex$922.99
Building Production-Grade Web Applications with Supabase
Building Production-Grade Web Applications with Supabase
Read more
Aug 2024 534 pages
Full star icon 4.3 (9)
eBook
eBook
  • eBook eBook Mex$179.99
  • Paperback Paperback Mex$820.99
Mex$179.99 Mex$656.99
Mex$820.99
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2023 828 pages
Full star icon 4.4 (73)
eBook
eBook
  • eBook eBook Mex$179.99
  • Paperback Paperback Mex$1230.99
Mex$179.99 Mex$984.99
Mex$1230.99
C# 13 and .NET 9 – Modern Cross-Platform Development Fundamentals
C# 13 and .NET 9 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2024 828 pages
Full star icon 5 (1)
eBook
eBook
  • eBook eBook Mex$179.99
  • Paperback Paperback Mex$665.99
Mex$179.99 Mex$820.99
Mex$665.99 Mex$1025.99
Django 5 By Example
Django 5 By Example
Read more
Apr 2024 820 pages
Full star icon 4.5 (37)
eBook
eBook
  • eBook eBook Mex$179.99
  • Paperback Paperback Mex$1025.99
Mex$179.99 Mex$820.99
Mex$1025.99
.NET 8 Microservices - DDD, CQRS, Vertical/Clean Architecture
.NET 8 Microservices - DDD, CQRS, Vertical/Clean Architecture
Read more
Nov 2024 28hrs 30mins
Video
Video
  • Video Video Mex$179.99
Mex$179.99 Mex$1640.99
Implementing Event-Driven Microservices Architecture in .NET 7
Implementing Event-Driven Microservices Architecture in .NET 7
Read more
Mar 2023 326 pages
Full star icon 4.5 (16)
eBook
eBook
  • eBook eBook Mex$179.99
  • Paperback Paperback Mex$922.99
Mex$179.99 Mex$738.99
Mex$922.99
Building Python Microservices with FastAPI
Building Python Microservices with FastAPI
Read more
Aug 2022 420 pages
Full star icon 3.9 (9)
eBook
eBook
  • eBook eBook Mex$179.99
  • Paperback Paperback Mex$963.99
Mex$179.99 Mex$771.99
Mex$963.99
Right arrow icon

Customer reviews

Rating distribution
Full star icon Full star icon Full star icon Full star icon Full star icon 5
(2 Ratings)
5 star 100%
4 star 0%
3 star 0%
2 star 0%
1 star 0%
Masaki Nov 07, 2024
Full star icon Full star icon Full star icon Full star icon Full star icon 5
I like the pace of the course, the fact he took time to introduce emmet and other useful tools. Very practical and I think I will come back to this course time after time to brush up my CSS skillset.
Subscriber review Packt
Richard Jul 25, 2024
Full star icon Full star icon Full star icon Full star icon Full star icon 5
I've watched many of travesty media's videos. I have been programming for 16 years now. I mostly program native applications; however, I recently decided to try and learn some front end development. Having a lot of experience with programming concepts and programming tutorials I have found all of the travesty media absolutely amazing. Not only does he explain how to do things, he steps through each level of abstraction so you have a solid understanding of not just how to do something, but WHY things are the way they are. I would definitely recommend watching this series (and anything else by travesty media)
Subscriber review Packt

About the author

Profile icon Brad Traversy
Brad Traversy
Brad Traversy has been programming for around 12 years and teaching for almost 5 years. He is the owner of Traversy Media, which is a successful web development YouTube channel and specializes in everything from HTML5 to front-end frameworks such as Angular as well as server-side technologies such as Node.js, PHP, and Python. Brad has mastered explaining overly complex topics in a simple manner that is understandable. Invest in your knowledge by watching Brad’s courses.
Read more
See other products by Brad Traversy
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How can I download a video package for offline viewing? Chevron down icon Chevron up icon
  1. Login to your account at Packtpub.com.
  2. Click on "My Account" and then click on the "My Videos" tab to access your videos.
  3. Click on the "Download Now" link to start your video download.
How can I extract my video file? Chevron down icon Chevron up icon

All modern operating systems ship with ZIP file extraction built in. If you'd prefer to use a dedicated compression application, we've tested WinRAR / 7-Zip for Windows, Zipeg / iZip / UnRarX for Mac and 7-Zip / PeaZip for Linux. These applications support all extension files.

How can I get help and support around my video package? Chevron down icon Chevron up icon

If your video course doesn't give you what you were expecting, either because of functionality problems or because the content isn't up to scratch, please mail customercare@packt.com with details of the problem. In addition, so that we can best provide the support you need, please include the following information for our support team.

  1. Video
  2. Format watched (HTML, MP4, streaming)
  3. Chapter or section that issue relates to (if relevant)
  4. System being played on
  5. Browser used (if relevant)
  6. Details of support
Why can’t I download my video package? Chevron down icon Chevron up icon

In the even that you are having issues downloading your video package then please follow these instructions:

  1. Disable all your browser plugins and extensions: Some security and download manager extensions can cause issues during the download.
  2. Download the video course using a different browser: We've tested downloads operate correctly in current versions of Chrome, Firefox, Internet Explorer, and Safari.