Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying You Don't Need JavaScript
  • Table Of Contents Toc
You Don't Need JavaScript

You Don't Need JavaScript

By : Theo Soti
close
close
You Don't Need JavaScript

You Don't Need JavaScript

By: Theo Soti

Overview of this book

For years, JavaScript has been the default answer for almost every interactive detail on the web. Need a modal, a dropdown, dark mode, smooth scrolling, or form validation? Most frontend developers reach for JavaScript without thinking twice. But the platform has changed. This book shows how much modern HTML and CSS can already do on their own. Through practical examples, you will learn how to build real interface patterns with less code, fewer dependencies, and a stronger focus on accessibility, performance, and maintainability. You will explore features such as :has(), native dialogs, accordions, sliders, counters, dark mode, smooth scrolling, form validation, border animations, view transitions, motion paths, and mask effects. The book also introduces newer browser features like popovers, anchor positioning, scroll-driven animations, customizable selects, and CSS carousels. The goal is not to avoid JavaScript at all costs. It is to use it when it actually adds value, and not by default. By the end of the book, you will have a clearer sense of what the platform can handle today and how to build interfaces that are lighter, cleaner, and more resilient.
Table of Contents (25 chapters)
close
close
Preface
Lock Free Chapter
1
Part 1: Everyday Features
10
Part 2: Modern CSS Power Moves
16
Part 3: A Glimpse of the Future
23
Chapter 20: Closing Thoughts
24
Index

Adding a border layer

We create the "border" not with border itself, but with a pseudo-element stretched slightly larger than the card.

.card::after {
  content: "";
  position: absolute;
  inset: -4px;  /* expand 4px beyond every edge */
  z-index: -1;  /* push it behind the card */
  border-radius: inherit;
}

The negative inset makes the pseudo-element stick out beyond the card, visually becoming its border. Inheriting the radius ensures corners line up perfectly.

CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
You Don't Need JavaScript
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist download Download options font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon