KonradJam

Latest comments

• 

  Paulo Wells•530

  @wellsprSubmitted 7 days ago

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

  I focused on replicating the original design while adding a third (tablet) view. I searched for the simplest structure that would work nicely on every layout. I also introduced a smooth animation to the Javascript interaction. I'm pretty happy with the result.

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

  I've put some effort into keeping the code simple and legible;

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

  Feedback is welcome!

  

  Responsive Article Preview

  #accessibility#animation#sass/scss#lighthouse

  1

  20
  

  P

  KonradJam•960

  @KonradJamPosted about 15 hours ago

  Hello @wellspr!

  Good work. You don't need two share buttons. One when the share component is hidden and one when it is visible. Change the z-index for the share button to be above the share component.

  1
• 

  mpujazon•30

  @mpujazonSubmitted about 21 hours ago

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

  I've learned new features that I've never used before, such as color and spacing variables.

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

  Using Flexbox has been a challenge for me because I'm not experienced with it, and I still have issues positioning elements. I'm proud that I think this challenge has helped me solidify my knowledge of Flexbox.

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

  I had an issue with the rendering of "illustration-article.svg." If you check my solution, you'll notice a white line at the bottom, between the image and the box-shadow. I haven't found a solution for this yet. If anyone knows what the problem is, please let me know. Thank you!

  

  Responsive blog preview card using Flexbox

  2

  20
  

  P

  KonradJam•960

  @KonradJamPosted about 20 hours ago

  Hello @mpujazon!

  The white space you see is the background color, but changing it to transparent won't fix the problem. You could crop the image, to do that, add this to card-image:

  max-height: 197px; //or convert to rem
  object-fit: cover;
  

  Marked as helpful

  1
• 

  P

  kindlypi8MCeN7•120

  @kindlypi8MCeN7Submitted about 21 hours ago

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

  Nothing in particular.

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

  Nothing in particular.

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

  Nothing in particular.

  

  Testimonials grid section

  2

  30
  

  P

  KonradJam•960

  @KonradJamPosted about 21 hours ago

  Hello @kindlypi8MCeN7!

  Good Job! Some advice for you:

  • Improve HTML5 semantics. You could change <main> to <article>, for carts use <section>, in <section> use <header> and others <section>.
  • Add some inline padding for body.
  • Use Relative Units

  0
• 

  Ayodeji Elegbede•40

  @Goodboy619Submitted about 24 hours ago

  

  recipe-page-solution using HTML and CSS

  1

  20
  

  P

  KonradJam•960

  @KonradJamPosted about 21 hours ago

  Hello @Goodboy619!

  Your solution looks nice, but it lacks an important feature.

  • Your article is not responsive. You don't have a media query.
  • First, you should style your article for mobile, and then add a media query for larger devices.
  • For styling is class attribute, not id.
  • Use Relative Units
  • Refactor your code according to HTML5 semantics

  0
• 

  P

  Nicholas Crawford•50

  @nicholas-crawfordSubmitted about 23 hours ago

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

  I was pretty happy with how close it was to the design.

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

  I had to fix a lot of the responsiveness at the last minute and I realised some of the CSS resets were breaking some things so I had to remove them.

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

  • Does this need any changes for other devices?
  • Anything I could do to make this cleaner?
  • Are there any unnecessary or conflicting styles?
  • Does the site look and function consistently across different browsers?
  • Am I following current CSS and HTML best practices?

  

  Responsive Blog Preview Card

  #pure-css

  1

  10
  

  P

  KonradJam•960

  @KonradJamPosted about 21 hours ago

  Hello @nicholas-crawford!

  Nice solution. One of the best I've seen so far. You could improve:

  • Reset CSS at the beginning of the CSS file.
  • Use Relative Units
  • You could use aria-labeledby for better accessibility.
  • Try writing your next code with logical properties

  Marked as helpful

  1
• 

  FlightReacts11•80

  @FlightReacts11Submitted about 22 hours ago

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

  idk

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

  media query to hide image on desktop size for when it has to change to mobile

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

  none

  

  Perfume

  2

  10
  

  P

  KonradJam•960

  @KonradJamPosted about 21 hours ago

  Hello @FlightReacts11!

  Looks good! Some advice for you:

  • In this situation, don't use media query to hide/show the image. Even if you hide the image, it'll still load and consume extra bandwidth. Use the srcset and sizes attributes of <img>.
  • <h1>-<h6> are for headings, like in this challenge name of perfume. For other text, use <p> or <span>.
  • Read about HTML5 Semantic on my LinkedIn
  • Start using Relative Units

  0