In my last blogpost I said I had started something called the Odin Project to learn more about coding. I am interested in learning JavaScript but I thought I’d go back to HTML and CSS for a time. I already know the basics of HTML and CSS so I decided to go on a deeper dive into both of them so I skipped the foundations course and went right to the Intermediate HTML and CSS course, although the completionist in me will probably go to the Foundations at some point, especially to refresh some of my base-level JavaScript knowledge.
But for now, I have been thoroughly enjoying the intermediate course which has gone over things like vector graphics (SVGs), HTML Tables, CSS Resets, and CSS Units. I am not even halfway through yet so there is still much more to come beyond all of that. And some of the stuff it has gone over I did already know, although even then sometimes I am surprised with extra information or tricks I didn’t know about in relation to it.
One thing I was surprised about was not knowing about HTML Tables despite having done several HTML courses previously. At first, I was confused and wondering if it was CSS Grids but no, it is very much a separate thing. Where as CSS Grids (and Flexbox) are used for designing and structuring content on a webpage, HTML Tables are purely for displaying tabular data – although that has not stopped some people trying to use it to design and structure a webpage (not recommended).
The great thing about it is once you get the hang of it, which in my opinion is pretty easy, you can make tables that are structured and designed exactly how you want. It was not long before I was freely making my own HTML Tables on things I am interested in – for one I have made a number of HTML Tables that hold Clash Royale troop/spell/building data. Check one out:
And then some of the HTML code to make it:
The CSS the table uses is not one made by myself but is a default made by someone else that is used by many people who make HTML Tables and can be found on the MDN documentation website on their HTML Tables tutorial. I plan to add my own touches to it eventually.
And I plan to make many more HTML Tables on my interests. It really is largely the first time I have used HTML to make my own thing rather than learning something in HTML but not really coming up with my own idea of what to use it for in some personal project. I think next up for me I will make a project to design a full-fledged website with using the knowledge I know about HTML and CSS and what I am currently learning. Then I would also eventually add my own JavaScript functionality to it as well once I begin learning more in that area.
I am also taking notes this time – something I am notoriously bad at – but I have come up with a good structuring system that enables me to easily index and go back to notes I have previously made. So far it is working. I am also making sure to keep notes as concise as possible, I often have issues with recording down too much filler/useless data when making notes. Such things have made me shy away from notes while learning, but I still need to understand that they are important to remember things and create summaries of main points and concepts.
It is also one way of getting out of doing endless tutorials because your notes will be – or should be – a quicker and easier refresher when done correctly.
Going back to the subject of the Odin Project I think it is the best format I have found so far. I like that it in itself is often concise and gives relevant information more so than too much overwhelming pages of data and text. And I also like how it seems to promote self-learning and discovery more so than other courses I have done in the past. It has made me want to do my own projects unlike other courses.
It is good at splitting the information up into sections and going over things you may not have seen in other courses. It is very clean and easy on the eyes. It also links to other relevant and additional information without instead re-hashing it which can or may cause more confusion.
One of the common other sources have included places like MDN – an invaluable documentation website when it comes to things like HTML and CSS and even has its own useful tutorials – and places like CSS Tricks which lets you discover ideas, tips and tricks you may not have known about something CSS related, plus they have their own documentation too. They also link to other things like videos and demonstrations.
But as I said it is the assignments that they specifically set that make you differentiate between what should be focused on for the lesson and what is just additional content. Too many times before in other courses I end up getting distracted by extra information that leads to big rabbit holes that I get lost down and end up not really learning the content in the intended way.
Sure, learning additional things is fine, but you also need to make sure to remain on track and stick to each new concept and thing you come across and make sure you learn and understand it before properly moving on. Each of the lessons gives a number of questions for you to answer to help you realise if you do or do not understand the lesson, which makes you understand if you need to focus on it for a bit longer or if it is time to move on.
And make sure to experiment around with the things you learn. I suggest using something like vscode to experiment and play around with. But also use something like Notepad to save some example code on concepts so you can easily go over it again – saving bits of good example code in a .txt file is a good way to not over-clutter your notes. Make sure to make a folder for the example .txt files so everything is easy to find and give the file relevant names to identify the concept it helps to explain.
Also identify areas you are most interested in and make time to integrate them with some of your interests to make cool little projects – this will be some of the best ways to learn to code the concepts you’re interested in and learning and can help you realise later down the line where you might want to specialise in.
There is so much that obviously you’re not going to remember every little thing and every element, which is why documentation exists online and why it is good to choose a specific area that interests you to specialise in.
So, for me as it stands the areas that interest me most and that I will try to specialise in are CSS Grids, Flexbox, HTML Tables, and SVGs. Of course, as I learn more this will change and evolve over time. But I will give myself time to create my own little projects with these things to do some self-learning and get much better at them.
As I move further forward beyond markup and styling and deeper into programming languages this will help me define the areas of these languages (namely JavaScript and Python) that I am most interested in, use them for projects, and ultimately from there decide what frameworks most interest me and whether I want to be more of a front-end or back-end developer, and so on, so forth.
Thank you for reading. If you have any queries please Email me, you can find my Email in the Contacts & Community section. Please also follow The Weekly Rambler on Twitter, Reddit, Pinterest and Facebook which you can access through the buttons at the bottom of this website. You can also use the social media buttons under each blogpost to share with your family, friends and associates.