Anyona Zaddock Ogada

Latest comments

• 

  msa-sitare•70

  @msa-sitare

  Submitted over 1 year 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

  40
  

  Anyona Zaddock Ogada•190

  @zacc-anyona

  Posted over 1 year 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.

  1

  Marked as helpful
• 

  Monfaredz•120

  @Monfaredz

  Submitted over 1 year ago

  

  blog-preview-card-main

  2

  30
  

  Anyona Zaddock Ogada•190

  @zacc-anyona

  Posted over 1 year 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.

  0

  Marked as helpful
• 

  P

  Alberto Valenzuela•170

  @AlbertoVaMa

  Submitted over 1 year ago

  

  Recipe Web with Flex

  1

  20
  

  Anyona Zaddock Ogada•190

  @zacc-anyona

  Posted over 1 year 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.

  1

  Marked as helpful
• 

  MaxCodeCraft•90

  @MaxCodeCraft

  Submitted over 1 year 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

  50
  

  Anyona Zaddock Ogada•190

  @zacc-anyona

  Posted over 1 year 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.

  1

  Marked as helpful
• 

  Danielle•30

  @danilscodes

  Submitted over 1 year 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

  30
  

  Anyona Zaddock Ogada•190

  @zacc-anyona

  Posted over 1 year 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.

  1

  Marked as helpful
• 

  stautuan•160

  @stautuan

  Submitted over 1 year 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

  80
  

  Anyona Zaddock Ogada•190

  @zacc-anyona

  Posted over 1 year 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