HTML & CSS
![How to Implement Pagination with HTML, CSS and JavaScript](jpg/1692605052pagination.jpg)
Learn how easy it is to create a simple, accessible pagination script that breaks up large amounts of content into more digestible chunks.
![How to Use the CSS gap Property](jpg/1691992918css-grid-property1.jpg)
Learn how to use the CSS gap property, which makes it super easy to add space between elements without the need for hacky margin solutions.
![A Beginner’s Guide to CSS Grid Layout](jpg/1691552774css-grid-introduction.jpg)
Follow these simple examples to learn how CSS Grid allows us to easily lay out elements on a page to create a range of flexible layouts.
![An Overview of CSS Sizing Units](jpg/1690528911css-sizing-units.jpg)
Explore the four broad categories of CSS sizing units, how to apply them in your layouts, and how to choose the best ones in each scenario.
![How to Use the CSS Grid repeat() Function](jpg/1690849651css-grid-repeat.jpg)
Learn how to use the keywords and functions of the CSS Grid repeat() function to create responsive layouts without media queries.
![How to Use CSS aspect-ratio](jpg/1690154474css-aspect-ratio.jpg)
Learn how to use the CSS aspect-ratio property, with practical examples, alternatives for older browsers, and other useful things to know.
![10 Simple CSS and JavaScript Micro-interactions for Buttons](jpg/1690179564button-micro-interactions.jpg)
Learn ten simple ways to add micro-interactions to buttons on a web page that help inform users when they've successfully done something.
![How to Use CSS object-fit and object-position](jpg/1689772525css-object-fit.jpg)
Learn how to use CSS object-fit to determine how images fit within a given space, and how to position those images with object-position.
![An Introduction to Native CSS Nesting](jpg/1688602136css-nesting.jpg)
Now that CSS nesting has started to land in browsers, learn how you can use it to write more efficient CSS without using a preprocessor.
![How to Use CSS background-size and background-position](jpg/1687946527css-background-size.jpg)
Learn how to set the size of a background image with the CSS background-size property, and how to position it with background-position.
![How to Center a Div Using CSS Grid](jpg/1664423810center-div-grid.jpg)
Learn five simple ways to horizontally and vertically center a div (or any other element) using CSS Grid, with fully interactive demos.
![How to Add a CSS Reveal Animation to Your Images](jpg/1686714420css-image-reveal2.jpg)
Learn how to create a range of amazing CSS image reveal animations by using simple CSS properties and no extra elements or pseudo-elements.
![Quick Tip: Shipping Resilient CSS Components](jpg/1685663915resilient_css_components.jpg)
In this quick tip, discover how container queries enable us to ship resilient components containing built-in layout and style variants.
![Responsive CSS Layout Grids without Media Queries](jpg/1684379832responsice-css-layout-grids-without-media-queries.jpg)
Discover how both Flexbox and Grid provide ways to create fluidly responsive layout grids without media queries.
![How to Create a Custom Range Slider Using CSS](jpg/1684206206range-slider-custom.jpg)
Learn how to use modern CSS techniques to create an eye-catching, custom range slider with nothing but the native HTML input element.
![An Introduction to Container Queries in CSS](jpg/1683515697css-container-queries.jpg)
Container queries enable the styling of elements based on available space. They allow us to build resilient components that are adaptable.
![An Introduction to the :has() Selector in CSS](jpg/1683169189has-selector.jpg)
The :has() pseudo-class has far greater range than just styling an element’s ancestor. It's a great time for you to become familiar with it!
![10 Ways to Hide Elements in CSS](jpg/1582635109hide-with-css.jpg)
Learn the various CSS methods available for hiding elements on a web page, looking at how they differ and which is best when.
![How to use Google Fonts and font-display](jpg/1679985173google-fonts-font-display.jpg)
Learn how to use Google Fonts and the font-display property to create visually appealing and performant websites.
![Four Simple Ways to Draw a Rectangle in HTML](jpg/1692944530html-draw-rectangle.jpg)
Learn four basic ways to draw a shape on the Web: via HTML and CSS, with CSS alone, with SVG, and with the HTML canvas element.
![16 Best CSS Books for Beginners and Advanced Coders](jpg/1676938584best-css-books.jpg)
We've compiled a list of the top HTML/CSS books currently on the market for anyone who wants to learn these essential web technologies.
![15 Best HTML Books for Beginners and Advanced Coders](jpg/1676244061best-html-books.jpg)
Everything you need to know to create your first web page starts with HTML. Read these books to learn HTML and start your journey now.
![How to Set CSS Margins and Padding, and Cool Layout Tricks](png/1493225690css-margns-padding.png)
Baljeet Rathi explains the use of CSS margins vs padding, the box model, bleeding and collapsing margins, and concludes with some cool layout tricks.
![How to Animate CSS Box Shadows and Optimize Performance](jpg/1665468067box-shadow-animation.jpg)
Learn how to animate CSS box shadows, how each method affects browser performance, and how to decide which animation method to use.
![How the CSS :is, :where and :has Pseudo-class Selectors Work](jpg/1660647540is-where-has-pseudo-class-selectors.jpg)
The new CSS :is(), :where() and :has() pseudo-class selectors are exciting additions to CSS. Learn how easy they are to use!
![Mastering z-index in CSS](png/1478437631z1-01.png)
Learn how to use z-index in CSS and the best strategies for stacking elements
![How to Use Variables in CSS](png/1654482584css-variables.png)
Learn how to use CSS variables (custom properties) to make it easier to manage colors, fonts, size, and animations, consistently across web applications.
![The Best JavaScript & CSS Animation Libraries for UI Designers](jpg/1570509959j_0238-03-copy.jpg)
Animation is a part of a UI designer's job. Here are 9 free animation libraries we think deliver the most power for the smallest file size, while being relatively easy to use for reasonably code-savvy designers that aren't full-blown developers.
![Webflow Review: Is It a Serious Option for Developers?](jpg/1651545056webflow.jpg)
Find out if Webflow is a viable option for tech-savvy users who want to build custom websites.
![An Introduction to PostCSS](jpg/1635738723postcss1.jpg)
CSS preprocessors are popular, but they have some drawbacks. Learn the advantages of PostCSS and what its extensive range of plugins can do.