Managed to get it working pretty well and close to the design. I think my card numbering is off so would make sure that is correct in mobile first before starting desktop
Hello,
Good job working on the solution 👏🏼. It looks good on both mobile and desktop screen sizes. Kudos for good use of CSS Grid
As I went through your code I thought I could make some suggestions to improve the code. Here they are:
HTML:
.card class you can use <figure> instead of <div> if you wanna use semantic HTML tags. Then you can use <figcaption> for .card__user_profileCSS
:root if you wishmin-height you have in .cardDon't have too many suggestions 😁 and hopefully these are helpful to you. Wish you all the best!
Hello,
nice job with the project. Thought I could give you some suggestions regarding your code.
/src folder contains all the projects. Aren't we supposed to make separate repos for different projects?display: block on <span>colors.scss?justify-content: center. You also don't need margin: 0 auto.header__description taking up whole width of the screen when screen size goes below 768px. I think it's a bug and you can use max-width in ch units to fix thatgrid-template-columns property and contents of the card should determine the height.cyan & .blue should be occupying middle 2 rows, .red should be occupying top 2 rows and .orange bottom 2. I can't figure out how 'cyan' & 'blue' sitting in the middle like that lolThese are just suggestions and hopefully helpful. All the best
I'm happy that I used a preprocessor like SASS for the first time in a project. I knew of it but never quite managed to use one for something.
Next time I would plan a bit more the HTML structure ahead of starting.
What challenges did you encounter, and how did you overcome them?The real challenge was finding the right sizes and values for certain properties and making the whole layout responsive and coherent.
What specific areas of your project would you like help with?Also, a piece of advice:
Element "p" not allowed as child of element "hgroup" in this context. (Suppressing further errors from this subtree.)
This doesn't seem to make sense, as the hgroup header exists precisely to wrap these type of tags: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup
I could be wrong though!
I also got the same error and then I found this post from 'stack overflow'. I am still confused to use it or not 😀
main.scss, how many scss files do i need and for what
purpose, and after some research i was able to find the base layout of what is usually
done then went ahead from there.-Thank you in advance 🙂.
Hello, congrats on finishing your project. I've just finished this project and I also used Sass for first time to do it. So, cheers to that 👏🏼
As I went through your code, I thought I could make some suggestions
HTML:
CSS:
border-radius on .product-card, so I don't think you need it on 'mobile image' too.product-card max-width is not 1000px in desktop view (I think that's why card is bigger than in the design file), it's only 600px (use rem here for better responsiveness) and in mobile view max-width is 343pxbtn: focus and btn: active statuses to your codebody {
display: flex;
justify-content: center;
align-items: center;
}
Hopefully these suggestions make your project better. Please contact me if you have any further questions. All the best. Happy coding 🎉
I mainly need help with css class naming and bem methodology and table styling. The designs between figma and screenshot vary a lot in padding, margins and gaps. Therefore, at the end of development, very often the code has to be changed or re-written.
Hello,
Congrats on finishing the project 👏🏼.
I really like the code and I think I can help with a few minor things:
font-size to 62.5%. You might wanna read this article before you do thatmax-width: 100% to <img> in Reset.max-width in .card instead of px to get better responsiveness.recipe__nutrition-table-cell?Finally a question for you! You added margin to .grid. How did you come up with those values? I'm asking because I couldn't center the card vertically in the <body>
All the best. Happy coding🎉
I am proud of the final result for the h1 title. Next time, I need to review some of the basics (line breaks in HTML, Box model in CSS for instance)
What challenges did you encounter, and how did you overcome them?I spent a significant amount of time wondering: 1- How to move the second half of the text to the bottom: I though I had to use some complex CSS code or something. After first googling it, I used a tag. 2- Later, after looking at the picture of the final result, I realised there was too much space between the two lines in the title. Again, went thinking it was CSS related. I ended googling it again and found the tag--which, for some mysterious reason, I forgot existed--, and that ended up fixing it. I also googled how to make the image's corners round.
What specific areas of your project would you like help with?I need help with the paragraph in grey: It still doesn't look like the image preview, despite having the font-size indicated in the style-guide.
Hello,
That's a nice job for your first project🎉. Though I noticed a few issues in the code which I think can help you with.
HTML
max-width so that you can limit the width of whole content. Your card is too big in comparison to the design file<br> in <h1> if you do that. It's unnecessary!<br>s in <p>alt attributeCSS
h1{color}?font-size is too large. You can check the design file for correct sizefont-size is OK but the color is wrong. Check design file for the colorrem instead of px for font-size as it makes the text responsivebackground-color in imgdisplay: flex in 'body' to place card in the centerHope these will help you to make your project better. Let me know if you need any further help. All the best!!
As this project has specific layout requirements for various devices, I have started learning about rem units and the max-width CSS property to enhance page responsiveness. Additionally, I’ve explored media queries to adjust the profile card’s design for different screen sizes. I think I did a good job on those.
Hello,
Great job. Looks almost identical to the original design file. But I noticed a few issues regarding responsiveness.
height to min-height in .main-content to prevent thatclamp() function. You can use it effectively to avoid writing multiple media queries<blockquote> element for .profile-bio if you want. I think it's more semanticI hope these will help you to get better. Cheers!
Understanding how padding and margin behaves better
What challenges did you encounter, and how did you overcome them?Had an issue understanding the spacing initially
Hello,
Nice job on the project. I think it's very close to the design specifications.
I would like to point out a few things if you don't mind.
width on .card to max-width to make it flexibleoutline: none if you want<p> and <blockquote> tags for .card__profile_location and .card__profile_bio as they describe the content more accurately<div>s to wrap social media links. You should put them in <a> tags as they are links when clicked take the user to another page. In addition you can put all links in a <ul> element if you wantwidth on body as it may add scrollbar sometimes. Also it's a good practice to use min-height instead of height on bodyHopefully these points will help you to make it better. All the best!
I am proud of the speed at which I was able to complete this challenge.
What challenges did you encounter, and how did you overcome them?I was unaware of how to implement hover. I looked it up.
What specific areas of your project would you like help with?I still want to know how to use SASS better and maybe what elements that are divs should be replaced with more semantic html.
Hi,
Nice job on the project. Congratulations!!
I think I can make a few suggestions to improve the code.
.course-card max-width units to rem.course-card some padding to create the space instead of margins on child elements.attribution content is going inside the card. You can fix it by changing units to 'rem' instead of 'px'.course-card__label, __date and __author supposed to be 14px. You might wanna check thath2 by using keyboard. You can wrap it in <a> tag and add 'focus' pseudo class to make it keyboard accessibleHope these points would be of help to you. All the best!!
I'm proud I could do it myself and I believe I can do better with the future projects.
What challenges did you encounter, and how did you overcome them?In making the design align at the centre of the body but I was able to use display flex to achieve it.
What specific areas of your project would you like help with?I would like to know the difference between the em, rem and px sizes, and where and when best to use any in projects.
Hello,
I like your code, clean and concise! Only thing I suggest you put your code in a separate file. These videos might help you to know more about rem and em -
All the best!!
I am proud of my focus on details and finding solotions ,even if it takes me 4 hours or more . Nex time , I will focus on code aesthetics , Organization ,And writing more comments.
What specific areas of your project would you like help with?i want to make it more responsive
Hello,
Nice job on the project. I think it is responsive enough, although I wanna make some suggestions.
min-height instead of height on body to prevent thath2:hover is working but h2:focus isn't working. I suggest you wrap h2 in <a> tag to access it with keyboardheight to any container with text as it leads to overflow problem when you add more textpx units for font-size as users can't increase font size in their browser. Use rem or em depending on the contextmax-width to card only. Then everything in the card will adjust itself when you decrease screen width. You don't even need media query if you use clamp() to reduce font sizeAll the best. Happy coding :)
Still need more practice to be proud/have doubts.
What challenges did you encounter, and how did you overcome them?Despite this being a simple project, i still had no idea how to begin, i actually looked at the blank page for some time before the idea came to me.
What specific areas of your project would you like help with?I actually want to know if it's common to use rem instead os px, i usually set up the css like: :root { font-size: 62.5%; } So, instead of 10px i use .1rem. I saw a guy explaining that it's better for the user. Is it really?
Note: English is not my native language.
Hi,
Your project looks good! But the title text looks a little smaller than the specifications to me.
You can read this article about why you always want to use rem for font-size. Also this one for why you don't want to set font-size: 62.5% on body element
Hope these articles will help you make a decision. All the best!!
