How to start if I'm new to WebDevelopment (Tailwind)
Here are notes for my video How to try out web-development for beginners with Tailwind CSS and no npm
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.tailwindcss.com"></script> </head> <body> <h1 class="text-3xl font-bold underline"> Hello world! </h1> </body> </html>
Example from video
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.tailwindcss.com"></script> </head> <body> <h1 class="text-3xl font-bold underline"> Hello world! </h1> <!-- https://meme.eq8.eu/ --> <img class="h-24 w-24 object-cover" src="images/me.jpg" alt="Myself haha"> <img class="h-24 w-24 object-cover mt-2" src="https://meme.eq8.eu/excelent.jpg" alt=""> <img class="h-24 w-24 object-cover mt-2" src="https://meme.eq8.eu/take-my-money.gif" alt=""> <div class="mt-8 flex gap-2"> <img class="h-24 w-24 object-cover" src="images/me.jpg" alt="Myself haha"> <img class="h-24 w-24 object-cover" src="https://meme.eq8.eu/excelent.jpg" alt=""> <img class="h-24 w-24 object-cover" src="https://meme.eq8.eu/take-my-money.gif" alt=""> </div> <div class="mt-8 flex gap-2 [&_img]:h-24 [&_img]:w-24 [&_img]:object-cover"> <img src="images/me.jpg" alt="Myself haha"> <img src="https://meme.eq8.eu/excelent.jpg" alt=""> <img src="https://meme.eq8.eu/take-my-money.gif" alt=""> </div> <div class="my-5 text-xl text-green-500 animate-spin inline-block">Important</div> <div class="my-52 border-2"></div> <p>hi again</p> <p>ahoj</p> <p>ola</p> <h1 class="text-3xl text-red-600">HI</h1> <figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800"> <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="images/me.jpg" alt="" width="384" height="512"> <div class="pt-6 md:p-8 text-center md:text-left space-y-4"> <blockquote> <p class="text-lg font-medium"> “Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny.” </p> </blockquote> <figcaption class="font-medium"> <div class="text-sky-500 dark:text-sky-400"> Sarah Dayan </div> <div class="text-slate-700 dark:text-slate-500"> Staff Engineer, Algolia </div> </figcaption> </div> </figure> </body> </html>
VUE JS
Adam uses Vue.js in his projects to demonstrate how to do things like dropdown
so here is setup Tailwind + VueJS based on Vue CDN quickstart
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.tailwindcss.com"></script> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <title>Tailwind CSS Demo supported by Vue.js</title> </head> <body> <h1 class="text-3xl font-bold underline mb-5"> Tailwind CSS Demo </h1> <div class="text-xl mt-2">{{ message }}</div> <script> const { createApp, ref } = Vue createApp({ setup() { const message = ref('Hello vue!') return { message } } }).mount('body') </script> </body> </html>