Skip to content
OverviewSolutions
10
Comments
11
Anyona Zaddock Ogada
@zacc-anyona

All comments

  • msa-sitare•70
    @msa-sitareSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I've just started coding. I try my best to use semantically correct HTML elements. I haven't learned CSS Flexbox or Grid, so I plan to focus on them next. This is my first coding project ever without any hand-holding. Overall I'm happy with the result and the time I spend.

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

    Centering the card was my biggest challenge. Now I do understand "center the div" jokes.

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

    -I used both footer element (as parent) and small element (as child) for the copyright text "Challenge by Frontend Mentor. Coded by Sitare." to keep it semantically correct HTML. But am I overkilling it, should I stick with only one of them?

    Creating basic card component using semantic HTML and CSS Grid

    1
    Anyona Zaddock Ogada•190
    @zacc-anyonaPosted 8 months ago

    Hello msa-sitare,

    You done a great job in taking your time to finish this challenge. However there are a few areas you can improve on;

    • Use HTML landmarks. Starting now start using HTML5 landmarks as they contribute greatly to the accessibility of your website. Moreover, landmarks help search engines, screen readers and other developers know the flow of content on your web page. Instead of using <div class="content"></div you could have used <main class="content"></main>. There are also other landmark tags such as <footer></footer>. Refuse to suffer from a disease called 'Divitis', most young developers suffer from it. It is a pandemic! I myself used to suffer from it. :) Learn to use HTML landmarks here.

    Other than that your work is excellent. I love it. You have potential, always stay hungry to learn more. If you find my comment useful don't forget to mark it as helpful and give me an upvote.

    Marked as helpful
    1
  • Anyona Zaddock Ogada•190
    @zacc-anyonaPosted 8 months ago

    Hello Monfaredz,

    Congratulations on taking your time and effort to complete this challenge. You have done well. But there are some areas you can improve on;

    • Learn to use HTML landmarks. Starting now start using HTML5 landmarks such as <main></main>, <article></article> & <footer></footer>. Landmarks contribute greatly on your website's accessibility. Landmarks also help search engines and screen readers know the flow of content on your web-page. For example your <div class="container"></div> you could have replaced it with <main class="container"></main>. Main tag indicates that is the main content of your web page. Learn to use landmarks here. Refuse to suffer from a disease called 'Divitis', most web developers suffer from it. It is a pandemic! I myself used to suffer from it. :)

    • Use the modern css reset. Using the modern css reset will save you a lot of time when designing your page. Get up to speed with modern CSS reset here.

    • There is an efficient and simple way to center your content both vertically and horizontally. Allow me to demonstrate;

    body {
height: 100dvh;
display: flex;
flex-direction: column;
justify-content: center; /*centers horizontally*/
align-items: center; /*centers vertically*/
}

    Generally you have done great. I love it. If you find my comment helpful don't forget to mark it as helpful and give me an upvote.

    Marked as helpful
    0
  • Anyona Zaddock Ogada•190
    @zacc-anyonaPosted 8 months ago

    Hello Alberto,

    You have done a great job taking your time and commitment to complete this challenge. But there are a few areas you can improve on;

    • Use of modern CSS reset: Always apply the latest modern reset in your projects. It will make designing a web page become a breeze. This article will get you up to speed with modern css selectors.

    • Use of landmarks: Starting from now start using HTML5 landmarks such as <main></main>, <footer></footer> & <article></article>. Using of landmarks contributes greatly on your webpage's accessibility. It also lets the search engines and screen readers know the flow of content in your webpage. Refuse to suffer from this disease called 'Divitis'. It is a pandemic! :) Learn and know how to use landmarks here.

    Generally you have done well. I love it. If you find my comment helpful, don't forget to mark it as helpful and give me an upvote.

    Marked as helpful
    1
  • MaxCodeCraft•90
    @MaxCodeCraftSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    This is my second responsive project, using the @media queries. Since we don't have the Figma for free users, I tried to get the paddings and margins with GIMP, hope this is close enough !

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

    Here is what I learned during this project:

    • Better understanding of the Flexbox model
    • How to make a container responsive with @media queries
    What specific areas of your project would you like help with?

    None on this project, but advices are always welcome !

    Responsive social links profile with HTML & CSS

    1
    Anyona Zaddock Ogada•190
    @zacc-anyonaPosted 8 months ago

    Hello Danielle, You have done a really great job in taking your time to finish this challenge. But there are a few areas you can improve on.

    • You don't have to use multiple media queries for such a project. Using a mobile-first workflow will help you escape the hell of multiple media queries. What am I saying? HTML elements are naturally responsive, so you could start out by reducing the size of the browser window to resemble the size of a mobile screen. Then code out the HTML elements to conform with the mobile design. Then later on you can use one min-width media query to complete the desktop design. This post on media queries will help..

    • Always use modern CSS reset. It will help you with the image shrinking issue. This article will get you up to speed with the latest modern CSS reset..

    • There is a better and simple way of centering contents without the use of too much CSS code.

    body {
min-height: 100dvh;
display: flex:
flex-direction: column;
justify-content: center; /*centers horizontally*/
align-items: center; /*centers vertically*/

    Generally you have done a great job. If you find my comment helpful don't forget to mark it as helpful and give me an upvote.

    Marked as helpful
    1
  • Danielle•30
    @danilscodesSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    i'm happy with how the hover state turned out

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

    challenges:

    • i didn't exactly know how to do the transition for the hover state before doing the challenge, but it wasn't too hard to figure out. i think i did it well, but if you see anything that needs to be improved on let me know please!
    What specific areas of your project would you like help with?

    help:

    • i would like to know how i could get the hover state of the blog card to activate only when i hover over the h2 title
    • i noticed that the image is slightly cut off on the mobile version, so i thought something like a mask over the image that shrinks when the screen size shrinks would be the solution, the only thing was that i didn't really know how to implement that, if anybody could help me out with this i'd greatly appreciate it!

    Blog preview card

    1
    Anyona Zaddock Ogada•190
    @zacc-anyonaPosted 8 months ago

    Hello Danielle, You have done a really great job in taking your time to finish this challenge. But there are a few areas you can improve on.

    • You don't have to use multiple media queries for such a project. Using a mobile-first workflow will help you escape the hell of multiple media queries. What I'm saying? HTML elements are naturally responsive, so you could start out by reducing the size of the browser window to resemble the size of a mobile screen. Then code out the HTML elements to conform with the mobile design. Then later on you can use one min-width media query to complete the desktop design. This post on media queries will help..
    • Always use modern CSS reset. It will help you with the image shrinking issue. This article will get you up to speed with the latest modern CSS reset..

    Generally you have done a great job. If you find my comment helpful don't forget to mark it as helpful and give me an upvote.

    Marked as helpful
    1
  • stautuan•160
    @stautuanSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    It took me quite a long time to finish this project, but I am proud that I was able to finish it and it closely adhered to the original design. I need to structure my workflow to be more organized.

    QR Code Component

    1
    Anyona Zaddock Ogada•190
    @zacc-anyonaPosted 8 months ago

    Hello Stacy, I love your work and you have done well, except for some areas you have to improve on and correct in your future challenges.

    • Landmarks: Use landmark such as <main></main>, <footer></footer>. Landmarks helps screen readers know the flow of your content and also improves on the accessibility of your site which is crucial. YOU CAN READ ABOUT LANDMARKS. Don't suffer from a disease called 'divitis'.

    Other than that you have done a great job.

    0
  • Anyona Zaddock Ogada•190
    @zacc-anyonaSubmitted 9 months ago

    Hello Frontend Mentor Community. I'm Anyona. Here is my 4th challenge solution.

    Built with;

    • HTML5
    • CSS
    • Mobile first workflow

    The challenge is good for those getting their hands dirty in CSS by building a page to a provided design.

    I want to Frontend Mentor team for creating this challenge and making it available to everyone.

    If there is a better way I could have went on with this challenge, feel free to let me know.

    FEEDBACK is very much welcomed!

    Stats-preview-card

    2
    Anyona Zaddock Ogada•190
    @zacc-anyonaPosted 9 months ago

    Thank you Grace for your feedback.

    I love the way you are straight forward and concise. I really appreciate it, especially as beginner web developer it really comes as helpful.

    I am going to correct those areas you have mentioned, so I don't repeat the same mistakes on my next challenge which I already started. I'm pausing working on it till I familiarize myself with the mistakes and correct them.

    0
  • Anyona Zaddock Ogada•190
    @zacc-anyonaPosted 9 months ago

    Hello @makaracc, You've done a great job and I have learnt a few things from your code.

    ol::marker,
    li::marker {
      color: brown;
      font-weight: 400;
    }

    Cause of you now I know how to style list markers.

    There a few things you can improve on though. I'll show you a better way to center everything without the use of padding. I hope it comes in handy in your future challenges.

    body {
    min-height: 100vh;
    display: flex;  /* it works with grid too  */
    justify-content: center;
    align-items: center;
}

    All things considered you have done a great job!

    1
  • AlbanDavid494•40
    @AlbanDavid494Submitted 9 months ago

    I need comments and review on this guys. thanks for the comment have made changes to my code. have leant something

    HTML, CSS

    3
    Anyona Zaddock Ogada•190
    @zacc-anyonaPosted 9 months ago

    Hello @AlbanDavid494, Your solution is good, but there are some few areas you can improve on.

    • Your page is not well landmarked. For example the div element with class attribution you could have enclosed it with <footer></footer>. Footer element is used to display author information, contact details. It is normally found at the bottom. But your author details are appearing at the top of the page.

    • Responsiveness. Your page is not that responsive especially for mobile devices. Consider reformatting your media query to;

    @media screen and (max-width: 600px) 
/*for smaller screens have a standard a width of 600px*/
    • The challenge was about social media links. Consider to add <a href=""></a> to your buttons.

    Other than that you have done a great job in completing this challenge.

    0
  • Anyona Zaddock Ogada•190
    @zacc-anyonaPosted 9 months ago
    • You did a good job on the challenge. I love it.
    • There is one minor problem. The links to your social profiles don't the cursor pointer when one hovers on it. You might consider adding the cursor pointer.
    1
  • Regina•240
    @RgBunnSubmitted 9 months ago

    Looking forward to hear your feedbacks on my code, so i can improve my skills 🤓

    Recipe page

    1
    Anyona Zaddock Ogada•190
    @zacc-anyonaPosted 9 months ago

    You did a great job Regina. There is just one flow

    • In the mobile design given by frontend mentor the image takes the full screen width of the mobile screen.
    • Consider letting the image having
    img {
width: 100vw;
}
    Marked as helpful
    1