Using HTML And CSS Properly — Part 2 of 3 — Example Site Markup
<p><a href="https://medium.com/codex/what-i-mean-by-using-html-and-css-properly-part-1-of-3-44804722e33a" rel="noopener">In the first article of this series</a> I outlined the history, reasoninng, and logic behind HTML that it seems most people never seem to grasp. This time around I want to from scratch code a simple “personal website” homepage to show the “you don’t need classes on everything” semantic markup approach.</p>
<p>Note that when I talk about “DIV for nothing” or “classes for nothing” I am <strong>not saying you don’t need classes or DIV!</strong> What I’m saying is don’t use so blasted many of them.</p>
<p>Again not to go back to the gormless inanity that are frameworks, but when I see code like this:</p>
<pre>
<footer class="mt-32 flex-none">
<div class="sm:px-8">
<div class="mx-auto w-full max-w-7xl lg:px-8">
<div class="border-t border-zinc-100 pb-16 pt-10 dark:border-zinc-700/40">
<div class="relative px-4 sm:px-8 lg:px-12">
<div class="mx-auto max-w-2xl lg:max-w-5xl">
<div class="flex flex-col items-center justify-between gap-6 sm:flex-row">
<div class="flex flex-wrap justify-center gap-x-6 gap-y-1 text-sm font-medium text-zinc-800 dark:text-zinc-200">
<a class="transition hover:text-teal-500 dark:hover:text-teal-400" href="/about">About</a>
<a class="transition hover:text-teal-500 dark:hover:text-teal-400" href="/projects">Projects</a>
<a class="transition hover:text-teal-500 dark:hover:text-teal-400" href="/speaking">Speaking</a>
<a class="transition hover:text-teal-500 dark:hover:text-teal-400" href="/uses">Uses</a>
</div>
<p class="text-sm text-zinc-400 dark:text-zinc-500">©
&copy; somebody, All Rights Reserved
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</footer></pre>
<p>Doing the job of</p>
<p><a href="https://medium.com/codex/using-html-and-css-properly-part-2-of-3-example-site-markup-f1fb7b374bc2">Click Here</a></p>