Creating the design using CSS Grid and SCSS
What specific areas of your project would you like help with?Need high five / hands up for helping it making more responsive for different viewports and how CSS grid can be used for efficiently
Hello, @TusharKaundal
I found out your solution excellent! In my computer the responsiveness worked pretty good. I'm also learning about grids, so I'm not an expert yet 😅 However, I can share you a tool that I found helpful to generate code for grids by using a click and drag-and-drop according to your needs: Grid CSS Generator.
I hope this helps. Happy coding!
I encountered some difficulties arranging the cards in the desktop version.
Hello, @KristinaHorbenko!
You did a great job! Referring to your difficulties, indeed it is difficult to arrange the cards as they are in the design. I want to share with you how I did and explain the logic a little bit. My solution might not be the best, but it serves as an idea:
HTML: This part is the specific one of the cards. What I did here is to group the cards in the middle in the same <span> so I can put them together in the column of the middle (think about a grid with three columns and one row).
<section>
<div class="card" id="supervisor">
<span>
<h2>Supervisor</h2>
<p>Monitors activity to identify project roadblocks</p>
</span>
<div class="image-container">
<img src="images/icon-supervisor.svg" alt="supervisor icon" />
</div>
</div>
<span class="middle-cards">
<div class="card" id="team-builder">
<span>
<h2>Team Builder</h2>
<p>Scans our talent network to create the optimal team for your project</p>
</span>
<div class="image-container">
<img src="images/icon-team-builder.svg" alt="team builder icon" />
</div>
</div>
<div class="card" id="karma">
<span>
<h2>Karma</h2>
<p>Regularly evaluates our talent to ensure quality</p>
</span>
<div class="image-container">
<img src="images/icon-karma.svg" alt="karma icon" />
</div>
</div>
</span>
<div class="card" id="calculator">
<span>
<h2>Calculator</h2>
<p>Uses data from past projects to provide better delivery estimates</p>
</span>
<div class="image-container">
<img src="images/icon-calculator.svg" alt="calculator icon" />
</div>
</div>
</section>
CSS Mobile: Here is how display the section in mobile screen sizes. This is simply a grid with one column .
section {
display: grid;
row-gap: 1rem;
}
CSS Desktop: While in the desktop styles, I set this styles for the span of the cards in the middle to convert it a grid with one column. Then, the section is defined as a grid of 3 columns and the items are aligned to the centre.
.middle-cards {
display: grid;
row-gap: 1rem;
}
section {
align-items: center;
grid-template-columns: repeat(3, 1fr);
max-width: 80%;
}
I hope these examples of solution are helpful. They may not be the best because I'm learning too, but is something 😅 Happy coding! 😉
I think I really got the design right without much issue and I did in a fast way.
What challenges did you encounter, and how did you overcome them?The maximum sizes of the images and how to work with the picture component. But after I understood with the design what I was suppose to do everything went perfect.
What specific areas of your project would you like help with?Overall syntax of the style.
Hello, @anderjackie!
You did an amazing job here. The syntax of the CSS file seems very good to me! I only noticed just a little detail and it is the border-bottom-left-radius seems to set to 0 (desktop screen size). I saw that you used the inherit property, that's smart (I didn't used it to be honest, but that's very smart). I think the problem is that maybe that border radius is still inheriting the value from mobile sizes 🤔. Maybe it is good to give a look and solve it with the same logic of your solution, I hope that my observation helps.
However, your solution it's great, I liked it. It's clean and very smart. Wish you a happy coding 😊
I’m proud of successfully creating a responsive design that mirrors a clean and user-friendly interface, ensuring the layout adapts well to various screen sizes. The use of Tailwind CSS and attention to detail for mobile and desktop views, along with structured HTML, resulted in a visually appealing and functional project. Additionally, I was able to implement an efficient layout for the "Omelette Recipe" that is easy to navigate, with clear sections for instructions, ingredients, and nutritional information.
What challenges did you encounter, and how did you overcome them?Responsiveness: One of the main challenges was ensuring the design adapted seamlessly across different screen sizes, from mobile to desktop. It was tricky to balance the layout so that it looked good on all devices without losing the design integrity.
What specific areas of your project would you like help with?mproving Responsiveness on Edge Cases: Although I’ve made the design responsive across standard breakpoints (small, medium, large screens), I’d love feedback on edge cases. How can I ensure the layout remains flawless on unusual screen sizes or older devices
Hello, @basemmohamed012!
I saw you did a nice job! As you said, responsiveness is also tricky to me. I can share with you some tips I have learned while I was coding for this exercise specifically.
/*Mobile styles*/
article {
background-color: #FFF;
width: 100%;
}
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
h1 {
color: #312E2C;
font-size: 2.5rem;
margin-bottom: 24px;
}
h2 {
color: #854632;
font-size: 1.75rem;
}
h1, h2 {
font-family: "Young Serif", serif;
font-weight: 400;
overflow-wrap: break-word;
}
h3 {
color: #7A284E;
font-family: "Outfit", sans-serif;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 16px;
overflow-wrap: break-word;
}
img {
display: block;
max-width: 100%;
}
.text-placement {
display: flex;
flex-direction: column;
gap: 32px;
margin-top: 40px;
padding: 0px 32px;
}
.preparation-time {
background-color: #FFF7FB;
border-radius: 12px;
padding: 24px;
}
.quantity {
color: #854632;
font-weight: 700;
}
li, p, td {
color: #5F564D;
font-family: "Outfit", sans-serif;
font-size: 1rem;
font-weight: 400;
overflow-wrap: break-word;
}
li {
padding-left: 16px;
padding-right: 0;
}
li::marker {
color: #854632;
font-weight: 700;
}
table {
border-collapse: collapse; /*removes the space between cells*/
margin-top: 24px;
width: 100%;
}
tr td {
border-bottom: 1px solid #E3DDD7;
padding: 12px;
}
tr:last-child td {
border-bottom: none;
}
ol, ul {
margin: 0;
padding: 1.3rem;
}
/*Tablet styles*/
@media screen and (min-width: 600px) {
article {
border-radius: 24px;
padding: 40px;
}
body {
background-color: #F3E5D7;
display: grid;
max-height: fit-content;
min-height: 100vh;
padding: 128px 48px;
place-items: center;
}
img {
border-radius: 12px;
}
.text-placement {
padding: 0;
}
}
/*Desktop styles*/
@media screen and (min-width: 1024px) {
article {
max-width: 736px;
}
}
Notice that I almost filled up almost all the needed styles to the Mobile Size, and then progressively change them while the screen size is growing up. I think this can help you to save time by not repeating much code.
I hope the little I know and that I could share with you helps in something. Keep practicing with enthusiasm that you're going in a good path. Happy coding!
My consistent code classes, my ability to research when I am stuck.
What challenges did you encounter, and how did you overcome them?None really this was simple enough project that was pretty straightforward. I had my custom class naming convention already in mind and everything else fell in line.
What specific areas of your project would you like help with?Overall code feedback. Does my code make sense? Is it readable?
Hello, William!
Your code is nice and readable indeed. You did a great job!
I have some suggestions for you to help you, as I can, in improve even more. It seems that the implementation for the same font as the design is missing. In some projects, you need to download them. But in this particular case, you don't need to do that because it is in the assets folder (assets/fonts). Then, you can "import" it to CSS like this:
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Inter';
font-style: normal;
font-weight: 400;
src: url('../fonts/inter-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
And then you can apply it in the body block if you know that this is the main font, and then stylise them in the specific cases where you have a different colour or size.
I will send you this link that another kind developer shared with me for more information: google-webfont-helper.
Nice effort! The detail is that the picture should be inside the card.
You can place it where after the section or div that represent your card is open:
<section class="blog-card"> <img class="illustration" src="assets/images/illustration-article.svg" alt="article illustration" /> [...] </section>And then style it with the width of 100% to occupy the size of the card (remember add padding to the card div or section)
.illustration { border-radius: 10px; width: 100%; }
.blog-card { align-items: center; background-color: #FFF; border-radius: 20px; box-shadow: 8px 8px 0 0 #000; display: flex; flex-direction: column; gap: 24px; margin: 12px; max-width: 384px; padding: 24px; }
I'm sure that there are better solutions than mine but I hope that I helped you with where to start. Wish you a happy coding!
It is my First build. So I am proud of the project itself.
Next time I will try to do it in all grid.
What challenges did you encounter, and how did you overcome them?The challenge I encountered was center the div in the body itself.
I over come this by Using Grid. Before I tried do with flex and position, somehow it didn't work for me.
What specific areas of your project would you like help with?I want help in reducing code and finding what is most effective way to do this in real work environment. That's it.
Your solution is well done! It is almost like the original design. I recommend to try with grid. I actually explored it a bit with my own solution (I used to employ "display: flex" for everything) but I'm trying to go with other solutions. Nice job!
