Coding For Websites: An Absolute Beginner Experience

This article contains three parts. Part 1 is about what is encountered as an absolute beginner. Part 2 is about improving. Part 3 is a reflection of to what extent the process is worth it for those who have yet to have any coding experience.

Introduction

There is a big difference between learning to code in school versus learning how to do it outside of school. Sure, there are online courses out there, but if you're just testing out web design you're often not starting with a course or bunch of exercises. You're just trying it out to see what it is. This article is about if you start to code by just looking it up as you go along.

The thing is, for most contexts, you don't NEED to do your own web design. There are free web site builders out there with templates and support for custom domains at a price, if you want to jettison the default URL to look more professional. If you have more money but little time and see it as a needed investment, you can pay a web designer for a professional-looking site. So, either way, when you've got a more casual interest in giving it a go, you may prefer to just jump right into it.

Maybe you did learn to code at school, but then didn't use it and forgot and are now trying to do code again. This article may address you as a potential beginner or an actual beginner, or if you are more experienced, in the imagined role of a new beginner.

This article is a reflection on what it has been like to start as an absolute beginner, without any informal training. If you are considering doing web design or to learn to code but don't have the patience for tutorial exercises, this is what it is to just dive in. This includes some stuff that is really helpful to know but you won't necessarily find easily if you weren't actively looking for it. This has been written while still fresh from being an absolute beginner (I started a week ago).


Part 1: Starting Steps

By looking online you quickly figure how to do the basics, like paragraphs and bold text and underlining. You can easily look things up by searching for what you're looking for then adding 'HTML' or 'CSS'. W3Schools in particular is a great site. Making a site look good is a different matter. So it is not uncommon that people give coding from scratch a try and then stop and go to format generators or templates. They provide easy access to examples of CSS code, which is used for styling how things look. While some things can be styled just with HTML tags, the things that really make a webpage look nice call for CSS.

Applying HTML and in-line CSS tags are really easy. Just copy and paste sample code and substitute text in-between. But for CSS otherwise, it is a little less immediately intuitive. This can push people towards using templates and layout generators instead of doing their own code. Even so, a lot of coding, be it HTML or CSS and beyond, is about pattern recognition and building up a vocabulary of patterns you understand.

If you want to dip into doing web design, but don't have the time (or patience) to do tutorials, it is probably better to start with templates or layout generators. They are a starting point and fallback position you know works, particularly in relation to more complex elements like menus. You can think of these templates and layouts as 'training wheels'. You start by changing the colours and maybe other properties like fonts, sizes and margins. This eases you into the CSS side of things. You then start to add new lines of CSS code, building on the pre-existing code.

Then, after you get even more comfortable, you can start taking the training wheels off and increasingly integrate code from multiple sources. You can replace or transform layout/template elements into what is more your own design. Later on, you can start to implement simple scripts to do what is impossible in HTML and CSS alone.

There are still problems that come with starting through use of a template/generated layout, as when you don't know how the code works, you don't know how to troubleshoot the code.

Starting with a layout generator or a template is a bit of a risk. When you code one line at a time, if something goes wrong, it is probably because of what you just put in. When it comes to a template or generated layout, you start with a chunk of code you didn't write. Instead of only adding code as you progressively understand how things work, you can have code for elements you don't yet understand. This means that when you encounter an issue, you may not be able to resolve it yourself. You can be more reliant on the questions of others who have encountered a similar or the same problem and have already gotten an answer.

As an absolute beginner, some of the responses within the multitude of 'help me with this code' posts, as well as tutorials, make certain assumptions ... and so you can try the solution and it doesn't work as there was something else unexplained. Something that usually doesn't need to be explained ... except to an absolute beginner.

To give an example, many new NeoCities sites start by using the format generator created by sadgrl. You may do that and then want to modify your site. Maybe you want a dropdown nav menu or a sidebar with icons or just a different kind of layout. You find somewhere online sample code that is what you're looking for and instructs you to put it before the header. You do that and you get an error.

What happened there is that you ran into an assumption about how you have structured your page. If HTML and CSS is combined in the same webpage, the best practice is to have your webpage go like this:

This is since by doing all the style stuff in the header, it prevents content loading before the site is ready to apply the style, because that would mean a flash of unstyled content. It just isn't as professional a look.

As it turns out, at time of writing, sadgrl's format generator has the CSS stuff below the HTML stuff. This isn't necessarily a bad thing for a website format generator. It can be a more intuitive order when first starting to have main content presented first. That way you can experiment with changing content before going to the CSS stuff. It does, however, mean that if you had started with a generated layout or template, you don't automatically know that an instruction to put stylistic code before the header is really saying to put it in the CSS section, wherever that is.

Even without format generators and templates, it doesn't help that code is often presented as HTML code snippets followed by CSS code snippets. This can imply a natural order of the HTML code first and then CSS after. This is no issue if you know how pages are normally structured, but absolute beginners just looking things up as they go along may not know that. Also, they may be unaware that if you want pages that look good at different sizes, it is important to use the media query feature (to set layout changes that apply at or below one or more set screen widths) and to set margins and sizes in percentages (or viewport sizes).

Absolute beginners can also be tripped up by where to put scripts, because older answers will direct people to put them right before the end of the body. This prevents the loading of a script from stopping the rest of a page being loaded, resulting in a smoother experience ... except, preventing scripts from loading until a page fully loads creates its own issues. What should be done now is to put scripts in the header, but with an async or defer attribute. Both means 'start downloading but don't wait until the download is complete to do the rest of the page.' The difference between the two is that defer will only execute the script when the page is fully loaded, while async will start it as soon as it has finished downloading.

Related to having code you don't understand, if you start with a generated layout/template, is that it may also come with some unexpected features. For example, when you click on a URL, it can replace the existing tab (this is the default setting) or open in a new tab or window. Some templates/layouts may have changed this or other settings (like for media query) and you cannot adjust these features until you know what to find and replace.

The above can make it sound like it better to not use a generated layout/template, but it isn't really an issue so long as you try to progressively understand all the elements of what you use. Provided you look up unfamiliar elements as you go along there won't be surprises.

Here's another issue that can catch absolute beginners: the formatting of visited URLs are strictly limited for security reasons. If you want different formatting for visited and unvisited links, (and/or with hover effects and active link formatting), there is a specific load order it has to go in. Even then if you use CSS transitions it will not necessarily work properly, due to longstanding bugs in some browsers.

Tutorials often don't explain where HTML and CSS go in the same webpage as the absolute best practice can be considered to be when HTML and CSS are kept in separate documents (and without in-line formatting at all.) But a more practical approach is to keep both in the same document when you are starting out, as you want to be able to test changes as quickly as possible.


Part 2: Pathfinding Away From Dead Ends

Really, it isn't hard to just start using code. The tricky part is when things go wrong and you just can't pinpoint the cause. That's rather like maths if you've ever been convinced you are doing all the right steps but yet keep getting an incorrect answer. Should you start to code, it is nearly inevitable that this will happen at some point or another.

When you get stuck and cannot get unstuck ... yeah, this is what can really lead people to give up learning to code. So the biggest help an absolute beginner can have – despite often being missing from tutorials – is teaching how to troubleshoot.

When you're an absolute beginner and start branching out to trying out other features, you can find code that does what you want but also find it doesn't work for you. This is because different people use different names for the same variables and so applying a fix requires knowing what code needs to be replaced.

I worked out a troubleshooting method. But before I go into that, I'll explain a 'band-aid method'. I've found that sometimes I just haven't been able to locate an issue, but could workaround it by using a span style tag to override the 'global' CSS code.

This isn't how you're meant to do things, but it is handy for when you want a quick fix for a live site whilst you try to find the issue behind-the-scenes in a non-public page. Once the issue is found, the 'band-aid' can be removed. You might ask, why bother trying to find the issue if you can use this workaround? The answer is that if you want to get better at coding or programming in general, finding these issues are part of how to grow and improve. This is particularly useful if you want to be able to apply the templates/extensions/frameworks and so forth that use Javascript or other programming languages. That is where knowing code at more than a beginner level really helps.

As for a troubleshooting method, when something went wrong and I didn't understand why (meaning fixes I found online weren't working) I would go back to a fresh copy and then apply the code that should do what I had wanted. This could require copying in code from both a 'question' section and an 'answer' section. The code would work. I would progressively paste back in the code I already had, to improve the chances of isolating the issue. If that still didn't work, I would drop trying to make that change until I had a better understanding of what I was doing.

Usually, though, I would find the cause. Sometimes it was a typo my eyes had kept missing. If you don't have the proper punctuation and spacing, code simply won't work. Sometimes one line was contradicting another, but at that point I lacked the coding knowledge to be able to see that. Sometimes the contradiction comes from 'parent code' affecting 'child code' and when you're less familiar with stuff like classes and divisions, some of the interactions of code can just slip right by you.

Absolute begineers can retype in a line of code. They can copy and paste it and see the code work in action. That is separate to understanding what the code is actually doing.

As an absolute beginner, it is hard to go straight into mixing and matching code, because different people use different words for the same variables, or sometimes use different methods to achieve a similar thing. Combining code from multiple sources causes issues if you don't understand what the individual parts do. But that gets easier in a short amount of time as you come to understand the basic terminology and have a better grasp of when things need to be renamed or when certain lines have to be replaced or deleted.

As an absolute beginner, you may also be more likely to prefer HTML over CSS as that can take more time to set up. Nevertheless, CSS is needed to do various things that cannot be done with styling done by HTML code alone. If you want to do more interesting things, setting up different CSS classes will become necessary. They can take longer to set-up, but you only need to define each class once.

Over time, you are more likely to appreciate the importance of formatting your code. The messier it is and the less consistently formatted it is, the harder it will be to manually find errors. Web editors can automatically detect missing tags but they will not detect every issue. Sometimes the problem may be that a space is missing, or a semicolon, or a bracket. The more organised you are with your code, the easier it will be to proofread and to find the properties you are looking to change.

Different people will prefer to organise their code differently. Some people will leave empty lines while others will be happy just having the text be aligned consistently. Some people will use comments (these appear in the code but do nothing), to better label their code. Finding the format that works for you is part of being more confident with code.


Part 3: Worth Doing?

If you're someone with a need for a website, be it personal or otherwise, should you bother to learn to code your own site? There are a few factors to consider.

It is true that a lot of coding may no longer be required in the future due to AI, but words have to be interpreted and the more subjective the language, the more it is open to interpretation. Knowing how to code can improve your ability to provide more specific prompts for a result closer to what you have in mind. For example, someone who doesn't know how to code may ask for something on the page to have more space around it, while a programmer may directly ask more specifically for more padding, or for a larger margin. In the former case, AI may interpret the request one way when the other is desired. Getting the end result can take longer.

Anyway, creating a site really doesn't take that long.

In a couple days I customised a header/footer/sidebar layout, complete with a fancy animated navbar. The site adapts to different-sized windows and devices. In fact, my navbar is more responsive than many major sites, like Ebay (which is unresponsive below a certain width) and most sites which are made responsive by shoving elements into a click-to-activate 'hamburger' menu. This is worse from a design perspective as hidden elements are overlooked, as found by empirical evidence.

For personal sites, you can save money. No need for premium templates, especially if you're able to make use of stuff like Bootstrap, which is completely free and has layouts as professional as you'll find, including responsive layouts.

You can also save money in other ways, because free web site builders are by-and-large not in the business of only being free, but in the business of upselling stuff you do need to pay for. You can get a totally free site hosted on a place like NeoCities, or a near-free site through a web registrar. In either case, you can get a much better deal in terms of price, features and control than what web site builders offer.

Learning to code puts you in the mentality of really considering how your site looks, especially from page to page. There are loads of templates out there – you can still be inspired by WordPress themes and other templates if you want – but you don't have to scour through templates and plug-ins (both of which can be expensive) or be limited by how they are coded, or for that matter, limits imposed by the website builder/hoster. For those with professional needs but tight budgets, this can be important.

Really, there isn't much difference between selecting a template and modifying it versus copying, pasting and modifying code from a layout generator. Also, in the case of sites with a more professional purpose, you can learn to code a site without ever actually coding your site.

Why do this?

Knowing how to do the code yourself is a path to better web design, because first and foremost it comes with the mindset that your site's design is a work-in-progress and not something done all in one go when you first launch the site, unless and until there is a redesign.

This is important, because it is only by experimenting after your site has content that you can really see the difference that comes from adjusting the layout. What works best depends on context. There are many sites of authors, musicians and various small businesses that aren't well-designed, chiefly because a design was picked and stuck to even when the content that came later made keeping that format a bad fit. If you can code, you can empower yourself to cast yourself the best possible light.

If you can code your own site, at least to some degree, you can at a minimum work better with web designers/agencies if you have professional needs beyond your own capacity to do yourself. You will have a better perspective on how design details matter, as you will see differences through your own experience. You may be exposed to a broader range of themes and design ideas that you can point to in order to give more specific, accurate instructions on what you want. Web designers and agencies have to go by client wishes. The more educated you are about the design, the more you help others help you.

For creative people, learning to code a website has the direct benefit of making it easier to learn to program in general and to understand programming. This unlocks broader possibilities for writers and artists to tell stories using more interactive means or just to write characters who know how to code.

There are obviously strong reasons why not to bother. Maybe you're too busy. Maybe you know you aren't good enough to do it to the desired level. There's no reason to here restate whatever reason or reasons you may have. You already know what they are. But if you've read this article, you might have a better understanding of whether those reasons are enough, or if there is more reason to give it a go.



Trajecient was, at time of writing, an absolute beginner at website design and coding, with no prior experience from primary, secondary or tertiary education.

Permission is hereby given to share, in part or full and without compensation, this article on any website or other platform or publication, provided that use complies with to the Trajecient Terms of Service in content not being used for generative AI services or is used in an uncontrolled manner likely to lead to incorporation into AI systems used for AI services described by the term 'generative AI'. Attribution is desired, but not essential.