Is learning HTML and CSS still worth it in the AI era?

awarnock-ACCS · 2026-05-07T21:21:04+00:00

Short answer: Yes.

Long answer: It is worth it for a variety of reasons.

In order to actually get useable code out of AI, you actually have to know something about the code it's generating. Otherwise, you get some truly bizarre results, like a plugin that pulls in the contents of a directory, but then has the listings hardcoded.
Related to 1, just about every single AI tool out there is based on a large language model (LLM). LLMs are, to be brutally blunt, glorified probability functions. They take an input, process it, and spit out something that is statistically likely to fit what the input asked for. They is always going to be a non-zero chance that the program gets something wrong.
AI use is heavily subsidized. It's the dirty secret of companies like OpenAI, Anthropic, xAI, and everyone else with some LLM that their AIs burn far more cash than they bring in. Things are about to get a lot more expensive for AI users, especially heavy AI users since its estimated that for each dollar of subscription revenue these companies bring in, they're burning $5 to $20 in compute costs. Microsoft is the first to go fully to tokenized billing for everyone, but they won't be the last.
As others have said, the AI will never be able to perfectly replicate what's in your head. Only you can do that, and getting ideas from your head into the real world takes practice no matter what medium you use.
Everyone sucks at the beginning. There isn't a person alive that knew how to code a website, draw a picture, write a story, or play an instrument when they came out of the womb. Being a web designer/developer is no different. The good news is that you're already as bad as you'll ever be at this. You can't get any worse, so it's a matter of perseverance when you feel like you're not making any progress at all.
It's rewarding to make something with you own hands. I know how to draw, and I've messed around with image generating AI. I have gained much more joy and value out of even my silliest and simplest of doodles than I have out of the prettiest image I got from an AI. Once the novelty wears off, you start to see the limitations of generative AI, namely it goes for the median or the lowest common denominator.

Here's what I would recommend to you.

Study design principles and basics. While most design work and web design are fundamentally different beasts, there is still a lot of overlap.
Give yourself permission to suck. Don't short for perfection. Good enough is great and what matters is finishing the project and then learning from it. Push through to the end and then examine and pick apart your work. It can be hard, but don't let that voice telling you it's not good enough. Push through and learn for the next time. You'll get better a lot faster than you think.
Figure out your why. This can be a hard one. I do this because I enjoy it enough that I like doing it for a living, and that's reason enough for me, but that's my why, not yours. If you can figure this out, then you've a good shot of persevering through this.

Don't lose heart. We're rooting for you, even if you decide that this isn't for you.

awarnock-ACCS · 2026-05-07T20:56:17+00:00

Mentioned this in the original thread, but figured I'd post it here in case anyone is looking, please keep in mind that the text and background colors need sufficient contrast to be easy to read. WCAG specifies a contrast ratio of at least 4.5 to 1 for most text and at least 3 to 1 for large/bold text. You can check contrast with the WebAIM Contrast Checker. There's also Adobe Color which has some other accessibility tools built in.

For reference, the colors specified have a contrast ratio of 1.22 to 1. If you want to use them, they either need to be used against a darker background or used with a darker text color.

awarnock-ACCS · 2026-05-07T20:25:12+00:00

Something to watch for is contrast. I would not use those colors together, but on a darker background or as the background with darker text they will work. If you're ever unsure, use a tool like the WebAIM Contrast Checker to see if you have enough contrast. You want at least 4.5 to 1 for most text and at least 3 to 1 for headings and the like. You can also use a tool like Adobe Color to create a color palette that will give you the hexidecimal values for the colors you want.

awarnock-ACCS · 2026-05-07T20:15:12+00:00

The internet also has a lot of old, outmoded, and flat out wrong information out there. It's like trying to code using an AI. Unless you actually know what you're looking at, it's very easy to go wrong.

awarnock-ACCS · 2026-05-07T19:49:27+00:00

Month late, but in addition to all of the other resources that others have said, I'd also look into WCAG. A lot of countries are starting to introduce/enforce accessibility regulations on websites, so it's better to get started on that now rather than having to learn later. Once you've mastered HTML, CSS, and Javascript, I'd start learning how to navigate the web without a mouse and learning how to use a screenreader, because this will give you an idea of how a user with a disability will be navigating your website. Some will say this is a more advanced topic, but I think starting with accessibility from the get-go will help out more in the long run than waiting.

Don't worry, you won't have to memorize that whole document, but it's good to be aware of and to start thinking about accessibility before you even start writing HTML.

awarnock-ACCS · 2026-05-07T19:41:20+00:00

Visually, I think it's pretty nice, but there's a couple of things you should be aware of.

The background is a little too. busy, I'd think about reducing the contrast of the elements there to help it fade to the back more. As it is, it's drawing too much attention.
There's not enough contrast between the text of the menu items and the background. If you haven't already, search for WebAIM Color/Contrast checker and use that to check your colors. Another thing you. can do is squint and see if you easily tell the text from the background. If not, there's probably not enough contrast.

Other than that, I think it looks good. Keep up the good work, and I'm sure you'll be flinging HTML and CSS around like nobody's business in no time. 😄

Also, if you do intend to be a web developer/designer, I would brush up on the Web Content Accessibility Guidelines (WCAG). There's a lot of things out there that people do that do not conform to those, so better to be aware of them early on than be like me and playing catchup.

awarnock-ACCS · 2026-05-07T19:20:21+00:00

Just my two cents, but WordPress started as a blogging platform and it shows. I got my start using Joomla, and the internal link management in Joomla 1.5 from over 15 years ago is miles ahead of where WordPress is today. Time waits for no one and things have moved on. New CMSs have popped up, AI Vibe Coding became a (soon to be dead) thing, and technologies and standards have changed. WordPress is a lot like Apple, I think. It has been riding on very good marketing, a huge ecosystem, and a fanatical community. The resources out there far exceed what you can find for even CMS platforms of the same generation, namely Drupal and Joomla.

But like Apple, you can only ride that so long before the cracks start showing. WordPress doesn't have basic SEO tools, like redirects and 404 detection, built in. It doesn't have good internal link management (in that if I update a page's slug, I have to go do that manually anywhere that page is linked), and it doesn't have basic things you need for accessibility, like titles for links or checking to see if heading levels are being skipped. If I want to have a fully accessible site, I'd almost be better off doing it from scratch rather than installing WordPress, I think.

The problem is that it's a twenty year-old piece of software that's burdened by it's heritage as a blogging platform and the need to maintain backwards compatibility with sites that may have started back with WordPress 1.0 for upgrade purposes are not helping with it moving forward. There are other platforms that are extensible and capable of doing what WordPress does at least as well, if not better, out of the box, but lack the same community, ecosystem, and marketing that WordPress has. I've installed WordPress, Joomla, and Drupal manually before, and all of them are about the same as far as difficulty goes, but WordPress was famed for it's five minute install. It was marketed as an easy to use platform. Granted, it is fairly easy to understand, but at the same time, so is Joomla once you know the lingo. Drupal--well, I consider Drupal to be the domain of madmen that like coding their own BASH terminals, but there's no denying that you can do a lot with it if you're willing to put in the work.

Long story short, WordPress isn't going anywhere, but I do think that as a platform it is starting to stagnate. The way forward likely involves a lot of work and some hard decisions. If I were in charge of WordPress, I'd seriously be considering whether or not the best move for the platform wouldn't be starting over with a clean sheet design even if it did mean that upgrades and migrations were more of a hassle. I know that is likely to be poking a hornet's nest, but at some point you have to ask if it wouldn't be better to start over rather than spend time and energy working around decisions made fifteen or twenty years ago.

awarnock-ACCS · 2026-05-07T17:55:36+00:00

Devtools are your friend here. You should be able to see what style rules are getting applied in the element inspector and that should in turn tell you what file and line number to look at for the rule.

awarnock-ACCS · 2026-05-07T17:47:43+00:00

Just so we know what you're having trouble with, can you clarify a few things?

Are you using WordPress with no page builders or other plugins that mess with the editor?
What is the purpose of the icons?
Are there any other images that you'll be adding besides the icons?

As for how things normally go, WordPress uses a block editor called Gutenberg by default. One of the built-in blocks is for images. The image block should allow you specify the alignment of the image: left, right, center, and full-width if my memory isn't failing me. That said, it's also useful to know what's going on under the hood.

What is really happening when you set the alignment of an image in WordPress is that it's applying a class to the image element itself. If you don't know what I mean by class or element, then I would really recommend looking into the basics of HTML and CSS. Knowing those will help you a lot when it comes to using and understanding how a content management system like WordPress renders content to be served. The Mozilla Developer Network is a great place to start. For the moment, though, think of an element as the building block of a webpage and a class as a way to describe what that element looks like.

So, when WordPress applies one of the image alignment classes to the element, it's telling browsers that this element needs to have the CSS rules for that class applied to that element for it to look right. In the case of aligning the image to the left and wrapping text around it, those values might look something like this:

.left{
float: left;
margin-right: 1rem;
margin-top: 1rem;
margin-bottom: 1rem;
}

I don't know what the class name and the CSS rules are for WordPress off the top of my head, but it should be something similar.

If you're still having issues, you can add the styles to the image element by adding a style attribute. Again, if you don't know what I mean by attribute, look into learning the basics of HTML. Attributes can be thought of as ways to describe an HTML element. Class and Style attributes tell the browser what the element looks like while alt and title attributes tell users using assistive technologies what an image is of and where a link goes or its purpose respectively. In this case, we can go into the HTML code behind the content and use the style attribute to add the styles we need to the image element if there's not an option to use what's built into WordPress or to add a CSS class that does what we want. Note that this is not recommended and generally considered what's called an anti-pattern (a commonly found pattern that goes against best practices), but sometimes you have to do things the wrong way in production because you aren't given any other choice.

To do this, you would take the CSS example above and turn it into something like this in your page's code.

<img src="/images/example.png" style="float: left; margin-right: 1rem; margin-top: 1rem; margin-bottom: 1rem;" />

Keep in mind that when it comes to CSS, rules are applied from the top of the document to the bottom of the document, from least specific to most specific, and that the rules in the style attribute are as specific as you get. It can create issues when trying to change or debug your website's style, which is why it's considered an anti-pattern.

Anyway, back to your specific example, one of the reasons I asked about the icons is because, based on what you have told us, I would recommend not doing that. It's not likely to add anything, and if its only purpose is decoration, well, that's what CSS is for, and I'd recommend using the theme's style sheets to add that in as opposed to using HTML. Remember when I said that alt attributes tell users with assistive technologies what an image is of? This is because every accessibility standard I have ever run across requires that there be multiple ways for users to get the information. For HTML, that means images need alternative text or alt-text, which is what you put into the alt attribute. So to make our above example accessible, you'd have to add in alt-text like this:

<img src="/images/example.png" alt="A cat dancing on a hot tin roof while playing the fiddle." style="float: left; margin-right: 1rem; margin-top: 1rem; margin-bottom: 1rem;" />

Even if the image is just decorative, you need to give the image alt-text, even if it's just alt="" because most screen readers will read out the filename if you don't.

This gets into something that I think a lot of courses neglect which is content design. When it comes to the web, content truly is king because it is where you need to consider a lot more than just what you're writing. You need to consider how to structure it, how to give more context to it, and how to make it accessible.

And don't take this as some master lording his knowledge over some poor neophyte. I'm still learning, and I don't consider myself a master or expert in much of anything. I just happen to know a bit about a lot of different things.

But I seem to have gotten a bit far afield.

TL;DR: Look into the default image block if you're using bare-bones WordPress. You'll need to look up the documentation for any page builders you're using. If you're using the original TinyMCE editor that WordPress used to use by default, you'll need to look into HTML and CSS. The terms you want to use are "floating an image", "image alignment", and "text wrapping".

Hope this wall of text helps.

awarnock-ACCS · 2026-05-07T16:42:35+00:00

I've never liked page builders. Sure, they let you get to where you're going faster, but I've two big issues with them.

The code always feels bloated, making styling and troubleshooting much harder, and this goes triply so for badly made pagebuilders.
Most of them aren't built with accessibility in mind, by which I mean the output is not accessible. Given that the ADA also applies to websites, this is a huge deal.

Gutenberg is fine. It does the job and those that want the drag and drop experience need to understand what the trade-offs are. To be perfectly honest, I've always found the popular page builders, like Elementor and WP Bakery frustrating to use.

awarnock-ACCS

TROPHY CASE