M Kerr

Latest comments

• 

  william nyaranga•30

  @William-nyarashSubmitted about 14 hours ago

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

  The fact that I was able to utilize the browser "dev tools" to make the shadow effect

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

  I wouldn't say that I had challenges, all through I was able to find a way that solves the problem though it might be unconventional

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

  For the text "Learning" what is the best tag to use and also should I specify the width for that element, if so in what unit of measurement?

  

  a blog card in html and css

  #accessibility

  1

  00
  

  P

  M Kerr•720

  @mkerr-githubPosted about 13 hours ago

  "For the text "Learning" what is the best tag to use and also should I specify the width for that element, if so in what unit of measurement?"

  You code links to a different project, the social media links challenge.

  basically you can use something like :

  <p class="blog-category">Learning</p>

  and then in the .blog-category class in CSS, use a max-width, and max-height.

  The convention for responsive websites is to use rem and sometimes em, instead of pixels for most items, as they are more responsive. pixels can be used for small elements like icons and buttons where you do not want the size to change even on small screens.

  What I do, is do everything in pixels first (as the figma designs are in pixels) and then when it looks ok, convert them all to rem.

  A rem is 16px, as 16px is the usual default font size on most browsers.

  more details here:

  https://austingil.com/px-or-rem-in-css/#:~:text=Pixels%20are%20an%20absolute%20unit,the%20equivalent%20of%2024%20pixels.

  If you found anything in this comment helpful, please remember to click the "mark as helpful" button. Thank you!

  Keep up the good work, and keep going! 👋

  Marked as helpful

  0
• 

  Prashant Raj•10

  @prashantrajchSubmitted about 19 hours ago

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

  I'm most proud of how clean and structured the layout turned out using just basic HTML and CSS. It was satisfying to recreate the design accurately and apply Flexbox to center the component both vertically and horizontally.

  I kept the code simple and readable

  I used the Outfit font via Google Fonts to match the design

  I applied shadows and spacing carefully to improve the visual appeal

  Next time, I would:

  Make the layout more responsive by adding media queries

  Optimize the image and use better alt text for accessibility

  Consider using a CSS preprocessor like SASS for better scalability

  Include a README.md file in the repo with setup instructions and a live preview link

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

  One of the main challenges I faced was centering the QR code card perfectly in the viewport. At first, I tried using margin-based approaches, but they didn’t work well across different screen sizes.

  To overcome this, I switched to using Flexbox, which made vertical and horizontal centering much easier and more reliable.

  Another challenge was ensuring the spacing and sizing matched the design exactly. I used padding, gap, and border-radius carefully and frequently referenced the design preview to keep everything aligned.

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

  I'm looking for feedback on the following areas:

  Responsiveness: How can I improve the design to make it more responsive on smaller and larger screen sizes without breaking the layout?

  Accessibility: Are there any accessibility improvements I can make? For example, is there a better alt text I should use for the QR code image?

  Code structure: Is there a more efficient or cleaner way to organize my CSS or HTML for better readability and scalability?

  Styling consistency: Does the spacing, typography, and overall visual balance look good? Any tweaks you would suggest?

  Best practices: Are there any modern CSS practices I’m missing that could improve the project?

  

  QR Code Component using HTML & CSS Flexbox | Frontend Mentor

  2

  10
  

  P

  M Kerr•720

  @mkerr-githubPosted about 16 hours ago

  "Responsiveness: How can I improve the design to make it more responsive on smaller and larger screen sizes without breaking the layout?"

  Responsiveness is not really part of this challenge, but here's some tips on responsiveness in general :

  "Accessibility: Are there any accessibility improvements I can make? For example, is there a better alt text I should use for the QR code image?"

  <img src="./images/image-qr-code.png" alt="" />

  don't leave alt blank as you have.

  You should have something like this : <img src="./images/image-qr-code.png" alt="QR Code" />

  The purpose of alt is that if the image does not show up, the alt text will appear. The alt text will also be read out loud by screen readers for the blind, so they know what the image is referring to, so leaving it blank is not a good idea.

  "Code structure: Is there a more efficient or cleaner way to organize my CSS or HTML for better readability and scalability?"

  For a small card like this it's fine. Later on you can use whatever code editor you're using to autoformat the HTML and CSS for you, so you can spend more time on actual coding.

  "Styling consistency: Does the spacing, typography, and overall visual balance look good? Any tweaks you would suggest?"

  You could follow the design a little more closely by ensuring the words appear on the same lines as the design does, i.e. two lines instead of three, etc.

  "Best practices: Are there any modern CSS practices I’m missing that could improve the project?"

  On this very small project so far? no.

  If you found anything in this comment helpful, please remember to click the "mark as helpful" button. Thank you!

  Keep up the good work, and keep going! 👋

  0
• 

  Noxica17•30

  @Noxica17Submitted about 23 hours ago

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

  I’m proud of having completed my very first Frontend Mentor challenge and setting up the full workflow with Git and GitHub. I took the time to organize my files, write clean code, and follow a mobile-first approach.

  Next time, I would try to deploy the site earlier in the process to avoid last-minute issues. I’d also automate some tasks like committing changes more efficiently (I started working on a custom script for that!).

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

  I ran into several Git-related issues: managing .gitignore, understanding the difference between master and main, and getting my repo clean and ready to push. I also had to troubleshoot problems with ignored files being committed anyway. With some research and support, I fixed the branch issue and cleaned up the repo structure.

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

  I’d love feedback on: • My file structure and naming conventions • CSS organization: could it be cleaner or more efficient? • Any improvements I could make for better accessibility or responsiveness

  

  Responsive QR Code Component with CSS Grid & Flexbox (html, css)

  1

  00
  

  P

  M Kerr•720

  @mkerr-githubPosted about 16 hours ago

  "I’d love feedback on: • My file structure and naming conventions • CSS organization: could it be cleaner or more efficient? • Any improvements I could make for better accessibility or responsiveness"

  Hi, was going to give a little feedback, but your code is not showing up at the link you've provided.

  https://github.com/ton-nom-utilisateur/qr-code-component

  0
• 

  Pablo Meiguins•20

  @Parolar007Submitted about 21 hours ago

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

  I'm not proud of anything, but I would use a different tool, or the same one for both mobile and desktop, as I used grid for mobile and flexbox for desktop.

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

  It was a bit complicated in the breakpoint part. It wasn't really that complicated, but I had a hard time getting lost in the different screen sizes when it comes to cell phones. What works for one person may not work for another.

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

  Device screen dimensions. How to organize the layout to make it flexible and how to define the right size for each type of screen.

  

  Blog Preview Card - Pablo Meiguins

  #pure-css

  1

  00
  

  P

  M Kerr•720

  @mkerr-githubPosted about 16 hours ago

  "Device screen dimensions. How to organize the layout to make it flexible and how to define the right size for each type of screen."

  Basically, you can use media queries, where you can specify in the CSS that certain properties and sizes should change once the pixel size of the screen reaches a certain size. Watch a few short tutorials on CSS and media queries.

  Here is a nice short explanation as well on W3 schools:

  https://www.w3schools.com/css/css_rwd_mediaqueries.asp

  For responsive purposes the convention is to convert these measurements to "rem", to do so divide them by 16 (as the base rem is 16px, and 16px is set by most users as the default on browsers.).

  Then use max-width to set the large size and min-width to set the small size.

  The convention is to use rem and sometimes em, instead of pixels for most items, as they are more responsive.

  Pixels can still be used for small elements like icons and buttons where you do not want the size to change even on small screens.

  More details here: https://austingil.com/px-or-rem-in-css/#:~:text=Pixels%20are%20an%20absolute%20unit,the%20equivalent%20of%2024%20pixels.

  If you found anything in this comment helpful, please remember to click the "mark as helpful" button. Thank you!

  Keep up the good work, and keep going! 👋

  0
• 

  william nyaranga•30

  @William-nyarashSubmitted about 21 hours ago

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

  Being able to practice on tangible project

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

  Deciding on the width of the text element and the font size

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

  General layout in terms of how to position the various elements

  

  a responsive qr code component using html and css

  #accessibility

  1

  00
  

  P

  M Kerr•720

  @mkerr-githubPosted about 16 hours ago

  Great efford, looks good!

  To get it to fully display in the center, you can do :

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  

  and to keep the "challenge by" out of the way at the bottom of the screen some people used

  position: absolute;
  bottom: 1rem;
  text-align: center;
  

  The next challenge on the learning path helps to learn about how to make such a card more responsive, and they show two layouts, desktop and mobile.

  https://www.frontendmentor.io/challenges/blog-preview-card-ckPaj01IcS

  Basically, you can use media queries, where you can specify in the CSS that certain properties and sizes should change once the pixel size of the screen reaches a certain size. Watch a few short tutorials on CSS and media queries.

  Here is a nice short explanation as well on W3 schools:

  https://www.w3schools.com/css/css_rwd_mediaqueries.asp

  For responsive purposes the convention is to convert these measurements to "rem", to do so divide them by 16 (as the base rem is 16px, and 16px is set by most users as the default on browsers.).

  Then use max-width to set the large size and min-width to set the small size.

  The convention is to use rem and sometimes em, instead of pixels for most items, as they are more responsive.

  Pixels can still be used for small elements like icons and buttons where you do not want the size to change even on small screens.

  More details here: https://austingil.com/px-or-rem-in-css/#:~:text=Pixels%20are%20an%20absolute%20unit,the%20equivalent%20of%2024%20pixels.

  If you found anything in this comment helpful, please remember to click the "mark as helpful" button. Thank you!

  Keep up the good work, and keep going! 👋

  Marked as helpful

  0
• 

  Moose05•20

  @Moose05Submitted about 19 hours ago

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

  I have learnt from my previous challenge and the feedback i got then has helped me to improve my CSS skills and HTML skills so as to get them as close to the solution as possible.

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

  CSS styling. I overcame them by research and looking at how other people have done similar things and how can i get my solution to be similar or to have similar ways of working.

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

  More tips and tricks on how to get styling to be better, that is the part that i take most time on and somehow it will delay me.

  

  Blog-Preview

  1

  00
  

  P

  M Kerr•720

  @mkerr-githubPosted about 16 hours ago

  "More tips and tricks on how to get styling to be better, that is the part that i take most time on and somehow it will delay me."

  Here's a helpful article on using Figma to get the measurements. It takes a bit of poking about at the values on the right-hand column put with a bit of practice you'll get it. Good to practice this before the next challenge.

  https://www.frontendmentor.io/articles/figma-for-developers-how-to-work-with-a-design-file-m6CZKZ1rC1

  If you found any of this useful, please remember to click the mark as helpful button, thank you!

  Keep up the good work and keep going! 👋

  Marked as helpful

  0