Just keep going!
What challenges did you encounter, and how did you overcome them?I feel like i still missing something about responsivness
What specific areas of your project would you like help with?Any feedback is welcome.
You did an awesome job making this response! It looks great on tablet, mobile, and desktop.
When pulling fonts from google and using them in code, to make sure they actually take effect, you can add them into your Tailwind CSS styles like this:
tailwind.config = {
theme: {
extend: {
colors: {
// insert colors here
},
fontFamily: {
"red-hat-display": ["Red Hat Display", "sans-serif"],
},
}
}
}
and when you use it in your HTML classes, you can do class="font-red-hat-display" in which you'll see the font load properly on the site as currently it's using a default font from Tailwind.
On larger desktop screens, the page doesn't take up the full screen because of the max-w-[1440px] in your main element. Keep in mind the max-w-[1440px] is simply a tool for us to use to match up our site with the example provided by Frontend Solutions, so you'll set that width yourself in your Responsive Dev Tools. If you remove max-w-[1440px], it should fill the screen regardless of screen size.
Hope this helps!
well, i am proud to say my first time trying out tailwind css in a project ended up decently xD. I expected it would have gone much worse.
I should have changed min-width for grid section to a bit higher. Maybe 900-1000px range
What challenges did you encounter, and how did you overcome them?choosing tailwind for this grid section was a bad idea tbh. since the 5 card could have been finished faster with inserting class, and changing 5 of them as a whole.
What specific areas of your project would you like help with?idk why but when i use grid in tailwind, the padding bottom / margin bottom just disappear. Been searching for it but can't find any solution to fix it. I hope i can hear some tips and tricks about it
Great job with Tailwind CSS! Keep an eye out for detail.
bg-lightGrayishBlue.max-w-6xl. For example:<div class="md:col-span-10 md:grid md:grid-cols-3 md:gap-5 max-w-6xl"> This would help alleviate a lot of the padding/margin bottom concern.<div class="md:grid md:grid-cols-2 lg:grid-cols-3 md:gap-5">Hope this helps.
Completing the design nearly completely on my own. I did have to consult Bing Co-Pilot to see how to arrange the cards in the desktop design specification (outer grid/inner flex) - however I am not sure if that it correct way to do it.
What challenges did you encounter, and how did you overcome them?Arranging the desktop card layout. I knew I wanted to use a grid of 3 columns...but the inner column threw me. After consulting Bing Co-Pilot, it suggested using flex for the inner column to stack the cards.
I am guessing most newbies like me struggled with this as well...
What specific areas of your project would you like help with?I would like someone to review my desktop card layout and let me know if I should have done it a better way.
I like how you used a mixture of flex and grid for your desktop version. I ended up using flex only, but mixing w/ grid definitely looks to be more dynamic based on your code and the live site. Awesome job.
Setting a fixed width for the card container, knowing which unit to use. In this case I used REM measurements.
Awesome job with the responsiveness. Tailwind CSS does provide the Max Width Property where you could use max-w-xl or max-w-2xl for the width of the card container, ensuring it gets no larger than that specified width.
I'd keep an eye out for detail regarding the design. Using the style guide as a tool will help out. Keeping in mind Tailwind CSS provides letter spacing for the "PERFUME" part.
I am proud of all the knowledge I have developed in this challenge.
What challenges did you encounter, and how did you overcome them?I had small problems with the deploy, because in the Github pages it did not detect the path where the index.html is on the main page.
What specific areas of your project would you like help with?When I create a new project only with html and for example, Tailwind and I install dependencies through NPM, What steps should i have to follow for deploy?
Hi! You did an awesome job!
Keep an eye out for the spacing. The main content has more padding than it should compared to the original, and should be evenly aligned with the image.
With this project being fairly simple, you don't need to use NPM to use Tailwind CSS, especially if you're only using HTML and some custom CSS.
Next time, I recommend following the instructions on Tailwind's Website to avoid you needing to make extra files like a src file, etc. You can use Tailwind's CDN, add it into your html file in the header, and add your Tailwind properties into that like so:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
<title>Frontend Mentor | Recipe page</title>
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&family=Young+Serif&display=swap"
rel="stylesheet">
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
</head>
Hope this helps!
Responsiveness looks great. Awesome job matching the design.
Looks great! Don't forget to utilize the Figma design for font-weights and spacing!
Hi, Anastasiia!
Although I don't have access to the Code since the link is not working, I was able to take a look at the website itself and the Inspect tools for responsiveness, as well as a plug-in for accessibility (Silktide).
Responsiveness
Accessibility
Out of everything on this page, there are only 3 accessibility concerns that shows up based on WCAG 2.1 AA.
Missing H1: "Every page should have a clearly defined heading, known as a "H1" (Heading 1). A H1 is the main heading of the page. It helps accessibility by allowing uses to skip to the main content of the page. It helps all users identify what the page is about. It helps SEO by giving special emphasis to the topic of the page. It is not enough to simply include large text. Headings must be coded semantically as <h1> tags, like so:
<h1> Improve your front-end skills by building projects</h1>" - Silktide Accessibility Checker
Text Contrast: "To comply with WCAG AA, the colour of text must sufficiently contrast with its background color, so that people with moderate visual impairments can read it. The contrast ratio must be at least 4.5:1 for body text, and 3:1 for large text. A much more demanding version of this check (1.4.6) exists for WCAG AAA. Ignoring an issue in this check will also ignore it in that check, and vice versa." - Silktide Accessibility Checker.
Missing alt text: "Images should specify appropriate alternative text, where appropriate. Alternative text is text that is used in place of an image if it cannot be seen. This is important for users who are blind or partially sighted, who may have the page read to them by a screen-reader. Without alternative text, they will not know what the image is, or what it is for." - Silktide Accessibility Checker.
<img src="./images/image-qr-code.png" />, you can write <img src="./images/image-qr-code.png" alt="QR Code with blue background" />All in all, you did an awesome job. Hope this helps!