Yes we could add icons to links by simply assigning classes or IDs. But could we dynamically add icons by analysing file names, links or the existence of certain attributes? Yes we can! All with the CSS attribute selector. CSS attribute selectors The simplest version of the attribute selector can check if an…

That’s right! We are going to build a real-time, animated Word Clock that keeps the time. All with just HTML and CSS and no JavaScript at all. Adding the Words First, we need to add all the words including the fillers to make the rectangle. I organised everything into rows, and used a…

Here’s an interesting HTML and CSS challenge for you: We have a list of guests in HTML with their beer-consumption-per-hour values and the amount of time in hours they will stay at the party added in their data attributes. …

The <hr> element is a self-closing tag that is meant to represent a thematic break in the content. Remember: the horizontal rule is not a border or a line and it’s not meant to serve a styling purpose, instead, it marks the end of a section in your document. It…

Separation of concerns is a key principle in web development. It states that: Your HTML markup should only be responsible for holding the content of your document and nothing style-related and the CSS stylesheet should only contain styling declarations and not inject any content into the document. If we do…

Let’s build a Live Code Editor with just a few lines of HTML and CSS! You have almost certainly styled anchor elements before using their pseudo-classes (:link, :visited, :hover, :active) but you probably never thought about what :link strictly means. Apparently, the :link pseudo-class can select elements for styling that…

Interactive, clickable images and animated closable popup boxes are usually tasks for JavaScript. But what if I told you it can all be done with just HTML and CSS? All you need is HTML and CSS This is an example project from my book, All you need is HTML and CSS: All you need is HTML and CSS: Building Interactive Web Interfaces with no JavaScript Buy All you need is HTML and CSS: Building Interactive Web Interfaces with no JavaScript by Marschalko, Mate (ISBN…www.amazon.co.uk

This is the digital version of the CSS-only analog clock we built last time. It’s fully functioning, settable .. all done with CSS Custom Properties and the calc() function and no JavaScript of course. To get started with the project, have a look at the CSS-only Analog Clock first. All you need is HTML and CSS This…