Frontend Mentor - Profile Card Component

This is a solution to the Profile Card component project. This project showcases a simple yet elegant profile card design with basic HTML and TailwindCSS, designed to enhance front-end development skills.

---

Table of Contents

• Overview
  • Screenshot
  • Links
• My Process
  • Built With
  • What I Learned
  • Continued Development
  • Useful Resources
• Author

---

Overview

Screenshot

---

Links

• Live Site URL: View live site

---

My Process

Built With

• HTML5 for semantic markup
• CSS3 custom properties
• Tailwind CSS for rapid styling
• Flexbox for layout

---

What I Learned

Here are some key concepts and techniques I learned while working on this project:

1. Using Tailwind CSS for Rapid Styling:

   • Tailwind’s utility-first approach allowed me to style the component quickly without writing custom CSS.

   <div
     class="w-60 h-[400px] bg-gray-200 rounded-md shadow-2xl shadow-black border-2 border-black"
   ></div>

2. Flexbox for Centering and Layout:

   • Used flexbox for aligning and centering elements inside the card:

   display: flex;
   justify-content: center;
   align-items: center;

3. Responsive Design:

   • Tailwind’s responsive utilities allowed me to ensure the design works well across different screen sizes without needing custom media queries.

4. Structured HTML:

   • Focused on structuring the HTML properly for better readability and accessibility:

   <p class="text-black font-bold text-2xl">Robert Downey Jr</p>

---

Continued Development

In future projects, I aim to:

• Further explore Tailwind CSS to improve development speed.
• Implement accessibility best practices for users with disabilities.
• Experiment with CSS Grid for advanced layouts.

---

Useful Resources

• Tailwind CSS Documentation - Helped in understanding utility-first CSS for styling.
• CSS Tricks - A Complete Guide to Flexbox - Resource for understanding Flexbox alignment properties.
• Unsplash - Great for finding free, high-quality images.

---

Author

• GitHub - @sayaliakbar
• LinkedIn - @sayaliakbar