João Vitor

Latest comments

• 

  P

  Shixu Luo•220

  @ShixuLuo

  Submitted 18 days ago

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

  First frontend challenge! Next time I might try Tailwind CSS instead of plain CSS.

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

  The biggest challenge was the width of boxes. Noticed in the figma design files, only qrcode had a fixed size. All other boxes are adjusted automatically based on the qrcode.

  I guess the key is to set the .container (or .card)'s width: min-content. And set children's width: 100%. Then it seems alright.

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

  How to code it more elegantly?

  

  QR Code Component

  2

  10
  

  João Vitor•720

  @jvssvj

  Posted 17 days ago

  Hello friend, congratulations on completing the challenge 👏. I'll give you some tips, starting with HTML.

  📌 I saw that you placed a main tag, and then a div with the container class, this div is not necessary, because in this case the main tag would already be the container.

  📌 In your text class we can place a section, as it contains a main title.

  💡 Use BEM in your projects. Read more here: BEM

  Your Fixed HTML:

      <main class="container">
          <img src="images/image-qr-code.png" alt="QR Code image.">
         
          <section class="text">
              <h1 class="text-preset-1">Improve your front-end skills by building projects</h1>
              <p class="text-preset-2">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
          </section>
      </main>
  

  📌 If the component needs to shrink according to the screen size, do not use fixed widths, this way you avoid some unnecessary styles. for example: width: 320px, opt for:

  .component {
     width: 100%; /*To occupy 100% of the available size*/
     max-width: 320px; /*adjust as needed*/
  }
  

  1

  Marked as helpful
• 

  P

  Tharidu Deshan•120

  @deshanekanayaka

  Submitted 25 days ago

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

  I'm proud that I completed the challenge.

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

  Displaying error states and displaying success message cards was a bit difficult but managed to do that.

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

  Any feedback is much appreciated.

  

  Newsletter Sign-Up Form

  1

  10
  

  João Vitor•720

  @jvssvj

  Posted 25 days ago

  Hello friend, congratulations on completing the challenge 👏. I'll give you some tips.

  📌 I saw that you forgot to center a card, to do this just add these styles to your project:

  html,
  body {
    /*...your styles above*/
    min-height: 100vh; /*add this line*/
    display: flex; /*add this line*/
    align-items: center; /*add this line*/
    justify-content: center; /*add this line*/
  }
  

  📌 If the component needs to shrink according to the screen size, do not use fixed widths, this way you avoid some unnecessary styles. for example: width: 320px, opt for:

  .component {
      width: 100%; /*To occupy 100% of the available size*/
      max-width: 500px; /*adjust as needed*/
  }
  

  💡 Using semantic tags in HTML is essential to improve accessibility, code organization, and search engine optimization (SEO).

  📚 Here are some great places to learn HTML for free and in a practical way:

  1. MDN Web Docs
  2. HTML Dog
  3. W3 Schools

  0

  Marked as helpful
• 

  Lxnneke•40

  @Lxnneke

  Submitted 28 days ago

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

  I am proud of actually following through with it, because I got a little bit annoyed at a few things that weren't working, but instead of quitting (which I'd done when I started), I persisted and got it done! Pretty decently done I'd say!

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

  I got stuck when it came to actually centering the QR div. While I got it centered horizontally, I actually struggled a lot with centering it vertically, and I have no clue why. I overcame it by looking up other ways to solve the given issue.

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

  Honestly, responsiveness. I think I did something for it at least (got it to work on phone size as well), but I am not 1000% happy with it. I would prefer it being even more responsive!

  

  QR Code Component Challenge

  #accessibility

  2

  40
  

  João Vitor•720

  @jvssvj

  Posted 28 days ago

  Hello friend 👋, I'm going to help you with a few things.

  📌 Your card is not aligned, in this case you can use flexbox or grid, I chose flexbox:

  body {
      background-color: hsl(212, 45%, 89%);
      font-family: Outfit; 
      min-height: 100vh; /*Add this line*/
      display: flex; /*Add this line*/
      align-items: center; /*Add this line*/
      justify-content: center; /*Add this line*/
  }
  

  📌 In this case you don't need mediaqueries, you can remove them.

  📌 In your qrBlock class, we put width 100% and then max-width: 320px. This style makes your card have a maximum size and not a fixed one:

  .qrBlock {
      background-color: white;
      border-radius: 15px;
      width: 100%; /*Add this line*/
      max-width: 320px; /*Add this line*/
      padding: 15px;
  }
  

  This means your project is now responsive to smaller screens. 👏

  A few tips:

  If the component needs to shrink according to the screen size, do not use fixed widths, for example: width: 320px, opt for:

  .component {
      width: 100%; /*To occupy 100% of the available size*/
      max-width: 320px; /*adjust as needed*/
  }
  

  Using semantic tags in HTML is essential to improve accessibility, code organization, and search engine optimization (SEO). 💡

  📚 Here are some great places to learn HTML for free and in a practical way:

  1. MDN Web Docs
  2. HTML Dog
  3. W3 Schools

  🎨 Here are some great places to learn CSS for free and in a practical way:

  1. MDN Web Docs
  2. CSS Tricks
  3. freeCodeCamp

  Good studies 📚

  1

  Marked as helpful
• 

  Craig Wolfe•190

  @craigwolfe

  Submitted about 1 month ago

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

  I am most proud of the display the two middle cards in the design as a column and displaying the remaining two as a row.

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

  Adding the border at the top of each card with different colors was challenging. In the end I decided on using separate css class selectors for each card so I could apply different colors.

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

  I noticed when I tested the responsiveness on the mobile layout that at about 500px breakpoint all of the cards started to shift left.

  

  Four Card Feature Section Responsive Design

  1

  30
  

  João Vitor•720

  @jvssvj

  Posted about 1 month ago

  Hello friend, congratulations on completing the solution 👏. About your problem, it occurs because you put width in your header, and not max-width, so your header will not decrease according to the screen, it will remain fixed.

  header {
    text-align: center;
    margin: auto;
    margin-bottom: 2rem;
    width:100%; //Add this line
    max-width: 500px; //Edit this line
  }
  

  With that your problem was fixed. ✅

  📌Another problem I found was in the second card that has no spacing with the first, but I leave that challenge to you, good luck bro. ✌

  0

  Marked as helpful
• 

  P

  Austin Tanksley•50

  @austin-tanksley

  Submitted about 1 month ago

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

  I think I matched the reference pretty well

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

  Whether to use grid or flexbox

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

  Animation

  

  Social Links Profile

  2

  30
  

  João Vitor•720

  @jvssvj

  Posted about 1 month ago

  Hello Austin, congratulations your solution was very good 👏. About your life I will help you, first let's fix your html:

      <div class="links">
        <a class="link" href="#">GitHub</a>
        <a class="link" href="#">Website</a>
        <a class="link" href="#">LinkedIn</a>
        <a class="link" href="#">Threads</a>
        <a class="link" href="#">Instagram</a>
      </div>
  

  It doesn't make sense for the links to be inside a li in this case, the way I showed you your code is clean and organized and makes styling easier. (Replace # with your social media links if you wish.)

  🎨 Finally, let's move on to the animation, its name is :hover, it's an effect that appears when you hover the mouse over the elemen:

  .links {
      display: flex;
      flex-direction: column;
      gap: 16px;
  }
  
  .link {
      transition: .3s ease; /*add this line*/
  }
  
  .link:hover {
      background-color: hsl(75, 94%, 57%);
      color: hsl(0, 0%, 8%);
      font-weight: 600;
  }
  

  in this case, replace the <ul> in the css with .links, and the <li> with .link, so you can style them all at once ✍

  0
• 

  P

  vadims3103•80

  @vadims3103

  Submitted about 1 month ago

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

  Finally, I will use Git technology in my projects! Previously, I was a bit lazy to use it for self-guided projects.

  Since this is my first project on this platform, I decided to keep it simple by using only CSS Grid and Flexbox.

  In future projects, I will explore more advanced tools, libraries, and frameworks.

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

  This wasn’t a complicated challenge, so there were no real difficulties. However, it was a great opportunity to experiment with a sticky footer. Previously, I achieved this effect using position: absolute, but for this project, I chose to use CSS Grid instead.

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

  It would be great if someone could review the code and provide feedback on any issues or suggest improvements, especially if something isn’t implemented in a production-ready way.

  

  QR code component using CSS Grid and Flexbox

  1

  30
  

  João Vitor•720

  @jvssvj

  Posted about 1 month ago

  Hello friend, congratulations on completing the challenge 👏. Regarding the code, try using max-width to set a maximum width for the component. This way, it adjusts to the screen size and can shrink as needed, ensuring a more responsive layout. ex:

  .card {
    width: 100%;
    max-width: 320px;
  }
  

  🎨 Use :root to define global CSS variables, making it easier to maintain and reuse styles across your project. ex:

  :root {
    --primary-color: #3498db;
    --font-size: 16px;
  }
  
  button {
    background-color: var(--primary-color);
    font-size: var(--font-size);
  }
  

  Avoid using <div> for everything! Opt for semantic tags like <header>, <nav>, <main>, <section> and <article>. This improves your site's accessibility and SEO. Your improved html would look like this:

      <main class="card">
          <img class="card__qr__code__img" src="images/image-qr-code.png" alt="QR Code image.">
         
          <section class="card__txt">
              <h1 class="card__txt__t">Improve your front-end skills by building projects</h1>
              <p class="card__txt__p">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
          </section>
      </main>
  

  📚 Here are some great places to learn HTML for free and in a practical way:

  1. MDN Web Docs
  2. HTML Dog
  3. W3 Schools

  🎨 Here are some great places to learn CSS for free and in a practical way:

  1. MDN Web Docs
  2. CSS Tricks
  3. freeCodeCamp

  Good luck bro ✌.

  1

  Marked as helpful