Medium Article

I built out this Medium article by Sushrit Pasupuleti using HTML and CSS. You can find the full live version here

Why Did I Do This? 🤷🏾‍♂️

During the course of taking a deeper dive into HTML, primarily through taking courses by Jen Kramer on LinkedIn Learning I realised that a lot of the HTML I had been writing before was simply just a coat hanger for my CSS. In other words, it was there simply to provide the content for my CSS to be able to style. I didn't really give much thought to things like accessibility, structure or semantics, instead caring more about just having something that that looked right from the user's perspective.

So, I decided to stop trying to speed-run through complex projects that (with my lack of an understanding in writing proper HTML), would only further solidify that shaky foundation, and instead took on smaller projects that would allow me to be more intentional with my code.

So, I decided to code something simple like an article to help me practice writing proper HTML.

Looking Back, What Would I Have Done Differently?🔄

I was unable to get the link tags to fit the width of the menu links container in the main nav so to overcome this issue I just gave them borders to give them more surface area for people to click on, however, I would've liked a better solution for this that's more robust and dynamic.

What Are Some Things I Learned In The Course Of Building This? 👨🏾‍💻

• How to use OG Tags - which are tags used to control the display of a URL when shared on social media.
• If you are writing a period of time, for example 5 minutes, you would need to prefix the date-time value with PT which stands for Period (P) and Time (T). This specifies that the defined period only consists of time and not a date.
• You have to have a good memory to be a good coder. If you forget that you had a margin on all your ul elements for example, you may get frustrated when you find that you can't align the a specific ul to the end of it's container.
• You can use text-align to center not only text and images but also HRs
• Don't only use em for widths and spacing, use rem if you want consistent spacing for say margins on bigger elements, or sizes of bigger elements, but if you want to, for example, make a buttons padding responsive to its particular font size then use em. It also makes it easier for you to calculate how what you're actually doing. Because if you know the base font is 16px or 10px, etc. then you can easily calculate what 2rem is or what 1.5 rem, and spacing things out becomes a lot less like guess work.
• How to easily get the fonts from a website using this method

Technology Used 🎮

• HTML
• CSS