My QR Code Card – Frontend Mentor Challenge

Community feedback

• 

  MEHNOOR SHAHBAZ•700

  @Mahnoor366880Posted about 1 month ago

  You've done a fantastic job with your QR code project!✨ It already has a great structure, and with just a few refinements, you can make it match the required design perfectly. Your effort in building this challenge shows your dedication to improving your frontend skills—keep up the great work!

  To fine-tune your design and align it with the expected result, here are a few key improvements to make:

  1. Background Color Adjustment

  Your current background is plain white, but the required design features a light blue background for a softer look. You can achieve this by adding the following CSS:

  body { background-color: #d5e1ef; /* Light blue background / display: flex; justify-content: center; align-items: center; min-height: 100vh; / Center the card / font-family: 'Outfit', sans-serif; / Ensure correct font */ }

  2. Card Styling Improvements

  Your card already looks great, but adding rounded corners and a subtle shadow will enhance its appearance and give it a floating effect.

  Update your .card CSS with the following:

  .card { background: white; padding: 20px; border-radius: 15px; /* Rounded corners / box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); / Subtle shadow */ text-align: center; max-width: 320px; }

  These small refinements will make your project even more polished and professional. You're on the right track—keep pushing forward, and soon, you'll be mastering even more complex frontend challenges! Great job!

  Marked as helpful

  2
• 

  Marzia Jalili•4,280

  @MarziaJaliliPosted about 1 month ago

  Great job!

  Some suggestion:

  You can use the terminal in the vs code for publishing the project to github.

  • First, make sure you've download Git, if not it won't work.
  • Second, in the terminal run the code below to register your username and email:

  // username
  git config --global user.name "Your Name"
  
  // email
  git config --global user.email "your_email@example.com"
  

  • Then, initialize the repository aka the project's folder:

  git init
  

  • After running this code, add all the files by using the line below:

  git add .
  

  • Next, set your first commit to inidicate you've initialized the repo:

  git commit -m "Initial commit"
  

  And that's all it!

  Now all you have to do is to go to your github account find the repo and go to it's setting. In the settings go to pages and there will be a section called braunch, in case you're not aware of that, click the select branch dropdown and choose main and hit save.

  Wait for a minute or two and then refresh the page and you will get the url of your web.

  Actually, I prefer using the git source control since it doesn't require me to write any code at all.

  In this way, as long as you have Git downloaded on your device you can follow the steps below:

  • First, to nevigate to the source control you can click it's option below the folders icon and the search icon on the side bar of vs code or simply press ctrl + shift + G.

  • Second, click the Initialize Repository button.

  • Then, you will have to write your first commit in the input field, something like inital commit as above and then click the commit button.

  • Then, press the Publish Brunch button.

  And you're repo will be published to Github this easily! At the end follow the same steps for settings as above and your all set.

  In case you find any difficulties, let me know.

  😎😎😎

  Marked as helpful

  1
• 

  P

  Kristian Haug•140

  @klhaugPosted about 1 month ago

  Hi!

  Looks great.

  Seems like your text-padding is a bit heavy-handed. Might look into that and let there be fewer lines of text.

  Besides that, great job! Keep it up

  1
• 

  P

  Grid-World•170

  @LiJunXiang1234Posted about 1 month ago

  From the visual effect, it seems that you haven't centered the card, the background color is different from the design, and the font size needs adjustment.

  I thought these were just simple value adjustments, but when I looked at your code, to be honest, I was quite shocked. I sincerely apologize, but I can't understand your code and am unable to provide specific modification suggestions.

  If you need help or have any questions, feel free to ask me! (Although I'm also a beginner, I'll do my best to respond!)

  0

  ---

  

  R-nees•30

  @R-neesPosted about 1 month ago

  @LiJunXiang1234 i have updated and centered the card ,and also the background color

  0

  

  P

  Grid-World•170

  @LiJunXiang1234Posted about 1 month ago

  @R-nees I see your update, and it looks great! Congratulations!

  By the way, I'm really curious about your code. Why do you have so many <div class="white" style="grid-area: 1 / 1;"></div> elements?

  0

  

  R-nees•30

  @R-neesPosted 27 days ago

  @LiJunXiang1234 i din't know any other way, it was even longer i reduced it by half, have you got an alternative method, kindly advice

  0

  

  P

  Grid-World•170

  @LiJunXiang1234Posted 26 days ago

  @R-nees I finally understand what these grids are for—they're used to draw QR codes. But the QR code image should be provided in the Start file, so there's no need to draw it using individual small grids.

  0

  

  R-nees•30

  @R-neesPosted 26 days ago

  @LiJunXiang1234 yes, true, but I just enjoyed the process of designing it atleast now i know the secret behind qr codes

  1