You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
25 lines
1.7 KiB
25 lines
1.7 KiB
3 weeks ago
|
<style>
|
||
|
|
@import "/style.css";
|
||
|
|
</style>
|
||
|
|
<main class="flex flex-col p-4 min-h-screen bg-gray-100 text-gray-950 dark:bg-gray-900 dark:text-gray-50 gap-4! *:text-xl">
|
||
|
|
<h1 class="pb-10!">Copying Popular Websites to Learn Tailwind</h1>
|
||
|
|
|
||
|
|
<p>I've advocated for years that copying other websites is the best way to learn web design. Copying is a <b>very</b> common and established way to learn almost any creative discipline including (but not limited to): Painting, Drawing, Writing, Music, Wood Working, Lutherie, Design, and Programming. To demonstrate this I've been doing copies of websites to learn <a class="text-gray-950 bg-gray-300" href="https://tailwindcss.com/">Tailwind</a>.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2 class="pb-8">Current Examples</h2>
|
||
|
|
<p>Here's the ones I've done so far</p>
|
||
|
|
|
||
|
|
<ul class="p-4">
|
||
|
|
<li><a class="text-gray-950 bg-gray-300" href="/copy/gitea.html">Gitea Project Page</a></li>
|
||
|
|
<li><a class="text-gray-950 bg-gray-300" href="/copy/linkedin.html">Linkedin Mobile</a></li>
|
||
|
|
<li><a class="text-gray-950 bg-gray-300" href="/copy/stride.html">Stride Game Framework</a></li>
|
||
|
|
<li><a class="text-gray-950 bg-gray-300" href="/copy/twitch.html">Twitch Home Page</a></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<h2 class="pb-8">View the Code</h2>
|
||
|
|
<p>You can view this code at <a class="text-gray-950 bg-gray-300" href="https://git.learnjsthehardway.com/learn-code-the-hard-way/zedshaw-games">my git repository</a>. The copies can be found in <a class="text-gray-950 bg-gray-300" href="https://git.learnjsthehardway.com/learn-code-the-hard-way/zedshaw-games/src/branch/main/pages/copy">pages/copy</a> and the tool I use to generate the pages is one I wrote called <a class="text-gray-950 bg-gray-300" href="https://git.learnjsthehardway.com/learn-code-the-hard-way/ssgod">ssgod</a>.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
</main>
|