Skip to content
OverviewSolutions
6
Comments
8
Covenant-0
@Covenant-0

All comments

  • Covenant-0•100
    @Covenant-0

    This looks so perfect!!!!

  • Covenant-0•100
    @Covenant-0

    this looks very great.

  • yoe7501•470
    @yoe7501
    What are you most proud of, and what would you do differently next time?

    I like that I got to make use of a grid layout and figured out how to make lines seperating thet content using background color.

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

    I had a hard time making the card a certain size no matter how big the window was but figured it out at the end.

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

    I would like a good amount of styling tips to make this project easier and some css syntax tips to potentially have less lines of code next time.

    Recipe-Page

    2
    Covenant-0•100
    @Covenant-0

    To start with, you did a great job with this project. However, you are to try to replicate the given design as close as possible. The only issue i see with this code is the font-color. The main font color is black but you used dark raspberry throughout the body of the code. Asides from that, i think your code is perfect.

  • Covenant-0•100
    @Covenant-0

    Your design looks so perfect!!! Kudos to you

  • ikitamalarose•420
    @ikitamalarose
    What are you most proud of, and what would you do differently next time?

    I was able to do this challenge in less time than my first challenge. I was able to learn the notion of transitions and create an animation. As for responsive design, i no longer have a problem with the understanding of the latter.

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

    About animation

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

    Currently i don't have any specific requests

    Blog preview card

    1
    Covenant-0•100
    @Covenant-0

    Hello there, great job on completing this challenge. Kudos to you. I went through your github repository and the styling was great. Keep up the good work.

  • Mike•180
    @sanyomor-01
    What are you most proud of, and what would you do differently next time?

    I'm proud of designing this component

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

    I didn't encounter any challenge

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

    I'm good

    HTML,CSS, CSS Flex

    1
    Covenant-0•100
    @Covenant-0

    The design and positioning of this project is great, however, you'll need to add a margin-top if you want it to look as close to the problem given as possible which is our aim. Asides from that, the project looks very good.

    Marked as helpful
  • Covenant-0•100
    @Covenant-0

    Hello there anntvanntv, There are a lot of changes that would need to be made to this website.

    1. Instead of assigning a class to the <main>, encase a <div> in the main and then you can assign a class of container
    2. In your newly created div, encase a new div that will hold your <img> element and assign a class
    3. Your links should not be in a list format. Instead you can encase them in a button element. Each button for a different link
    4. The "challenge by...." sentence should be in the footer
    5. For the styling try using the code below
    *{
    margin : 0;
    padding: 0;
    box-sizing: border-box;
    max-width: 100%;
}


6. To style the body, add the following styles. You can try this for centering
```body {
           margin: 0;
           display: flex;
           justify-content: center;
          align-items: center;
          height: 100vh;
} 

7. You can try to read more or practice more on responsive web design.
[Freecodecamp] (https://www.freecodecamp.org/learn/2022/responsive-web-design/)
  • Covenant-0•100
    @Covenant-0

    You did very well for your first project, however it still needs a few adjustments.

    1. The image is not centered in the desktop view
    2. For the background and text colors, check the styles guide for the correct color.
    3. Your body should have a main element.
    4. If possible indent your code properly so as to make it easier for others to read your code.
    5. As for the height, you can set the height of the body to 100vh
    Marked as helpful