I will need support with heights but since I am not using the paid version yet, I just keep guessing.
What challenges did you encounter, and how did you overcome them?Doing a grid table with tailwind css for the first time was quite challenging, I had to google and leverage chatgpt for solution.
What specific areas of your project would you like help with?none.
Hi @omarnate1, 👋
Nice work on your solution. I also use Tailwind in my projects, and I think I have a tip for you.
I find it helpful to add the fem- prefix to your color names in your tailwind.config.js file.
colors: { "fem-moderate-violet": "#7541c8", "fem-very-dark-grayish-blue": "#48556a", "fem-very-dark-blackish-blue": "#19212e", "fem-light-gray": "#cfcfcf", "fem-light-grayish-blue": "#ecf2f8", },
This makes it easier when using Tailwind's IntelliSense to access the Frontend Mentor(fem) colors used in the design. So, for example, when you want to set a background color to moderate-violet. Type bg-fem and IntelliSense will list all of your custom fem colors to choose from.
I hope this is helpful. 😊
Got to grips with using the auto-fit value in the grid, which reorganises the cards as the viewport size increases.
Was able to figure out the layout of the cards on the large viewport sizes and implement it using grid-template-areas.
Hi @erratic-enigma, 👋
Your solution looks great! Responsive with three layouts. Very nice!
I don't think I have anything substantive to really add. I did this project in 2022 with Vite and Vanilla CSS. If I were to redo this project, I would use Tailwind CSS as I do now with all my projects. I also use the React framework, Next.js, quite a bit now and use its built-in Tailwind support. It can make your html elements look a bit weird when utilizing the additional Tailwind classes, but it makes it easier to make components with their own stylings attached to the class attribute.
I have also used SASS in other projects, but I think Tailwind is winning me over for its ease-of-use and customization.
If you haven't tried Tailwind CSS, you may want to give it a try at some point in your journey. https://tailwindcss.com
I hope this personal perspective is a little helpful. Keep up the great work! 👍
Hi @aapa1993, 👋
Nice work on this project! I've also used Tailwind CSS in mine.
My suggestion for this project is to try adding a transition on your button hover state. You can easily do this with Tailwind transition and duration classes.
For example, with your button code block:
<div class="font-montserrat bg-custom1 w-full flex items-center font-bold gap-2 justify-center text-white py-2 rounded-lg hover:bg-custom2 "> <img src="icon-cart.svg" alt="icon-cart"> <a href="#">Add to Cart</a> </div>
Simply modify your div element by adding these classes:
<div class="... transition-all duration-300"> ... </div>
This will give you a 3ms soft transition between the background color change.
I hope this is helpful. Keep up the great work! 👍
Hi @fl1pHover, 👋
Nice work on the recipe page project! I also used Tailwind in my solution.
One suggestion I could recommend is try using Tailwind's responsive class modifiers. When I viewed your page on narrower screen sizes, the page was not responsive, as in the design. You should try developing your projects at the start with a mobile first view. Then for larger screen sizes, apply Tailwind's class modifiers like sm:*, md:*, etc.
So, for example, when on the smallest screen size, the top of the page should use pt-0, but for screen sizes > 640px, you can use sm:pt-10. With this, you can then think about how you can make your image touch the top, left, & right edge of the viewport at a mobile view, but for larger views you can add padding around the image, and even add a border radius.
I hope this is helpful! 😊
Hi @JeyB88, 👋
Great job on this challenge! I also used Tailwind CSS in my solution.
I tried to look at your code, but I got a 404 error when I tried to go to your GitHub. However, my suggestion would be to add some responsiveness for mobile, tablet, and desktop like in the design. You can use the md:* prefix to increase the cards padding for tablet and desktop size.
Nice work.
Hi @karanshergill, 👋
Nice job on this challenge. I also used Tailwind CSS in my solution.
My suggestion for improving your solution would be to use responsive text sizes for mobile and desk, as is shown in the design. In Tailwind, you use the sm:* prefix on you text-* classes.
For example, on mobile view (screen width < 640px) use text-sm as you already are, but also add sm:text-base (screen width >= 640px) for desktop view.
Let me know if this was helpful.
@Amit-R328 your solution looks great!
My only recommendation is that you should include your live preview link in the "About" top right section of your GitHub page for this project. You can do this by clicking the "gear icon" and inputting your URL "https://amit-r328.github.io/QR-code-component/" into the "Website" text input and save your change.
Faced some problem in overlapping the content over image and positioning the share popup div. Tried my best to replicate the design. Any feedback would be helpful to learn about efficient method for positioning of popup card.
@badgujarankush I noticed in your HTML that your element up one line, into the very bottom of the <body> element, it will become conventional and within common practice. 👍 Another conventional location would be the within the <head> element, but using the defer attribute.
Here is a good Stack Overflow post addressing this very issue. Where should I put tags in HTML markup?
I hope this is helpful. 😊
Faced some problem in overlapping the content over image and positioning the share popup div. Tried my best to replicate the design. Any feedback would be helpful to learn about efficient method for positioning of popup card.
Hi @badgujarankush, 👋
If you would like to address the "All page content should be contained by landmarks"⚠️warning issue in the accessibility report, you can place the attribution div inside a <footer> element.
"It is best practice to contain all content excepting skip links, within distinct regions such as the header, nav, main, and footer." more info
I hope this is helpful. 😊
Do you think my code is ok? I appreciate any advice or help.
Hi @federico-madrid, 👋
Congratulations on posting your first solution! 🥳
To fix the accessibility issue in the accessibility report (see above ⬆️), you will have to change your h3 elements to something else. The report is saying that if you use an h1 element on your page, the next heading element you can use is h2, which is a valid increment of +1.
However, I would recommend that you use a <span class="metric-count"> element. Also, I would do something similar for the <p> tags and replace them with <span class="metric-label">. Try this:
<div class="metrics">
<div class="metric">
<span class="metric-count">80K</span>
<span class="metric-label">Followers</span>
</div>
<div class="metric">
<span class="metric-count">803K</span>
<span class="metric-label">Likes</span>
</div>
<div class="metric">
<span class="metric-count">1.4K</span>
<span class="metric-label">Photos</span>
</div>
</div>
...with this CSS:
.metric {
display: flex;
flex-direction: column;
align-items: center;
}
So, the reason for replacing those elements with <span> tags is for accessibility. The metric-count and metric-label are not headings or paragraphs. They are just generic pieces of small text that are okay to be given a generic element like <span>.
I hope this is helpful. 😊
Hi @darioriverosp, 👋
Congratulations on posting your first solution! 🥳
To fix the accessibility issues in the accessibility report (above ⬆️), you need to use at least one semantic html element. I would suggest wrapping your .card element with a <main></main> element. Also, you can do the same with <footer></footer> around the .attribution element.
I would also recommend moving the .container to inside these "landmarks". Try something like this:
<main>
<div class="container">
<div class="card"></div>
</div>
</main>
<footer>
<div class="container">
<div class="attribution"></div>
</div>
</footer>
I hope this is helpful. 😊
Hi @travelingtramp, 👋
Congratulations on your first solution submission! 🥳
To fix the accessibility issues in the accessibility report (above ⬆️), you can wrap a semantic html element around your code, like <main></main>. This is a "landmark" for the content on your page and makes your page one step closer to being accessible.
I hope this is helpful. 😊
