Responsive Web Design with CSS Libraries II(Tailwind)

Tailwind CSS Portfolio / online blog Checkpoint

What You're Aiming For

Tailwind CSS Checkpoint Exercise 1

Project Overview:

Create a webpage for your personal portfolio using Tailwind CSS. This exercise will focus on applying various Tailwind classes to structure the layout, style components, and make the webpage responsive.

Requirements:

1. Header Section:

• Design a header with your name and a navigation menu (at least three items: Home, Projects, Contact).
• Use Tailwind classes for styling and responsiveness.

2. Hero Section:

• Create a hero section with a background image and a headline introducing yourself.
• Apply Tailwind classes for text alignment, text size, and margin/padding.

3. Skills Section:

• Showcase your skills using a flexbox or grid layout.
• Apply Tailwind classes for styling and spacing.

4. Projects Section:

• Display a list of projects with images, titles, and descriptions.
• Utilize Tailwind classes for cards, image styling, and text alignment.

5. Contact Form:

• Include a simple contact form with fields for name, email, and a message.
• Apply Tailwind classes for form styling, spacing, and responsiveness.

6. Footer:

• Design a footer with social media icons and copyright information.
• Use Tailwind classes for flexbox, icon styling, and text alignment.

Tailwind CSS Checkpoint Exercise 2

Project Overview:

Create a landing page for an online blog using Tailwind CSS. This checkpoint will focus on applying Tailwind classes to structure the layout, style components, and enhance the visual of the webpage.

Requirements:

Header Section:

• Design a header with the blog's name/logo and a navigation menu.
• Utilize Tailwind classes for styling, including background color, text color, and padding.

Featured Posts Section:

• Showcase three featured blog posts with images, titles, and excerpts.
• Apply Tailwind classes for cards, image styling, and text alignment.

Category Section:

• Display categories for the blog posts in a visually appealing manner.
• Utilize Tailwind classes for badges or tags.

Recent Posts Section:

• Create a section displaying a list of recent blog posts with titles and publication dates.
• Apply Tailwind classes for text styling and spacing.

Newsletter Subscription Form:

• Include a simple form for newsletter subscription.
• Utilize Tailwind classes for form styling, input fields, and button styling.

Footer:

• Design a footer with social media icons, copyright information, and links.
• Use Tailwind classes for flexbox, icon styling, and text alignment.

Instructions

Technical Requirements:

• Use Tailwind CSS classes directly in your HTML file.
• Leverage utility classes for styling and layout (e.g., bg, text, p, m, flex, grid, etc.).
• Ensure that the webpage is responsive and looks good on both desktop and mobile screens.

Additional Guidelines:

• Experiment with different Tailwind CSS classes to achieve the desired visual effects.
• Tailwind CSS documentation (https://tailwindcss.com/docs) is your friend – refer to it when needed.
• Encourage creativity in design and layout while adhering to the project requirements.

Technical Requirements:

• Use Tailwind CSS classes directly in your HTML file.
• Leverage utility classes for styling and layout (e.g., bg, text, p, m, flex, grid, etc.).
• Ensure that the webpage is responsive and looks good on both desktop and mobile screens.

Additional Guidelines:

• Explore Tailwind CSS documentation (https://tailwindcss.com/docs) to find the appropriate classes for styling.
• Experiment with responsive classes to ensure a good user experience on different devices.
• Encourage students to think about the overall visual hierarchy and aesthetics of the webpage.

Responsive Travel Agency Website