Skip to content
OverviewSolutions
7
Comments
5
P

Zahid Shaikh

@The-Lone-DruidIndia, Maharashtra, Pune80 points

Just a GeeK providing digital solutions like web development, UX/ UI Design and more. do visit my website to know more.

Latest solutions

View more solutions

Latest comments

  • P
    Zahid Shaikh•80
    @The-Lone-Druid

    Great work, I loved it!

  • P
    Zahid Shaikh•80
    @The-Lone-Druid

    Table seems to have a major difference, try using grid layout instead if managing in table is difficult

  • P
    Zahid Shaikh•80
    @The-Lone-Druid

    It's blazingly perfect my friend but it seems like the Font Family isn't as per the design, do check style-guide.md file that comes with the project.

    Kudos!

  • P
    Darkstar•1,350
    @DarkstarXDD
    What are you most proud of, and what would you do differently next time?

    Built with. 🔨

    • HTML.
    • Tailwind.
    • Vite.

    Features. ✨

    • The requirements of the project stated that the font sizes need to slightly change with the screen size, but without using media queries. So I used the clamp() function on the font size. 
      .text-clamp-100 {
  font-size: clamp(0.75rem, 2vw, 0.875rem);
}
    • To make the whole card clickable, I used a pseudo element. I added the pseudo element to the a inside the h2. Then made the card component position: relative. Now when top-0 right-0 bottom-0 left-0 is given to the pseudo element, it will be same size as the card component.
    • Added the hover effect to the card component. So when hovered over the card the box-shadow will get slightly bigger.

    New Things Learned. 🎓

    • It's my first time using Tailwind, so had to learn how to setup a project with it.
    • Using the the Tailwind CSS IntelliSense VS Code plugin. It was super helpful since it shows the underlying CSS properties for each utility class.
    • How to use the tailwind.config.js file to extend the default theme to include my own custom values.
    • Using @layer to include my own classes.
    • When using pseudo elements, Tailwind will automatically add content: '' by default so you don’t have to specify it unless you want a different value.
    What specific areas of your project would you like help with?

    Would love some overall feedback on any areas where I can improve.

    Blog Preview Card

    #tailwind-css#vite
    1
    P
    Zahid Shaikh•80
    @The-Lone-Druid

    Great work my friend 🥂

  • Kevin Kao•20
    @kevinkaos
    What are you most proud of, and what would you do differently next time?

    Learning to style a simple project with a all new tech stacks, nextjs/tailwindcss/figma/google fonts by doing while learning.

    What challenges did you encounter, and how did you overcome them?
    1. Never used these tech stacks, overcame the challenge by looking at documentation and going slowly.
    2. Importing google fonts, overcame with help from chatgpt samples.
    3. Using figma to convert into html/css, overcame with help from googling or playing around in figma.

    Responsive QR Code Challenge Solution

    #next#tailwind-css
    1
    P
    Zahid Shaikh•80
    @The-Lone-Druid

    Hi Kevin,

    I recently saw your work and it seems amazing! However, I did notice a few UI anomalies:

    1. Font Size of the Paragraph: The font size of the paragraph is not as per style-guide.md. When you download the starter code, you get a style-guide.md file that contains all the information required to style the webpage. It also includes the font size of the paragraph, which should be 15px.

    2. Accessibility in HTML Code: Try incorporating accessibility features in the HTML code. For example, just like we add the alt attribute to the img tag, we should also follow standard approaches to make the website accessible. You can use the main tag to define the main content of the webpage. This helps screen readers understand the structure of the webpage.

    Apart from these, everything looks great. Keep up the good work!