console.reference: /learning through repetition

by fern-d3v

tl;dr

I made a reference site to use for development so I can quickly reference things I need in the future. So far I have made pages for HTML and CSS. I struggled with setting up tables in HTML and had a hard refresher in CSS syntax and proper management, but this project helped immensely.

A little while back there was a coding challenge over on codecademy to build your own personal cheat sheet site. Something akin to MDN. This felt like a daunting task. How am I meant to write a full documentation site when I am still learning the concepts myself? Then it all made sense, this wan't to make a full documentation site, this was to reinforce what I had learned by making me do it, and talk about it at the same time. That's when it became fun. I started working on the .css file and putting the things I have learned into action!

This site is not meant to be a comprehensive guide to any of the topics it covers, but rather a collection of my most useful quick references and notes. I hope that by making this , I can continually reinforce my understanding of these concepts and help others who may be learning alongside me! If you are like me and learn best by repetition, then this post is for you. I will walk you through the processes I have gone through so far in creating my reference site.

Strap in, grab a caffienated drink (don't lie, you were looking for yours just like I am mine), and get ready for a beginners guide to how to make your own quick reference site.

the why?

Once I got excited for this project, it started opening up for me. This is a perfect opportunity to for me to, like I mentioned earlier, reinforce my learning. It was about 1am, and I opened up VS Code (the IDE that I use) to begin this endeavour. Now, let's just get this out of the way real quick, I am not a proficient coder, but I am a proficient learner. I have spent a lot of time in my life studying different topics and taking notes on them. This background gave me confidence that even if I didn't know everything that would help me do this project, I could learn it and use what I learned as the content itself!

Going into this, I already had a decent foundation in HTML and CSS syntax and had created this blog site, as well as a (though dormant) portfolio site. I had assumed that it would be difficult, what do I add? What was the most important information to add to the site? The answer was quite simple, the most important information is whatever I currently am learning. If you are lost and struggling on a project similar, the best option to start is always to start at the beginning. Since I am at the beginning of my developer journey, it makes sense to make content on HTML, CSS, JavaScript (I just started learning this today!), and any other topic I learn as I grow in my journey to becoming a full-stack developer.

the navigation bar houses the pages for my different areas of learning

Starting at the beginning is always the best step when you are lost or stuck.

the how?

It can feel daunting at the beginning of a new project. Setting out a roadmap for how you want to lay things out can be a great way to organize your thoughts together. I am a very visual learner, so the best option for me was to jump into VS Code and build out my project structure. Once I had the folders set up and the documents created for each page, I got to working on the landing page.

I set up a folder for assets and then put everything else under the main project directory

the nitty gritty

Once I had my project set up in my IDE, it was time to get writing. You may not have noticed, but I am a big fan of the terminal style and minimalism. So my landing page (index.html) is quite simple in nature. It has a quick blurb about why I am doing this project as well as a list of features that I want to add as I go along and grow my knowledge. There is a navigation bar at the top with links to the other pages on the site (HTML, CSS< JavaScript, Git). It didn't take too long surprisingly, once I had an idea of what I wanted to write here, the landing page was finished and I was ready to move onto the html.html file

I absolutely recommend starting with your landing page, it can be tempting to jump into creating the bulk of the content first, but a good landing page can make your project feel at home

htm-let them cook

Since I had already finished the Fundamentals of HTML course by the time I actually started this project, I had a pretty good idea of the things I needed to add right away.

• A good base description of what HTML is
• A table that shows different HTML Elements
• A section for links to resources I actually use on a regular basis (e.g., the MDN page for HTML)

The description was quite easy, HTML is the content of a web page (don't worry, I gave a much better example in the actual doc.) The tables, that was something that didn't exactly click until I started doing them. I'm not sure why, but tables were my biggest struggle with HTML syntax. In my head it didn't make sense laying them out, I'm used to excel tables and those are already there for you to fill out with data. Remember what I said earlier about learning through repetition? Yeah, that's exactly what I am talking about. This helped me to solidify tables and taught me that formatting them with CSS can be the real nightmare.

I find it important to give a quick explanation of the topic before diving into its information

If you are just starting out with HTML, this is such an amazing projet to work on! It will reinforce your knowledge and application of syntax, execution and so much more!

While I was working on the HTML tables I ran into an interesting feature that I never even thought of as useful. it was the :hover feature in CSS. If you reference the HTML table you might notice one row looks different than the others...

It is quite stark, but I wanted a way to know exactly what line I was looking at

the hard way or the highway

Now that I had the tables figured out and styled how I wanted them (does anyone else jump between their .css and .html files as they write?), it was time to go onto the css.html file. This y'all, this was where my brain started to struggle. I am not the best with CSS still. It is something I am actively practicing to get better at. This page was my lesson in the hard way. Everyone on youtube kept saying that CSS was so so easy, and I feel lied to in a way. Yes, CSS is pretty siimple when you look at it on the surface, but introduce flexbox or media queries and things start to get a little complicated.

My CSS page was fun, but adding a third row of data did mess me up for the first few rows when writing the html

See, when you start to add a bunch of rules to a .css file, you start to run into the dangerous territory that I did, too many rules and many of them confilcting. I should have taken a screenshot of the file because it was bad. Multiple p { rules, and all doing different things, some confilcting. This was the proof that I desparately needed this project. I probably rewrote that file 3 times before I had it working properly and organized.

Working on this reference site has taught me so many things. It helped me understand how tables work in HTML, how to properly set up a .css file, and that :hover can be used for so, so many things! If you are just starting in your developer journey, or just want a refresher for yourself, I highly recommend that you build your own reference site. If you are new, you will learn a lot of things you didn't realize existed. If you are seasoned, it still isn't bad to refresh basics and maybe even continue your learning and build a personal knowledge base.

While working on this, I learned some crucial information about myself. To start, I learned that, like I mentioned before, I need to start at the beginning of things. Too often I get excited about a project and want to jump into the nitty gritty of it all. But slowing down, and starting at square one will always be the right choice for me. I also learned how much I genuenly enjoy this! In another life I was a video editor; writing code and making the site look good and be responsive, gives a kinship of feelings to the process of editing a video.

the future?

The reference site is off to a strong start. In the future I will be adding the ability to seach topics and keywords (no idea how I am going to achieve that, but I want to nonetheless.) I also plan on utilizing everything I learn from this on a super top secret app I am beginning to work on (more on that way down the line).

Next up: 3 free tools that make development easier