DEV Community: Christian Fried

The two most important tools for HTML developers

Christian Fried — Mon, 22 Dec 2025 08:13:11 +0000

Does this title say “HTML developer”? It does! Sadly, it’s not a thing.

But: any developer writing HTML needs two tools—and I would argue, no more, and no less.

Which ones?

A Validator

Although the data appear grim, there is a renewed push on valid HTML.

What is valid HTML?

Essentially error-free HTML.

This is important:

The HTML code works.

Accordingly, we don’t include code, for bandwidth that may be precious, that isn’t working.

What tools are there?

Only one tool probably: The W3C HTML validator for which there’s also an npm version.

A Minifier

We could write optimized HTML by hand.

But even if you already know all tags you can omit, markup is hardly readable anymore once you removed all the tabs or spaces.

For the purposes of minification and optimization there are HTML minifiers.

If the data can be trusted, HTML Minifier still produces the best results, and may be most configurable.

Other good options include htmlnano as well as @swc/html.

This area seems to be in a good spot.

Validating and optimizing for production: these come with unique tooling needs for the two most important tools for web developers.

Do you disagree? And is "HTML developer" a thing? 👩‍💻

How to learn HTML: 46 great sites, courses and books (all free)

Christian Fried — Sun, 29 Sep 2024 15:38:01 +0000

How can you learn HTML today? For free?

It may be hard to get really good material for free but there are great resources to get you started:

To get started

HTML for Beginners - introduction from freeCodeCamp.
HTML (and CSS) from scratch - video course also from freeCodeCamp.
HTML for Beginners - quick guide from HTML.com.
The Ultimate Guide to HTML for Beginners - from Hubspot.
Learn HTML - course from Codecademy. Teaches the basics.
Learn HTML - course from Google. More fundamentals, by Google developer experts.
HTML course - from Study Tonight.
Free HTML courses at Udemy.
Learn HTML (and CSS). First 15 chapters and 120 lessons free, then pay.
Dive into HTML5. Old, some HTML history, but probably one of the best HTML websites/books out there.
Rote Learning HTML (and CSS) (source). Free ebook with all HTML elements, attributes and more. Useful if you love memorizing stuff.
The “best” books to learn HTML (and CSS). More books: free PDFs of a number of HTML books.

To look things up

HTML cheat sheet.
HTML cheat sheet. Another one.
HTML cheat sheet by Stanford University [PDF]. And another one.
HTML Reference. It gets bigger.
MDN Web Docs: Community site for everything around web development. Industry favorite.
W3Schools HTML: Some love W3Schools others hate them. Great resource if you love them.
The HTML specification. Some recommend to read it early, for others it’s too overwhelming. You pick.
Addendum: The HTML specification for developers.
The W3C HTML mailing list. Dead but with a lot of HTML history.
The HTML tags across specifications.
HTML tags and their meaning. W3Schools again.
HTML tags to try out. GeeksforGeeks.
WebGlossary.info: HTML (and general web development) glossary.

To dive deeper

10 free HTML (and CSS) books.
Free ebooks on HTML at Freebook Sifter.
HTML5 Doctor. May be old.
Awesome HTML5. Many links. May be old.
HTML News. May be dead.
Developer News. Somewhat dead? But has some HTML content too.
HTML5 Rocks. Dead and old but has great context.
HTML5 Please. Dead but also useful.
HTML Ref. Dead? and even older but useful for historical purpose.
awesome-html5. Another historical reference with many additional resources.

To stay up-to-date

Smashing Magazine on HTML. Smashing Magazine’s articles about HTML.
HTML at A List Apart.
HTML at Frontend Dogma.
HTML at Sitepoint.
HTML articles at DEV.
HTML at Wired.
HTML on Hackernoon.
HTML news on Mastodon (frontend-social).
HTML on Glitch.
WHATWG (HTML working group) on X.
WHATWG on Github.

Please comment for more great and free HTML beginner material!

HTML validation - pros and cons ⚖️

Christian Fried — Wed, 27 Dec 2023 09:39:56 +0000

This is an update to my question if you really need to validate HTML. This time I asked ChatGPT about it 🤖 and edited out the weakest points.

HTML validation, or HTML conformance checking, involves checking whether a web page complies with the specifications defined by the HTML standard. Here are some pros and cons of HTML validation:

Pros

Cross-browser compatibility: Valid HTML code is more likely to be displayed consistently across different web browsers. This helps ensure a uniform user experience.
Future-proofing: Following HTML standards makes your code more resilient to future changes in web technologies. It helps your website remain compatible as browsers evolve.
Improved accessibility: Valid HTML often leads to better accessibility. Properly structured HTML with semantic elements contributes to a more accessible and inclusive web experience for users with disabilities.
Search engine optimization (SEO): Search engines may favor well-structured and valid HTML, potentially improving the search engine ranking of your web pages.
Debugging and maintenance: Valid HTML is generally easier to debug and maintain. It helps identify errors and inconsistencies in the code more quickly.
Consistency and readability: Valid HTML promotes consistency in code formatting and enhances code readability, making it easier for developers to collaborate and maintain the codebase.

Cons

Strict enforcement challenges: Strict validation can sometimes be challenging, especially when dealing with third-party plugins, browser-specific features, or experimental technologies that may not adhere strictly to HTML standards.
Learning curve: For beginners, strict adherence to HTML standards might pose a learning curve. Some may find it restrictive, especially when trying to experiment with cutting-edge web technologies.
Real-world tolerance: The real-world web often involves imperfect HTML due to various reasons, such as browser quirks, legacy code, or the need for quick fixes. Strict validation might not always align with practical considerations.
False positives and negatives: Validation tools may generate false positives or false negatives, flagging code as invalid when it works or vice versa. This can be frustrating for developers and may lead to unnecessary adjustments.

(I removed cons about performance - Chat GPT even said it was not a problem - and resource intensiveness - that doesn't seem to be a problem, either.)

In (Chat GPT's) summary, HTML validation can offer several benefits, such as improved cross-browser compatibility, accessibility, and future-proofing. However, it comes with challenges related to strict enforcement, potential performance impact, and the need to balance standards with real-world considerations. Developers often need to find a pragmatic approach that aligns with the goals of the project and the needs of its users.

It seems there are benefits to validating. What do you think? Do you validate your HTML? Do you validate your CSS?

Tailwind - pros and cons

Christian Fried — Sun, 26 Nov 2023 15:32:48 +0000

(More pros and cons!)

Do you use Tailwind? I sketched (with some help from ChatGPT) the pros and cons of Tailwind:

Pros

Rapid development and consistency: Tailwind CSS's utility-first approach significantly expedites the development process by offering a comprehensive set of pre-defined utility classes that developers can directly apply to HTML elements. This eliminates the need for extensive custom CSS, enabling rapid prototyping and efficient creation of UI components. The utility-first methodology also ensures a consistent design system throughout the project, as styling is dictated by a standardized set of utility classes. This not only accelerates development but also simplifies maintenance and reduces the likelihood of styling discrepancies, making it especially valuable for large teams and complex projects.
Flexibility and customization: Tailwind CSS stands out for its high degree of configurability, allowing developers to tailor the framework to suit the specific design requirements of their projects. The configuration file provides control over key aspects such as color palettes, spacing, and font sizes, enabling a high level of customization. This flexibility makes Tailwind adaptable to a wide range of design styles and branding needs. Additionally, Tailwind simplifies the implementation of responsive design with its built-in responsive utility classes, eliminating the need for manual media queries. This ease of customization, coupled with responsive design capabilities, contributes to Tailwind's appeal for developers seeking a versatile and efficient styling solution.

Cons

Learning curve and initial setup complexity: One notable disadvantage of Tailwind CSS is the initial learning curve, especially for developers accustomed to traditional CSS frameworks or methodologies. The extensive set of utility classes and the utility-first approach might be overwhelming for beginners, and understanding how to effectively leverage them can take time. Additionally, configuring Tailwind to match specific project requirements may involve delving into the documentation and experimenting with the configuration file, adding a layer of complexity to the setup process. While the framework provides powerful tools, it may not be the most intuitive for those unfamiliar with its conventions.
Increased file size and unused styles: Tailwind CSS generates a relatively large stylesheet due to its comprehensive set of utility classes, and including the entire framework in a project may lead to larger file sizes compared to more minimalist approaches. This can impact page load times, particularly on slower network connections or for users accessing the site on mobile devices. Additionally, because Tailwind provides an extensive range of utility classes, developers might end up including styles that are not utilized in the project, contributing to unnecessary bloat. While there are methods to mitigate this issue, such as tree-shaking and purging unused styles during the build process, it adds an extra layer of complexity to optimization efforts.

What do you think?

Static hosting - pros and cons

Christian Fried — Tue, 21 Nov 2023 22:06:39 +0000

Pros and cons continued!

Today, static hosting:

Pros of static hosting

Performance:
- Fast loading times: Static websites consist of pre-built files that do not require server-side processing. This leads to faster loading times as there is no need to generate pages dynamically for each user request.
- Scalability: Static sites can handle high traffic loads more efficiently because they can be easily cached and distributed on Content Delivery Networks (CDNs), reducing the load on the hosting server.
Simplicity and security:
- Simplicity: Static sites are simpler to set up and maintain compared to dynamic sites. There is no need for server-side scripting languages or databases, making the development and deployment process more straightforward.
- Security: Since there is no server-side processing, the attack surface is reduced. Static sites are less susceptible to certain types of security vulnerabilities, such as SQL injection or server-side script exploits.
Cost-effectiveness:
- Lower infrastructure costs: Hosting static websites is often more cost-effective as they can be served from simple, low-cost hosting solutions or even directly from cloud storage services. There is no need for expensive server infrastructure to handle dynamic content generation.
- Reduced maintenance costs: With fewer moving parts and dependencies, maintenance becomes simpler, and the risk of unexpected issues is lower, reducing ongoing operational costs.

Cons of static hosting

Limited interactivity:
- Dynamic content challenges: Static sites are not well-suited for applications that require real-time or dynamic content updates. Implementing features such as user authentication, personalized content, or real-time collaboration can be challenging without server-side processing.
- Complex forms: Forms that require complex processing or interaction may need additional solutions, such as JavaScript and APIs, making the development process more intricate.
Content management challenges:
- Manual updates: Content updates often require manual changes to the HTML or markdown files, making it less convenient for non-technical users to manage content compared to dynamic Content Management Systems (CMS).
- Version control: Keeping track of changes and managing version control for static sites, especially in collaborative environments, may require additional tools and workflows.
Scalability limitations:
- Limited dynamic scaling: While static sites can scale well for static content, scaling for dynamic content or handling a large number of concurrent users might be challenging without additional server-side processing.
- Complexity for large sites: Managing a large number of static files and assets, especially for websites with extensive content, can become complex, requiring efficient organization and build processes.

(Disclaimer: I got a little help by Chat GPT.)

What do you think? What would you add (or remove)?

Is it worth keeping your CSS DRY - pros and cons

Christian Fried — Wed, 15 Nov 2023 17:04:07 +0000

You can avoid repetition in CSS through techniques like using classes, inheritance and preprocessors like Sass. Here are three pros and three cons associated with avoiding repetition:

Pros

Maintainability: By minimizing repetition, your code becomes more maintainable. If you need to make a change, you only have to do it in one place, reducing the risk of errors and making updates faster and more efficient.

Consistency: Reducing repetition helps ensure consistency across your styles. If a particular style is applied consistently through classes or inheritance, it's less likely to deviate from the intended design.

Scalability: Code that avoids repetition is generally more scalable. As your project grows, maintaining a DRY (Don't Repeat Yourself) codebase becomes increasingly important. It allows for easier expansion without a proportional increase in complexity.

Cons

Less intuitive code: Over-reliance on abstraction methods (like using mixins in preprocessors or UDJO (using declarations just once)) can result in code that is less intuitive, especially for developers who are not familiar with the specific abstractions or conventions used in the project.

It seems that the pros far outweighs the cons. That is avoiding repetition in CSS has benefits in terms of maintainability, consistency and scalability. However, it can result in less intuitive code.

What are your thoughts? How do you avoid repetition and keep your CSS DRY?

Is "px" really so bad 🧐

Christian Fried — Sat, 11 Nov 2023 13:33:34 +0000

Austing Gil wrote, PX or REM in CSS? Just Use REM.

Ashlee Boyer just wrote, Why You Should Use px Units for margin, padding, & Other Spacing Techniques.

Keith Grant has views on px too: Re-evaluating px vs em in Media Queries.

Everyone has a view on px and it's confusing.

It seems that browsers can handle px just fine.

How do you handle them?

Do you use px? Do you avoid px?

Do you really need to validate your HTML code? 🤔

Christian Fried — Sat, 11 Nov 2023 13:28:12 +0000

I haven’t validated my HTML code until one of my managers asked me to.

Now I read Jens Meierts article The 3-Second Frontend Developer Test where he says that companies should ask about validation when they hire a frontend developer.

He goes on, validation would show “foundational knowledge”, “base quality”, “professional conduct” and “aspiration”.

There’s probably a point here given his focus on HTML. And I think my knowledge of HTML did indeed improve after I had to validate.

But I’m not sure we should only be hired if we validate.

What is your experience?

Do you validate your HTML?

If not, why not?

Or, what would convince you validate your HTML?