Skip to content
OverviewSolutions
4
Comments
4
Oluwakayode Ige
@Jesuis-Jacques

All comments

  • feyzanursener•60
    @feyzanrsnrSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I am happy that I was able to make the indentations in the lists in the ‘Preparation’ and ‘Ingredients’ sections correctly. After a little research, I learnt how to do it and successfully added it to my project.

    Here is the css code I wrote for the ‘preparation’ part ;

    .preparation{

     background-color:hsl(330, 100%, 98%);

 border-radius: 15px;

 padding: 10px 25px;

 line-height: 30px;

    }

    .preparation-title{

    margin-bottom: .4rem;

color: hsl(332, 51%, 32%);

    }

    .preparation-list{

    list-style: none;

padding-left: 0;

text-indent: 30px;

    }

    .preparation-list li{

    position: relative;

margin-bottom: 10px;

line-height: 1.6;

    }

    .preparation-list li::before{

    content: ".";

color: hsl(332, 51%, 32%);

font-size: 45px;

position:absolute;

left: -30px;

top: -37px;

    }

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

    Honestly, I had a hard time making this project and I couldn't overcome some difficulties. Therefore, there are some errors in my project.

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

    Here are the areas where I need help;

    --> Firstly, I couldn't get the sentences to move to the bottom line from the desired word.

    --> I couldn't make the desired mobile responsive design.

    --> Finally, I could not fully provide the indentation in the ‘Instructions’ section.

    I would appreciate your help in solving these problems and for other problems in my project, if any.

    Recipe Page Solution - HTML&CSS

    1
    Oluwakayode Ige•60
    @Jesuis-JacquesPosted about 1 month ago

    Great job! @feyzanrsnr, I think you need more padding above and below your recipe card.

    To solve the issues you have, here are some effective suggestions that I used:

    • for the first, padding is a very nice effective way to solve that, I'd advice that you check if you have overridden the style in other CSS styles also.

    • For the second, the code below is a nice way to make it responsive:

    body {
 min-height: 100vh;
  min-width: 100vw;
  max-width: 1440px;
}

.card {
 width: 90%;

    Alternatively, you can use media query to target specific screensizes. For example:

    @media (min-width: 320px) and (max-width: 580px) {
  .card {
    min-height: 100vh;
    min-width: 100vw;

    border-radius: 0px;
    margin: 0px;
    padding: 0px;

  }

  .preparation-time-section {
    padding-left: 10px;
  }
    • For the third, target the li tag and apply any CSS property you deem appropriate: padding, margin. I'd advise you use padding tho.

    Drop a follow if you find these helpful. Happy coding!!!

    Marked as helpful
    0
  • Oluwakayode Ige•60
    @Jesuis-JacquesPosted about 2 months ago

    nice work!

    0
  • Ner046•60
    @Ner046Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    This is my first time doing mobile first for my website, I used media query to resize the font size in bigger screens. Next time I am thinking that it would be better to use clamp instead of media query to resize the font

    There is also 2 ttf font files I could have used, but I instead just linked the font needed from google font, maybe it would be better to also make use of the font files

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

    Main issues came from responsiveness, the blog-card overflowed in mobile view. And then I realized its because I don't have my image as max-width 100%, I also used max-width instead of just width for my card which made which also helped me a ton in my code

    If there are better ways to help with the responsiveness then I would like to know

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

    I still feel I am writing more code than needed, would like for tips on how to reduce my code, also if my approach is right in general and general reminders on how to improve my code

    Also one more thing, in the Figma file, in the design system there is the spacing section below.

    It got 4px 50 8px 100 12px 150 16px 200

    Not sure I understand what they mean by 50, 100, 150, 200

    Is that just suggestion on what to name your spacing in your custom properties or is it something else?

    Responsive blog card using flexbox

    1
    Oluwakayode Ige•60
    @Jesuis-JacquesPosted about 2 months ago

    Completely perfect work!

    0
  • Iyare Usen•30
    @IyareSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    In this project, I practiced using CSS flexbox to align items on a page. Prior to this time, this challenge was a daunting one because I lacked the knowledge of how to position elements vertically. However, over the past few weeks I have gained mastery through repeated use of flexbox in my projects. Next time, I'd love to fix the attribution to the bottom of the page and possibly change the component layout depending on the screen size. I also love to attempt using CSS logical properties and values instead of absolute values.

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

    Initially, I had some issues with the vertical placement of the component. To solve this challenge, I added a height of 100vh to the parent element so that the flex item can have a reference to work with.

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

    I have read a little about CSS logical properties on MDN but I still don't get it. How can we translate absolute values given by designers to logical properties? Is there a ratio or something?

    A mobile-first solution using CSS flexbox

    1
    Oluwakayode Ige•60
    @Jesuis-JacquesPosted about 2 months ago

    Although, it looks like your solution has more width than the design however this is a very fine work. shows how much work you must have put into this and it made me look at the design from a perspective I didn't initially see it from(I included the down bit that talks about the 'challenge and coded by' in my design), coupled with a well articulated report on the project. I did learn a thing or two from this. Nice work mate!

    0