First please download the starter files.
Now please download the screenshots.
Finally, here is a Loom video describing what you will produce.
Tailwind Videos
A short Loom series on using Tailwind.
Killer Shortcut
If you go to the tailwindcss website, the keyboard shortcut Ctrl-K will allow you to search the documentation very efficiently.
Tailwind Setup
How to set up a TailwindCSS project.
The Task
In this exercise, you will build a front page of a site.
You will generate all the HTML and use exclusively Tailwind classes to style the entire content.
I repeat: you will not write any CSS in this exercise: 100% of the styling will be provided by the addition of Tailwind classes applied to HTML elements.
Two buttons have font awesome icons. They also have text inside them. Hide that text accessibly using the appropriate Tailwind classes.
The Content You Generate
- Site name: Transmetropolitan
- Font Awesome Icons for Buttons: user-astronaut, search
- Banner Area: four word title, five-word paragraph. Two paragraphs of approximately 20 words.
- Form: inputs & labels as in screenshot
- Cards: Short title, 15 word paragraph, “testing” link
- 12 Articles, 6-word title, 4 25-word paragraphs. First paragraph clamped to 2 lines via tailwind class
- Footer Quote: “Impossible is not a fact. It’s an opinion. Impossible is potential. Impossible is temporary. Impossible is nothing.” [ The Autobiography of Muhammad Ali]
Appearance and Behavior
Study the Transmetropolitan screenshots and video to determine the appearance and responsive behaviour of the site.
What To Hand In
Do not hand in your full project folder.
From your project folder, copy the build folder to your desktop.
Rename that folder yourfullname-transmetropolitan.
Then zip that folder and hand it in.