5nufkin

Latest comments

• 

  Ademuyiwa•200

  @codingat17Submitted 2 months ago

  What specific areas of your project would you like help with?

  I couldn't get the background-color for desktop sizes and also the image, the border-radius property didn't work well with it

  

  CSS flexbox

  1

  00
  

  5nufkin•60

  @5nufkinPosted 2 months ago

  Hi there, Good job on this one, your website seems responsive and looks good! One thing I noticed right away was the body background color that's not exactly what you were asked to do, consider fixing this. About your html file - for better readability and structure, consider adding a header and a footer - in the header you could include the image and name of the recipe, then in main the recipe itself and in the footer you could put your note - "challenge by frontend mentor..." Also, consider naming classes in a more meaningful name that would help understand your code, c1, c2 and so on doesn't really deliver the message on what exactly this class is about. In addidtion, consider using sections and ids as well, ids are used for elements that you only have one of in your code, for example you could replace the c2 div with a section tag, it would look like this: <section id="preparation-time">....</section/ That would make your code much more readable. Your CSS looks good and it looks like you took a mobile-first approach which is a great way to design these days, very good! I hope this was helpful, keep going - you're on the right track!

  0
• 

  Pai-Kai Lee•250

  @PaiKai-LeeSubmitted 2 months ago

  

  Social Links Profile

  1

  30
  

  5nufkin•60

  @5nufkinPosted 2 months ago

  Hi there, Your website looks good and it's pretty responsive. One thing I notice right away is that you called both the .html file and the .css file 'index' which creates confusion. You should consider using the name style.css or styles.css on the .css files. Also - index.html is used so that browsers know this is the home page of the website, whenever you click a website's link on google or any other search engine you're being directed to the index.html file, so that's one more thing to bring into account when creating multiple pages websites in the future. In the html file, your use of divs could have been a little better - for example: instead of surronding the img with a div with a authour_img class, you could have created a div for the whole info section and putting the <img> tag inside of it. Another example is that you didn't put the <p> and <ul> tags in a div, if you decided on putting each tag or each few tags in their own div inside the card div, then you should keep following this structure throughout the whole project, it makes the more much more readable. I would also consider adding padding to the .container so it doesn't touch the sides of smaller screens. One more thing - you only used classes for you tags and didn't use any ids, for tags that you only have one of in your html - for example the card div - you should use ids and not classes which is more semantically correct. You did a good job and should be proud of yourself! I hope these few little adjustments I pointed out would help you take it to the next step.

  Marked as helpful

  1
• 

  P

  Shalva Mghebrishvili•30

  @Shako-ITSubmitted 4 months ago

  What are you most proud of, and what would you do differently next time?

  I was challenged to center the card horizontally and vertically and I did it after a research and CSS rules recap.

  What challenges did you encounter, and how did you overcome them?

  I decided to use CSS Flexbox, I dod some research and recap for it and then managed to use it in this project.

  What specific areas of your project would you like help with?

  I tried to build semantic HTML, however, it is not the best structure I think.

  

  Blog preview card using CSS flexbox

  1

  20
  

  5nufkin•60

  @5nufkinPosted 3 months ago

  Hi there,

  I noticed a few things that could improve the structure and responsiveness of your project:

  <svg> method: I’m not very familiar with the specific method you used within your <svg> tag, What tool/technique did you use there?

  Missing <main> tag: It’s good practice to wrap your main content inside a <main> tag to improve accessibility and semantic structure. I recommend wrapping your main content with this tag for better organization and readability.

  Responsiveness: I noticed that the layout breaks when the screen size is reduced, causing elements to go out of place. Consider using relative units like rem for sizing instead of fixed units like px. rem takes into account the user's font size settings, which improves accessibility. This could help ensure the layout adapts better to different screen sizes. em is another option, but as mentioned, rem is generally more reliable for responsive design.

  CSS classes: I’d also suggest adding more classes to your HTML elements and targeting them in your CSS. This will make your CSS more scalable and easier to manage in larger projects where there are multiple elements of the same type.

  0
• 

  Wolington•10

  @WolingtonSubmitted 3 months ago

  What are you most proud of, and what would you do differently next time?

  What I'm mostly proud of is I could even challenge myself to start with, because everything looks confusing at first.

  What challenges did you encounter, and how did you overcome them?

  My first challenge was, is it possible for me to produce a solution to this challenge? until I pushed myself into it, then I realized it's easy.

  What specific areas of your project would you like help with?

  All Feedbacks are welcome, this is my first projects and I wouldn't want to be afraid of any kinds of feedbacks.

  

  QR Code Component

  1

  10
  

  5nufkin•60

  @5nufkinPosted 3 months ago

  Hi there Wollington, You did a good job on this one! I'm starting off myself but I think these little changes might make your code a little better.

  HTML: Try giving your <h1> and <p> tags a class so when working on larger projects you'll be able to target them better, it'll also make your code more readable.

  CSS: You used the img selector twice, once for setting img { max-width: 100%; height: auto; } and once more for setting img { border-radius: 0.075rem; }

  you should probably merge these two to have all your img settings in one place. in body you used font-size in pixels, try using rem units for a more responsive outcome. Other than that I think things look pretty good, you used vh, rem and em units correctly. Good Job!

  0