Newest Project: Collection Of Really Good Interview Stuff (CORGIS)
A window into HTML/CSS
Last time I wrote a blog post about HTML, it got thoroughly roasted by Jason Knight. After reading through a number of his articles/comments, I would summarize some of his stances like this:
- Too many people are using web frameworks and no-code tools unnecessarily
- As a result, many websites today are in violation of accessibility requirements
The main target of his criticism was not the article itself, but the Citrus Heights Kiwanis Website I linked. The Kiwanis Organization is a nonprofit I am a part of, and they released their own standard web template using one of those no-code WordPress.com tools. I had also considered Wix, but WordPress was ready to go, we already owned a domain, and Kiwanis had its own IT team for the WordPress option.
Jason Knight does not exist in a vacuum. Even the much more diplomatic Attila Vago argues that if someone is not capable of making a nice website using vanilla HTML/CSS, then they are not qualified to make a website using a web framework. This statement is debatable, but it is rooted in beliefs about things like simplicity, accessibility, and a more general philosophy in starting with fundamentals.
Anyway, let me move on…
Motivation
To put it mildly, the tech industry is experiencing an “adjustment period” consisting of massive layoffs. Annoying companies are preying on this by encouraging LinkedIn users to invest in expensive interview preparation courses that there are free alternatives to.
If you have seen Grind75, by Yangshun Tay (who also wrote the much catchier-named Blind75), you know that a good consolidation of LeetCode questions already exists. I like the way it looks, and it is also open source. I wanted to make my own version, though, that had YouTube links added, and that also used vanilla HTML/CSS (it looks like Yangshun used React). Because the two of us have corresponded at least a little bit over our FreeCodeCamp articles, I hope he does not mind me creating a website that is supposed to look similar to his.
What I really want is to create a one-stop shop interview resource that contains no paywalls, affiliate links, or advertisements. I want it to have system design interview resources, coding interview resources, and the best blog and open source content I can find.
Starting Out
I started with the FreeCodeCamp markup — 17 lines consisting of a <head>, <body>, and links to a style sheet. I saw Jason Knight mercilessly dump on someone for a pretty basic and, in my opinion, innocuous HTML tutorial he wrote as an undergraduate student while learning the basics, so I’ll try to get this next part right…the <head> is for metadata, and the <body> is for the actual content of the website that is visible to the users. <h1> is a heading element, and the first of 6 (h1 through h6). Every website should have only one <h1> element.
I’ll go ahead and quote Jason Knight next:
H1 is THE headING (singular) that everything on the page — and possibly the site or set of related documents or interface pages — is a subsection of. It is thus that when possible the H1 should be the first content-bearing tag on a page. H2 marks the start of a subsection of the H1 preceding it, with the first H2 meaning the start of the main content if you haven’t used the <main> tag. H3 means the start of a subsection of the H2 preceding it. Do I have to explain H4..H6? This you do not willy nilly jump from a H2 to a H4, or start a document with a H5, or any other half-assed incompetent use of these important structural tags.
— Jason Knight’s comment, linked above
Next, I wanted to add a navigational bar. I used a W3Schools tutorial, and Jason Knight hates W3Schools, but…
…okay, actually, I will refrain from using that name for the rest of this post. If anyone sees Jason Knight show up in the comments, ask him questions about properly formatting tables while I run. I do not want to get hit by another one of his comments.
W3Schools has a pretty bad reputation, and most people would agree that MDN is better (including J…never mind), but I like their horizontal navigational bar, I like that they make it with HTML/CSS, and I like that they have such short tutorial pages with code/markup samples.
The horizontal bar was created by “floating the <li> elements.” In other words, the menu is using floating list items, and they style the navigation links.
Table
The table was taken from here, with some changes, explained in a blog post but explained much more thoroughly in a linked YouTube video.
He uses border-collapse:tighter. He uses min-width so the table will expand, but always be at least 400px. He used text-align:left so that table elements do not auto-center and get out of alignment.
I wanted to embed YouTube links via iframes, but that was blocked on many browsers. I am not sure how a site like Medium allows me to simply drop a YouTube link and then automatically embed it without triggering some sort of security issue. I got the rounded buttons from here that I decided to use instead.
The Right Boxes
This is the thing that needs the most work, and one of the reasons I am not linking the GitHub Pages hyperlink. The alignment of the boxes looked just fine to me, but it absolutely comes apart on mobile.
The boxes were based on an MDN tutorial. This was the fix to get two elements to display side-by-side, but apparently it did not work. They are not side-by-side on mobile.
Closing Thoughts
That’s all for now. It’s just about 15 of 75 Bind75 questions, so in another post I hope to simply continue on with the next section but maybe have a broader discussion of something like HTML, CSS, or whatever fix it required to get things properly aligned on mobile.
I’m probably going to return to the ShlinkedIn series at some point, but the ShlinkedIn developer himself has been busy messing around with GPT. No one has updated the site in a while.
Finally, in spite of its lack of popularity, I might continue the series on working the Kiwanis website. That site does not look modern at all, but because it is for our nonprofit it probably gets more traffic and makes more of an impact than anything on this blog.
