Learning vs Doing: Designing My First Website #1

Written By: CodeKristi

The first draft of anything is s**t. ~ Ernest Hemingway


The two apps I am using to learn HTML (SoloLearn & W3Schools) both recommended that when you start to program, it helps to initially use Notepad. So I did what they suggested. Also per their suggestion, I started with a “practise” website; with content like ‘This is the first heading’ or ‘This is the first paragraph.’ It was okay doing that for a bit, but when I first went to view it in a browser, I was totally over it! The so-called website I developed looked really sad and pathetic…!

In the meantime, I had also downloaded two IDE’s (see previous blog). I then started working in the first one, Brackets. This is the first IDE I have ever programmed in, so I can’t really give an opinion about it, but so far I have enjoyed working in it!

When you first open Brackets, it shows a ‘Getting Started’ webpage in HTML code. I immediately started reading through the code, which was quite simple to understand with my limited HTML knowledge. It explains all the general sections of the software, and how to use it. I didn’t really follow everything, but it gave me a pretty good idea how to use this IDE. As I go along, I am sure I will re-discover a few things that were actually explained to me!

I then opened the code in a web browser, where I scanned through everything again. Now I could start to see how the different HTML tags changed the content (as there were a few tags that I didn’t recognise when first reading through the code). So by just reading the ‘Getting Started’ page of Brackets, I actually learned a few things about layout and uses of some tags! I am really impressed with the way Brackets’ developers made the software accessible to beginners like me.

Start where you are. Use what you have. Do what you can. ~ Arthur Ashe

My sister recently bought her own Dietetics practice. She currently has a Facebook page, and only just got her first batch of business cards. She has done things like designing her logo and brand name, and she has quite a few customers already. We decided as soon as I am capable, I will develop her website for her. So when I felt I had a general idea of how Brackets work, I decided to jump in and start with my sister’s ‘real’ website!

Suddenly I had a real motivation to succeed and real problems to solve. I was able to do the basic layout in HTML: the <head>, <header>, <body> and <footer>. And of course the sub-sections like <nav>, <p>, etc.

If at first you don’t succeed, then skydiving definitely isn’t for you. ~ Steven Wright


As I haven’t really started learning CSS yet, I decided to see how far I can get with only HTML knowledge. I reached my first obstacle when I tried to make four horizontal navigation tabs at the top of the website. I was able to make headers / links, but it was in the form of a bulleted list, instead of four blocks next to each other (see image).


I Googled to try and find a solution. Everything I found was a combination of HTML and CSS code. That’s when I realised I will simply waste my time by trying to use only HTML. As HTML is only used for the ‘framework’ and content of the website, there are no HTML solutions for my styling problem available on the Internet.

I could easily have just copied the CSS code from the various websites in which I found examples, and carried on. I decided, though, that I would rather do the grunt work and first finish learning HTML and the CSS basics. Then only I would continue with my website (as I learn I would add in aspects that I have mastered).

Don’t worry about the depth of the sea, just learn how to swim.

I had an interesting conversation about this with my brother-in-law over the weekend. He is an engineer, and also started learning web development recently. It is helpful to compare what we have learned and which available resources we have found.

We have slightly different approaches to learning the web development languages. He is learning HTML & CSS in a broad spectrum, while I am doing it in a more in-depth manner.

He did initially start off with the SoloLearn app like I did, but then he decided to rather use W3Schools and Udacity as his main content providers. The reason for this decision was that they are broader spectrum, while SoloLearn is more focused. (SoloLearn will have a ‘lesson’ and assessment about every concept. W3Schools combine a few concepts into one section, and then shortly explain each. So both are great for beginners, but it takes a bit longer to work through the same concepts in SoloLearn than in W3Schools.)

He prefers this method as he is only learning for fun, and because he gets a bit bored with all the finer details. I prefer my more in-depth method, since I am planning to make a business out of this. I also want to be able to teach this to other people in the future, and for that, I need to really understand everything. By doing the detailed SoloLearn ‘lessons’ first, and then reading through the W3Schools’ more summarised content, I am able to learn, and assess, and then finally consolidate the new concepts before moving on too far.

If you can’t imitate him, don’t copy him. ~ Yogi Berra

It is easy to use other people’s code found on the Internet, but in reality, it would just lead to me not really knowing what I am doing. I also know, thanks to my husband’s insight into the programming community, that ‘sharing is caring’. There is a big move into the direction of open source code, thanks to projects like Linux (did you know Android is based on Linux!?) and companies like GitHub. Many companies have joined in during recent years. The complete, and might I add – quite interesting – history of open source software is on this Wikipedia page.

So using code that is shared on the Internet is not wrong, because those people wanted to share their knowledge (Thank you, programming community!) I would like to be as capable as those people one day and in order to do that, I need to learn all the itty-bitty parts of HTML & CSS now. Also, just copying code from other people may work for the short term. As the code becomes more complex, however, there might pop up a few bugs. If I only copied the code from somewhere, I won’t be able to fix it as I won’t understand the code…

So for now, I have to return to the virtual ‘classroom’ to learn some more! And then – hopefully soon – I will continue building my first website! Let me know how your first ‘real’ attempt at developing a website went, and maybe I can get a few tips!



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s