Skip to content
OverviewSolutions
27
Comments
8

Alyfer Jacobsen

@AlyferJTBrazil450 points

Hi there, my name is Alyfer. I'm a FrontEnd developer. Currently deep diving into the FrontEnd knowledges.

I’m currently learning...

The React library

Latest solutions

View more solutions

Latest comments

  • Peter•20
    @skipperr254
    What are you most proud of, and what would you do differently next time?

    I was able to implement the BEM CSS styling method which I have never used before. Hope I implemented it the right way!

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

    Probably trying to figure out the rem values for the various px values used in the project.

    What specific areas of your project would you like help with?
    1. How was my implementation of BEM? Is that's how it's done or is there a better way I missed?
    2. Is using rem for the various sizes including the text-size, width, and border-radius the best way to scale the elements based on the screen size? Did I use the rem sizing the correct way?

    Blog Preview Card Using BEM CSS Styling and Flexbox

    #bem
    1
    Alyfer Jacobsen•450
    @AlyferJT

    Well, the view code page is going to 404, you changed the project name. But, congratulations!

    The thing about rem is root-em, he is a size unit based on the root value, since the default root value is 16px in most cases

    .5rem = 8px
1rem = 16px
2rem = 32px
5rem = 80px
And so on and so forth...

    but there is a trick that a lot of users use The 62.5% Font Size Trick I recommend you to search about it

    This trick is about setting the root default size to 62.5%. It's 62.5% of the default (16px) that is equal to 10px. They set then inside the html {}, like this:

    html {
      font-size: 62.5%;
}

    That's how you set it Well, this bring us a lot of benefits, and i personally like to use it This helps us setting responsive fonts on the screen, since not all browsers uses the same font-size by default, and some users grow up the font to better see then, you could say that it brings us a help with the accessibility, actually this is a rem property, but you simplify the use with this 62.5% trick

    Anyway, when you set the 62.5%, this is the way you would use the rem:

    .5rem = 5px
1rem = 10px
2rem = 20px
5rem = 50px
And so on and so forth...

    Cool, right? You can clearly see how much px the rem will give That's a life savier Well, that's not all, this is the main idea about the trick But i recommend you to search about it, there is a lot about

    Marked as helpful
  • Madeha•10
    @Maadeha
    What are you most proud of, and what would you do differently next time?

    I was most proud of me using flexbox, but next time I would try to get into media queries

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

    Knowing which element to use flexbox.

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

    Any help is welcome

    QR code component using Flexbox

    2
    Alyfer Jacobsen•450
    @AlyferJT

    Hi there, nice job! Just a little tip about the flexbox, you don't really need to set a justify-content or align-items everytime you use display: flex; on a container. The main goal of the flexbox is that you have the control of the elements inside your container, so you make then to behave the way you need.

    Well, in my view, this would be something i would do in that specific project.

    I would change the HTML to:

    <div class="container">
      <img src="images/image-qr-code.png" alt="image of a qr code">
      <div class="container-info"> 
            <h1>Improve your front-end skills by building projects</h1>
            <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
      </div>
</div>

    Using a <div> around <h1> and <p>, you would have a better control of the element.

    So you would have 2 elements inside the .container

    So in the CSS you have this:

    display:flex;
flex-direction: column;
justify-content: center;
align-items: center;

    that's not wrong in all cases, but in that one, you could do this:

    display:flex;
flex-direction: column;
justify-content: space-between; /* i think this would be better */
gap: 2rem; /* or whatever value you want */

padding: 1rem; /* i think that a fixed value would show a better look, but depends*/

    The gap is a space between the elements inside the flexbox

    So doing all that would remove the weird blank spaces around it, and bring it a nice look. I recommend you to search a fun minigame that calls Flexbox Froggy on google, this somehow teachs you the logic behind the flexbox. Overall, i think tha's it, if you didn't understand something, feel free to ask :D

    Marked as helpful
  • wviie•160
    @wviie
    What specific areas of your project would you like help with?

    Any feedback is welcome!

    Age calculator app

    1
    Alyfer Jacobsen•450
    @AlyferJT

    Hi there, i saw that you're using a right: 0; on your .button class, this is breaking your styling on Mobile screens

  • ItachiCodes•160
    @itachidevs
    What are you most proud of, and what would you do differently next time? Iam proud of this HTML code 
     
    
      
        
      
      
        
          Improve your front-end skills by building projects
        
          
            Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
    What challenges did you encounter, and how did you overcome them?

    Durinng the project completion I have encountered a problem with the layout of the page. I tried to revise the topic of CSS flexbox to overcome this problem.

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

    Is it can be developed in the area of the background container?

    QR Scan Page using HTML and CSS

    2
    Alyfer Jacobsen•450
    @AlyferJT

    Hi there!! Well, that problem of yours is not something that is related to Flexbox. Before all, congratulations, you did a great job on centering and organizing the boxes in the project...

    You can use the body in your advantage! In that project, when you don't need to roll down to see other things on the screen, you can set the body as your unique background.

    For example:

    body {
    width: 100%;
    height: 100vh;
}

    The width: 100% will let the body fix at the 100% of the page width, as it is it's only parent And the heigth: 100vh will let the body fix at the 100% of the View Heigth (vh)

    And another thing that i saw, it's the white borders on you project, you can fix that by setting the default CSS to another value

    Every navigator has an default CSS value, so you need to change that on your on CSS files

    you can do that by using this, at the very top of your CSS:

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

    to understand what is margin, padding and box-sizing, you'll need to search about the box-model

    Well, i hope that you get that as an information for looking for the answers, this is just to you to know that this exists, and you have to understand that to improve your designs.

    Marked as helpful
  • Alyfer Jacobsen•450
    @AlyferJT

    Hey there, congratulations for completing the challenge.

    I saw that you used % on the width of the 'Learning', % gets it's parents size and grab it's %.

    So if the parent size reduces, it reduces too.

    I'm not so expert on that, but i know that this is causing your problem, and i recommend you to search about the size units css, so you can understand why.

    I recommend you to use rem, and set a width you would like in the 'Learning'.

    Sorry for my bad english '-.-

    Marked as helpful
  • Alyfer Jacobsen•450
    @AlyferJT

    Hi there, what a creativity on doing it, great job. You just forgot the after rating part, if you have any doubt about, how to do that, just say. :D

View more comments