Learning HTML/CSS with dyslexia

I am finding it really hard to learn the coding side of things as i struggle with dyslexia and i cant take any of it in.
Are there any tips tricks or software to help?


Hmm, my guess is that you will probably know better what you need than anyone else, but I may be wrong.

One nice thing about code (well, especially HTML and CSS) is that it can be broken up into very small units. So my suggestion—for what it’s worth—is to study very small bits of these in isolation, and hopefully a bigger picture will emerge. For example, HTML consists largely of tag pairs, like




And CSS involves quite simple rules for styling these elements. It starts with something as simple as this:

div {


So, as I say, break things down into their smallest parts, and that may help. :slight_smile:

I’ve known plenty of people in Software Engineering roles who suffer from dyslexia, and to my knowledge many of them thrive in their fields of work. Whereas programming can be a creative process like writing we do get a lot of help from IDE’s and auto-correction too, in addition to generally friendly error-reporting.

I’ve always found it easiest to look at code as nested. For example, as ralph.m points out HTML can be broken down into its elements like so:


I think of most code in how it can be broken down. HTML is a nested language and tags often encapsulate other tags. For example, if you’re using a modern IDE you can write <html> and it’ll finish the tag for you. Now that you’re inside <html> you know where to go from then. As already said learning the individual tags works wonders for everyone.

The same can be said for a piece of basic C# code that handles users logging into a page through Facebook Connect.

if (!_connectSession.IsConnected()) {
	lblStatus.Text = "Please sign-in with Facebook.";
} else {
	try {
		Api = new Facebook.Rest.Api(_connectSession);
		Facebook.Schema.user u = Api.Users.GetInfo();
		ProfilePic.ImageUrl = u.pic_square;
		lblStatus.Text = string.Format("Welcome, " + u.name);
	} catch (Exception ex) {
		lblStatus.Text = ex.ToString();

I break the code down into descriptive words, so that I know that if a user is not logged in they should be informed, otherwise the page should take their information and use it as required. I also know that there could be problems with how this information is posted if it’s not readily available, so I try it, and if it breaks I throw an exception to say why it didn’t work.

By breaking code down and using the IDE as much as possible I can fully understand what I am doing with code.

Hopefully this helps with your question.

It depends upon your type of dyslexia and how you prefer to learn; your age and background and current computer literacy.

I myself am dyslexic though I personally don’t have a great deal of problems with writing HTML or CSS.

Although I can write scripts and know one or two programming languages, I tend to find scripting a lot more difficult to memorise.

Would you find a video tutorial useful?

Luckily with (x)html it is fairly ridged and has set-out grammar rules in pseudo code so you don’t have to learn more than around 90 different tags/elements. Obviously there are also attributes but they have rules as to what they can be used with, etc.

Perhaps a List of all the HTML Elements might be useful for you; including their attributes and a brief explanation of what the tag does, for example:

Used to include an image within the web page.
Attributes: id, class, style, title, lang, xml:lang, dir, src (required), alt (required), longdesc, height, width, usemap, ismap

Do you have a specific goal you want to achieve with your learning as it helps with focus. For example, do you want to make a page about your favourite hobby or something?

Ultimate has a good suggestion, though I’m no expert on dyslexia.

I think it’s important to understand your learning style. If you are like me, and learn things by doing them (As XMLcoder suggested, a video tutorial where you can watch and follow along), you may benefit form this wonderful tip.

During a personal development course I attended last year, I found out that if I tap a pan, or my foot, while I am concentrating, it helps me focus. So now when I really need to get something in my head, I do this and it helps. I’ll remember what the learning style is called later.

I always thought I was a ‘visual’ learner. However, according to the course coordinator, a visual leaner is someone who can just watch and do. I’m a hands on guy. I need to do it over and over again to really get it to sink in.

You may find your dyslexia will work for you, for example, picking out patterns and inconsistency (such as the absence of closing brackets) may come easily to you.

Good luck, and remember, tap your foot!

I just did a test online to work out my learning style and it came back as i am a Visual and Auditory learner.


No online test can truly quantify your traits. The best way for you to learn to program is to get stuck in and see what works best for you.

To be honest, I cannot see dyslexia causing many problems when learning to script or program because the syntactic rules of coding are entirely different to that of writing. I’ve known plenty of dyslexics who have become proficient, even fantastic programmers. As unconformed rightly states you may even find it to be an advantage if it means you check certain things more than others.

The most important thing to remember is that coding isn’t for everyone, and that everyone struggles with it at some point in their life. If you’re finding certain concepts hard to grasp it’s probably because it’s a hard concept for some people. For example, I struggle to understand version control with Git, even though everyone I know who uses it tells me that it is the easiest thing to use in the world.

Don’t worry so much about learning it, and just give it a try.

That test wasn’t very scientific but it suggests you may indeed benefit from watching an online video tutorial so you can repeat it and ‘see and hear’ what is happening in the browser first.

Sometimes if you talk to yourself (I mean read aloud to yourself) when reading and you are trying to understand a concept it may stick in your mind longer.

Do you have any major problems with reading in general? I don’t but obviously my spelling and grammar are slightly compromised.

When you are writing HTML you might benefit for the W3C Validators because you can use them to check if you are writing things correctly. You could use them as a learning aid. So when it shows errors you can try and figure out what you did wrong - although they have highly cryptic error reports.

Basically I would try and begin with HTML first and learn some of the main elements, e.g. HTML, HEAD, TITLE, BODY, H1 - H6, P and IMG Once you understand those 12 elements you can to a lot of the basics. Printout a basic skeleton page if you have to.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
      I am a Title
      I am a paragraph.

It is rather hard to suggest a specific approach to learning HTML as with study books some people prefer different layouts and writing styles.

Like we have mentioned; try first with small steps don’t attempt to do a complete CSS layout with your first page.

The problem with dyslexia is it can be very specific how it affects people my short-term memory is supposedly weak. Thus with Scripting I’d have mental blocks even though my intelligence rating is within the top 1%.

Whereas some of you have noticed some people who are dyslexic really excel with programming. though they might be extremely weak at other tasks such as reading “unknown/unfamiliar” words.

Is there i way i can put blocks of colour in code view to separate things,

I am not sure but obviously you can use software that automatically highlights/colours the syntax.

For example most good coding programs can do something like the following so you can see difference between the tag, attributes and values:

<img src="example.png" width="10" alt="x" />

Some of the Firefox plugins will highlight page elements. I suspect possibly there’ll be a script or program that will highlight syntax in the way you are thinking.

is there one in dreamweaver cant find one???

Stop using dreamweaver. You will never get anywhere using it.


Notpad ++ does a great job of this. Though it seperate this scripts, i.e. PHP from CSS.

Dreamweaver does this by default. Of course, you need to be using Code view rather than Design view. You can also set what colors are used under Preferences.

Dw is an excellent code editor. I don’t see any reason to say that. Just because it includes WYSIWYG options isn’t a reason to hate it altogether. Obviously having that extra stuff is bloat and a waste of money if you don’t need it… but heck, Dw came as part of a package anyway, so I use it coz I’ve got it. I’ve tried other code editors like Coda, TextMate etc, but honestly I much prefer Dw for code editing.

It’s not 1998 any more. People have largely ditched the FrontPage mentality and the likes of Dreamweaver are often used by professional developers for syntax-highlighting, code completion and for easy deployment in the same way that established tools like Visual Studio are used.