Moses

Latest comments

• 

  Bruna Godoi Machado•100

  @BlackDerekerSubmitted 11 months ago

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

  I learned how to use the flexbox to make a responsive page.

  I would use more HTML5 semantics and learn more about CSS pre-processors.

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

  I had challenges on how to use flexbox and how it worked.

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

  I want feedback about best practices, accessibility and other tools to facilitate the job.

  

  QR code component using CSS Flexbox

  1

  40
  

  Moses•340

  @mbtenkorangPosted 11 months ago

  Congratulation 🎉🎉🎊🥳

  A few tips

  • Instead of using the <br> element to create a space between the div.card and div.attribution, you may consider using a margin value instead. You can read more about the use of the <br> element in this MDN- The Line Break element article.

  • You may have received a validation error notice about the div.attribution element. A better semantic structure is to use footer.attribution.

  All thhe best and happy coding 😁🧑‍💻

  Marked as helpful

  0
• 

  percydocomo•520

  @percydocomoSubmitted 11 months ago

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

  Setting the layout as similar as the original design. Setting the card at the center of the screen and also aligning the image and content within the card according to the original design.

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

  The card in active state has 2 effects. One effect is on a parent element and the other is on a child element. I had to figure out how to apply different effects on a parent element and a child element when the child element is on hover. CSS's pointer-events property solved the problem.

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

  This solution may not be the best responsive design but I created it by looking at the mobile design pic provided. This solution does not look very good at very small device screen.

  

  blog-preview-card

  2

  40
  

  Moses•340

  @mbtenkorangPosted 11 months ago

  Congratulations 🥳👏🎊🎉

  I observed 🥸 your media query is for mobile displays. The more ideal approach is to use it for larger/desktop displays. Also, most (if not all) sizing values are in px. That is not very ideal for responsive design, kindly consider em, rem , percentage and other similar values. You can read more about it in this Mozilla Developer - Responsive Design article.

  Also, here are other few ways to improve your solution;

  • Remove

  .card
  {position: absolute;
  top: 100px;
  }
  

  It is taking the .card element out of the flow of the document.

  • Change

  .container {
    background-color: var(--yellow);
    height: 100vh; //change
  min-height:100vh
  }
  

  • You should consider putting div.attribution outside the section.container element then change it into footer.attribution to pass the html validation test, and if you want it to stick to the bottom then consider using a 2-row grid to create a sticky footer. Example code:

  .layout{
  display:grid;
  grid-template-row: 1fr 1rem;
  place-items: center center;
  }
  .card{
  grid-row: 1/2;
  }
  .footer{
  grid-row: 2/3;
  }
  

  • Responsive design recommendation: use width or max-width with percentage value for img or picture element

  I hope this helps improve your solution. All the best 👍👍

  Marked as helpful

  0
• 

  Letícia Oliveira•300

  @zapfish1Submitted 11 months ago

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

  i think i did a bad job trying to center the div

  

  social media links with HTML and CSS

  1

  40
  

  Moses•340

  @mbtenkorangPosted 11 months ago

  Hello @zapfish1 ... Easy there, you did not do a bad job. You got most of it close to the design as possible (thumbs up 👍👍👍 for that), just that you took a more challenging😬🥵 route.

  Now, let's make a few adjustments to make it great.

  • Did you know that, the browser applies styling to the elements on the page before the stylesheet is applied. Some of these styles have a way of distorting the styling that is added later. Hence, most devs (🤔 - if not all) apply some resets to create a "base" look for the webpage before styling and you should too. It is called CSS Resets. There are a lot of articles about it online. The lines below 👇👇 should be okay for this project.

  *,
  *::before,
  *::after {
      box-sizing: border-box;
  }
  
  
  * {
      margin-block: 0;
      padding: 0;
  }
  
  body {
      min-height: 100vh;
  }
  
  
  img,
  picture {
      max-width: 100%; /* helps to fit image within page/div container */
      display: block;
  }
  

  • In relation to positioning, here are a few observations;

  1. The div.child element is applied these styles;

  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  

  and I am sure it was supposed to work with the style declarations for the .container element to position the "card" in the center. I am of the view this is a hard way 🥵🥵😬 to do it. I recommend that since you are fond of grid you apply this style {display:grid; place-items: center center;} to the <body> to place the div.child in the center. No margin or padding needed.

  2. The positioning effect achieved using this declaration

  .links a {
    display: grid;
    justify-content: center;
  }
  

  can be done with {text-align:center;} 😉....

  • The initial max-width styling for the <img> element in the css reset can be reduced when applying the actual styles to get the picture like the size in the design. The size is most likely below 40%.

  • I noticed you used a px value for the max-width of the div.child element. You can consider using a % value (which is way more responsive) for the mobile design, then apply the px value for desktop/larger displays using a media-query - read more about it on MDN

  I hope the following help improve your solution. All the best and happy coding😁🧑‍💻

  Marked as helpful

  1
• 

  agnese•360

  @aggie-lSubmitted 11 months ago

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

  I am proud of finishing another challenge, although there are probably better ways of doing it.

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

  One of my main challenges so far has been centering the main component - in this case the recipe page container - right in the middle of the page. I have tried using flexbox before, I am using grid here, but for some reason I don't understand it is not centering properly. Also, I used padding on body to prevent the recipe container from sticking to the top and bottom of the page.

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

  All feedback is very welcome and appreciated :)

  

  Responsive Recipe page

  1

  50
  

  Moses•340

  @mbtenkorangPosted 11 months ago

  @aggie-l Congratulations 🎉🥳👏 on completing this challenge.

  Some feedback in relation to the challenge you encountered;

  • To notice that your design choice for the <body> element works you may view the webpage in the browser on a simulated 4K display using the Toggle device emulation feature - CTRL+SHIFT+M of the Developer console - CTRL+SHIF+I.

  • A quick fix though, for mobile devices the <body> element receives a padding which based on the designs will be more suitable only in a media-query for desktop/larger displays. The padding should keep the page "centered" until the display is much much larger as you've done now.

  • The flex declaration for the .recipe-container can be removed and the design will still hold because the padding value of the .recipe-container is keeping all the elements in line at the along all edges

  I hope this feedback helps. Great job 👍and happy coding 😁🧑‍💻

  Marked as helpful

  1
• 

  LucaRiver0n•10

  @LucaRiver0nSubmitted about 1 year ago

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

  I am proud of me becasue I think this challenge was easy and the next time I will start with mobile-first

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

  I had some problems with change the color of the list, I dont know how to do that but I will learn in another challenge!

  

  Responsive recipes web created with Html and SASS

  #sass/scss

  2

  60
  

  Moses•340

  @mbtenkorangPosted about 1 year ago

  Hello 🙋‍♂️ @LucaRiver0n,

  Congratulations on completing this challenge. 👏🎊🥳🎉

  • About styling dots and numbers in front of the list, you'll have to use the ::marker{} tag to target these elements. You may use the following resources to learn more about it
  • 1️⃣CSS Tricks
  • 2️⃣MDN

  I hope this tip helps improve your solution.

  All the best and happy coding 😀🧑‍💻🌟

  0
• 

  Jordan Davenport•1,100

  @jjdavenportSubmitted about 1 year ago

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

  the html is more orderly and the elements seem to be used correctly

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

  the page container became a problem beacuse of the page overflow.

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

  containing the page and making a responsive layout for all devices.

  

  Recipe page with Flexbox and Grid

  2

  70
  

  Moses•340

  @mbtenkorangPosted about 1 year ago

  Hello 🙋‍♂️ @jjdavenport,

  Congratulations on completing the challenge. 👏🎊🥳🎉

  A few tips for improvement in relation to semantic HTML;

  • Use <section> tags for the various parts i.e.: Nutrition, Ingredients, Instructions,Preparation time instead of <div> tags.
  • Use the same heading tags except an <h1> for the headings of the sections instead of giving a lower section heading for each.
  • Use a <p> tag for the text that introduces the <table> rather than a <legend> tag
  • Change <div class="attribution"> to <footer class="attribution"> to pass the HTML validation test

  I am sure implementing these changes will improve your solution.

  All the best and happy coding 😀🧑‍💻🌟

  Marked as helpful

  3