Integrating CMSes with HTML, CSS, and JavaScript
Integrating CMSes with HTML, CSS, and JavaScript enables dynamic, flexible content management. Here, I explore best practices, performance tips, and SEO.
Articles
CSS, page 4 of 5
Almost as old as front‑end development itself, CSS is a stylesheet language that describes the presentation of an HTML or XML document. We write CSS to describe how elements should be rendered and animated on‑screen, when printed, in speech, or in other media. In web development, writing CSS is an underappreciated skill that not many fully master.
Below you will find a subset of articles from my blog specifically about CSS. This is an area that I have worked with for many years, and have managed to write about quite a few times. There are seventy‑seven collected together for you below.
Integrating CMSes with HTML, CSS, and JavaScript. 
Manipulate Elements with CSS transform. Manipulate Elements with CSS
transformCSS transforms enable us to manipulate elements with operations like rotate, scale, and translate. Here, I discuss how to use and animate them effectively.
Single or Double Colons in CSS Pseudo‑Elements (:before vs. ::before). Single or Double Colons in CSS Pseudo‑Elements (
:beforevs.::before)In CSS, pseudo‑elements can be written with one or two colons (e.g., `:before` or `::before`). Here, I explain the difference, correct usage, and why it matters.
CSS box‑sizing: Controlling the Element Box Model. CSS
box‑sizing: Controlling the Element Box ModelUnderstand CSS box‑sizing and the box model, including content‑box, border‑box, width calculations, borders, padding, and layout surprises in real UI.
Understanding the :hover Pseudo‑Class in CSS. Understanding the
:hoverPseudo‑Class in CSSThe :hover pseudo‑class seems simple until touchscreens and accessibility get involved. This guide covers how it behaves and where it falls short.
Using Viewport Units in CSS: vw and vh. Using Viewport Units in CSS:
vwandvhUse CSS viewport units vw and vh for responsive sizing, understanding percentage‑of‑viewport behaviour, full‑screen layouts, and mobile browser caveats.
Enhancing User Experience with CSS and JavaScript Animations. Enhancing User Experience with CSS and JavaScript Animations
CSS and JS animations enhance user experience by adding smooth transitions and interactivity. Here, I explore best practices, performance, and the real‑world.
CSS Animations: Transitions vs. Keyframes. CSS Animations: Transitions vs. Keyframes
Compare CSS transitions and keyframe animations, including hover effects, loading states, timing control, performance, and when each approach fits.
Understanding Media Queries in CSS. Understanding Media Queries in CSS
Understand CSS media queries for responsive design, including screen conditions, mobile‑first and desktop‑first approaches, breakpoints, and device traits.
Optimising Website Performance with HTML, CSS, and JavaScript. Optimising Website Performance with HTML, CSS, and JavaScript
Boost website performance with HTML, CSS & JavaScript optimisation. I explore techniques: lazy loading, critical CSS, script deferment for faster load times.
Mastering CSS Animations with @keyframes. Mastering CSS Animations with
@keyframesCSS `@keyframes` enables animations by defining style changes over time. Here, I explain how it works with examples, properties, and cross‑browser support.
Some of the Most‑Misunderstood Properties in CSS. Some of the Most‑Misunderstood Properties in CSS
Whilst understanding any computing language comes with practice and exposure, there are some areas of CSS that can flummox even the most seasoned of developers.
::Before and ::after Pseudo‑Elements in CSS. ::beforeand::afterPseudo‑Elements in CSSUsing the `:before` and `:after` pseudo‑elements in CSS for styling and content insertion. Here, I cover syntax, practical examples, and best practices.
The CSS overflow Property. The CSS
overflowPropertyUnderstand the CSS overflow property, including visible, hidden, scroll, auto, x and y control, scrollbars, accessibility, and mobile quirks safely.
Understanding CSS Transitions. Understanding CSS Transitions
CSS transitions allow us to create smooth animations between states, enhancing user experience. Here, I discuss how to use transitions with practical examples.
Mastering CSS for Freelance Web Development Projects. Mastering CSS for Freelance Web Development Projects
CSS is key to delivering responsive, accessible, and visually appealing freelance projects. Here, I explore essential techniques and practices to master CSS.
What are CSS Preprocessors, and Why Should You Use Them? What are CSS Preprocessors, and Why Should You Use Them?
CSS preprocessors like Sass and Less enhance standard CSS with features like variables and nesting. Here, I explore their benefits and why they're essential.
Fundamentals of HTML: A Guide. Fundamentals of HTML: A Guide
A deep dive into the fundamentals of HTML, the foundation of the web. Here I cover its history, usage, evolution, and integration with other web technologies.