Skip to content
OverviewSolutions
34
Comments
41
Bernardus
@BernardusPH

All comments

  • Alexis Quizhpe•30
    @ArekshissSubmitted over 1 year ago

    I tried my best but I did not know how to define @media to make it responsive. I tried to use min-width and max-width but I was not sure how to do it.

    Thank you for the opportunity.

    Designing QR Component with HTML and CSS

    3
    Bernardus•1,095
    @BernardusPHPosted over 1 year ago

    Hey ALEXIS DAVID QUIZHPE MENDOZA.

    I see that you are hard coding the width of the card to 280px so even if you use min-width or max-width it would do nothing since your card will stay at 280px. You could leave it at 280px which is fine but if the screen gets smaller you can add something like this:

    @media(max-width:400px)///you can tweak this
.card{
width:80%;
max-width:400px;
min-width:300px;
}

    This is just an example but this will change the width of the card to 80% of the parent container but it will not get bigger than 400px and not get smaller than 300px at 400px screen size or less

    I would recommend using clamp here. clamp can be used when want a min-max setting but want to work in between the min and max. Sorry for the terrible explanation but here is an example: width:clamp(500px,80%,700px) Here the item will be 80% the parent's width but it cant be greater than 700px or smaller than 500px this helps when resizing the screen.

    Please don't use a div as a landmark without reason(like a framework). What I mean is, the DIRECT children of the body. There are a few landmarks like

    • nav
    • main
    • footer
    • aside etc.

    For your project I would just replace the direct children of the body into main since you just have a card. The reason for this is for the developers so we don't get easily lost in the code and also screen readers use the landmarks.

    I see that you did not add a box-sizing:border-box; to your * like:

    *{
box-sizing:border-box; 
}

    This makes working with margin and padding easier as they wont increase the width of your containers easily.

    Also I dont see a min-height:100dvh/vh on the body use min-height:100vh and min-height:100dvh the min-height makes your body's height as big as the screen but it can then increase based on the content. The dvh is for more responsiveness but put the vh before this as some browsers cant read dvh. And you dont have to put that margin-top on the card then because the height of the body will align the card in the center now with the help of the flex code you have.

    body{
min-height:100vh;
min-height:100dvh;
}

    Hope this helped.

    1
  • uzainmalik123•150
    @uzainmalik123Submitted over 1 year ago

    The hardest thing in this project was probably the width and height of the card other thing were very easy. I am unsure of the width and height of the card.

    Media querrys and flex box

    1
    Bernardus•1,095
    @BernardusPHPosted over 1 year ago

    Hey UZAINMALIK123

    For the height and width I would recommend mostly playing with the width more than the height since the content in the card will sort out the height mostly. I see that you can remove the height of the card and just by adding a padding-top and padding-bottom of 1rem fixed the height problem(you can tweak this). Its generally a bad idea to mess with height except if you have a specific goal in mind.

    If you really want to play with width and height a lot then I recommend using clamp. clamp can be used when want a min-max setting but want to work in between the min and max. Sorry for the terrible explanation but here is an example: width:clamp(500px,80%,700px) Here the item will be 80% the parent's width but it cant be greater than 700px or smaller than 500px this helps when resizing the screen.

    Also Don't use height:100dvh on the body rather use min-height:100vh and min-height:100dvh the min-height makes your body's height as big as the screen but it can then increase based on the content. But put the vh before this as some browsers cant read dvh.

    body{
min-height:100vh;
min-height:100dvh;
}

    I see that you did not add a box-sizing:border-box; to your * like:

    *{
box-sizing:border-box; 
}

    This makes working with margin and padding easier as they wont increase the width of your containers easily.

    Lastly please don't use a div as a landmark without reason(like a framework). What I mean is, the DIRECT children of the body. There are a few landmarks like

    • nav
    • main
    • footer
    • aside etc. For your project I would just replace the direct children of the body into main since you just have a card. The reason for this is for the developers so we don't get easily lost in the code and also screen readers use the landmarks.

    Hope this helped.

    Marked as helpful
    1
  • mattforrester39•10
    @mattforrester39Submitted over 1 year ago

    What did you find difficult while building the project?

    Hi guys, this is my first project on Frontend Mentor! I've stopped and started a few Udemy classes and decided to jump into developing projects instead - I soon realised that I was attempting to memorise everything and nothing was sticking. The same applies to the limited amount of Javascript I learnt.

    • I actually found uploading the project to GitHub quite difficult initially, so if anyone has tips on that it would be great!

    • I wasn't entirely sure how to best make the design responsive

    • I also attempted to create a light and dark mode but realised I was out of my depth haha. If anyone has any tips for this I would be great!

    • Also, I would appreciate it if you have any tips for the HTML semantics! Thank you for all of your help. Much love ❤️

    First project! QR-CARD ❤️

    3
    Bernardus•1,095
    @BernardusPHPosted over 1 year ago

    Hello MATTFORRESTER39.

    For design responsive I see that your <div id="qr-code-container"> is set to 18 rem so that is breaking your card when you resize because the card might get smaller but not the image itself because it is set at 100% width. But since it reached the min of 375 px screen size and is fine then nothing is wrong but I would rather put the <div id="qr-code-container"> at 100% width width a bit of padding on the parent.

    Don't use height:100vh on the body rather use min-height:100vh and min-height:100dvh the min-height makes your body's height as big as the screen but it can then increase based on the content. The dvh is for more responsiveness but put the vh before this as some browsers cant read dvh.

    body{
min-height:100vh;
min-height:100dvh;
}

    The dark theme was a nice touch I like it.

    Yes github was quite difficult starting out. I would recommend just manually putting the files in the github repo and then launching it from pages. If you get used to it then I would highly recommend learning Git as it can make editing and storing your projects on github much easier.

    Hope this helped.

    0
  • Felipe Alves Leão de Araújo•10
    @FelipeAlvesLeaoSubmitted over 1 year ago

    First time using media queries to create a mobile view and I found the results to be unsatisfying and not that close to the required design, but at some point I couldn't change the classes' width further to configure my webpage. Would really like to see suggestions on how to make my media query code better.

    QR code component

    3
    Bernardus•1,095
    @BernardusPHPosted over 1 year ago

    Hello FELIPE ALVES LEÃO DE ARAÚJO

    For this problem:

    I see that you are setting a max-width:300px on the the card and then when the screen gets smaller you try to make it bigger which it cant, well usually it cant but with css I am suprised this didnt work. Anyway you cant go over 300px and you are trying to set it to 400px. I suggest using clamp here as you can set it in the card in the normal view and once your screen geta smaller you can add another clamp. Please look it up futher as it is a great tool.

    This should help with your media problem, if not then just ask.

    I have a few suggestions for you that might help other than the media.

    First please dont use divs as landmarks if you are not using a framework/library like react. What I mean is the direct children of the body.

    Landmarks include:

    • nav
    • main
    • footer
    • etc

    Lanmarks are used by screenreaders and landmarks make it easy for us to read the code so change the card div to a main.

    Add this to your code and it would make life easier:

    *{
////makes it so padding and margin wont increase the container's size////

box-sizing:border-box; 

}

body{
///adds a perfect height to body(the height starts at the height of the screensize.////
min-height:100vh;

////puts the card in the middle////
display:flex;
justify-content:center;
align-items:center:center;


}

    Hope this helps.

    Marked as helpful
    1
  • Matheus Chrispim Pelegrin•30
    @MatheusChrispimSubmitted over 1 year ago

    What I would most like to check is if there is something simpler with just HTML and css to be able to work with different images in responsive mode, in this case I used a div and the backgroud-image property, but I didn't find any better method just with HTML and css.

    Product Card Review

    1
    Bernardus•1,095
    @BernardusPHPosted over 1 year ago

    Hello MATHEUS CHRISPIM PELEGRIN

    Well we are mostly stuck with html and css but there are frameworks/libraries to help out like tailwind and sass/scss. Is there a problem with the background image size, if so then I would recommend using clamp for resizing.

    clamp can be used when want a min-max setting but want to work in between the min and max. Sorry for the terrible explanation but here is an example: width:clamp(500px,80%,700px) Here the item will be 80% the parent's width but it cant be greater than 700px or smaller than 500px this helps when resizing the screen.

    Hope this helped. If you have more problems then don't hesitate to ask.

    Marked as helpful
    0
  • Bernardus•1,095
    @BernardusPHPosted over 1 year ago

    Hey JOSEPH CASTELLI

    Great project. I would like to add a suggestion

    Please don't use a div as a landmark without reason(like a framework). What I mean is, the DIRECT children of the body. There are a few landmarks like

    • nav
    • main
    • footer
    • aside etc.

    For your project I would just replace the direct children of the body into main and footer respectfully. The reason for this is for the developers so we don't get easily lost in the code and also screen readers use the landmarks. The footer is for the link that you can place at the bottom

    Hope this helped

    Marked as helpful
    1
  • thiCha•10
    @thicha0Submitted over 1 year ago

    I always end up tweaking pixels during frontend development, is it a good thing ? Should I use percentages sometimes ? Is there a rule about border-radius for example ? Here I have 20px for the container card and 15px for the image inside. I try different combinations of pixels and I leave the ones that "feel" to fit.

    QR Code component using HTML and CSS

    3
    Bernardus•1,095
    @BernardusPHPosted over 1 year ago

    Hey THICHA

    There is nothing wrong with tweaking the px some people are just that meticulous. People just use rem/em, % or even vh and vw to play with some measurements. It comes down to the person. I do see the use of % in resizing the site so parts can fit in parents better or just as a max-width/min-width

    For the border-radius there is no problem if its close to the design then its alright. If you go even further than this then you bordering on OCD territory which can be a time waster since the project is already almost perfect to the design.

    If you have the sketch/fig files then the measurements can just be copied from and used but working from just a photo will require you guessing a lot and not getting a perfect replica but if its close enough then thats alright.

    If you struggle with width/height try using clamp, I highly recommend it.

    Tips for the site:

    Don't use height:100vh on the body rather use min-height:100vh and min-height:100dvh the min-height makes your body's height as big as the screen but it can then increase based on the content. The dvh is for more responsiveness but put the vh before this as some browsers cant read dvh.

    body{
min-height:100vh;
min-height:100dvh;
}

    I see however that you did not add a box-sizing:border-box; to your * like:

    *{
box-sizing:border-box; 
}

    This makes working with margin and padding easier as they wont increase the width/height of your containers easily.

    Please don't use a div as a landmark without reason(like a framework). What I mean is, the DIRECT children of the body. There are a few landmarks like

    • nav
    • main
    • footer
    • aside etc.

    For your project I would just replace the direct children of the body into main and footer respectfully. The reason for this is for the developers so we don't get easily lost in the code and also screen readers use the landmarks.

    Hope this helped.

    Marked as helpful
    3
  • thankuxari•110
    @thankuxariSubmitted over 1 year ago

    -What are some ways that i can improve my existing project so its more understandable and better written?

    -What are some good html/css practices to improve on my html/css skills that other programmers use?

    Result summary component Beginner

    1
    Bernardus•1,095
    @BernardusPHPosted over 1 year ago

    Hey THANKUXARI

    I see that you have a wrapper class on the div inside your main and using it as the entire summary card container and also playing with the height and width incorrectly here.

    I would rather make the main my container and use 2 sections for left/top and right/bottom of the summary card.

    For the height and width part, first I would use the body and add a min-height:100vh so that we have a height on the body. Also it can be better to use the flex on the body and then just use flex-direction:column so that the main and footer are vertical aligned from eachother.

    Then the important part is to use a clamp which is amazing when using it for resizing on smaller screens. I will use it on the width of the main(which is now the summary card here) to size the card however I want because I see that resizing the site breaks the summary card a little.

    clamp can be used when want a min-max setting but want to work in between the min and max. Sorry for the terrible explanation but here is an example: width:clamp(500px,80%,700px) Here the item will be 80% the parent's width but it cant be greater than 700px or smaller than 500px this helps when resizing the screen.

    Hope this helps. Ask if I need to explain better.

    Marked as helpful
    2
  • Bernardus•1,095
    @BernardusPHPosted over 1 year ago

    Hey JAPOCO00

    There are a few ways to center a div, the best and easiest way(in my opinion) is to have a container that has a width and height and then set the container's display to flex and then add a justify-content:center; and an align-items:center like you did. But display:grid and then place-items:center can also work but not as well as the flex one.

    I see however that you did not add a box-sizing:border-box; to your * like:

    *{
box-sizing:border-box; 
}

    This makes working with margin and padding easier as they wont increase the width/height of your containers easily.

    Also dont use height:100vh on the body rather use min-height:100vh and min-height:100dvh the min-height makes your body's height as big as the screen but it can then increase based on the content. The dvh is for more responsiveness but put the vh before this as some browsers cant read dvh.

    body{
min-height:100vh;
min-height:100dvh;
}

    Please don't use a div as a landmark without reason(like a framework). What I mean is, the DIRECT children of the body. There are a few landmarks like

    • nav
    • main
    • footer
    • aside etc.

    For your project I would just replace the direct children of the body into main and footer respectfully. The reason for this is for the developers so we don't get easily lost in the code and also screen readers use the landmarks.

    so your code should be something like this:

    <body>

  <main>
         <img>
          <div>
              <h1>title</h1>
              <p>Text</p>
          <div>
  </main>

  <footer>
       <p>footer</p>
  </footer>
</body>

    Hope this helped

    Marked as helpful
    2
  • kakuhd•60
    @kakuhdSubmitted over 1 year ago
    • should I in general set height and width of container elements or rather style the insides with margin, padding, gap arguments and let the browser calculate the width and height?
    • feedback is greatly appreciated!

    Results Summary Component

    1
    Bernardus•1,095
    @BernardusPHPosted over 1 year ago

    Hey KAKUHD

    I know you might hear this a lot and I'm sorry but it really depends on the item you are working on and what effect you want it to have to its children, sibling or its parents. The height part can be left to the browser to sort out mostly, except for specific scenarios because messing with height can be a headache

    For example, responsiveness is my main reason for playing with width and height. Screen size can mess up your day so I play with clamp, which I highly recommend using as it can make things like responsive sizing easier especially when using on width.

    And there are other reasons like trying to fit things in a parent container or making things the same width or height then its understandable to play with width and height.

    Margin and padding can help with movement and sizing but its sometimes unpredictable for example on inputs, padding just creates an annoying invisible wall that the words hide behind sometimes.

    I would just recommend winging it and see what works for you.

    Also here is a tip for your project:

    Please don't use a div as a landmark without reason(like a framework). What I mean is, the DIRECT children of the body. There are a few landmarks like

    • nav
    • main
    • footer
    • aside etc.

    For your project I would just replace the direct children of the body into main and footer respectfully. The reason for this is for the developers so we don't get easily lost in the code and also screen readers use the landmarks.

    Marked as helpful
    0
  • Bernardus•1,095
    @BernardusPHPosted over 1 year ago

    Hey UNL00KY

    Great job on the project

    I highly recommend learning JS as it can increase your control of css and html and also open a path of learning frameworks and other programming languages as JS is a great start bc its not too hard and not too easy.

    I started with JS at the freecodecamp website tutorial with the help of their youtube vid of the tutorial. After that I would just play around with codewars or frontendmentor for practice. Here is a great youtube vid to start

    Marked as helpful
    1
  • FunkyCreep•130
    @francoisbilletSubmitted over 1 year ago

    Any feedback is welcome ! For text like "Annual Plan", "$59.99/year", "Change" or "Cancel Order", should they be paragraphs or spans ? I'm wondering about accessibility best practices.

    Responsive Order summary component

    2
    Bernardus•1,095
    @BernardusPHPosted over 1 year ago

    hello FUNKYCREEP

    For the ( "Annual Plan", "$59.99/year", "Change" or "Cancel Order",) part I believe a div for the container and then as children an img for the music image then another div as a container for the "Annual Plan", "$59.99/year" part.

    The Annual Plan can be a lower header(h2,h3,h4 etc.) and the "$59.99/year" can be a "span". The Cancel Order should an a since its a link but if you have trouble with responsiveness then wrap the anchor in a div of its own.

    I believe this should be right but if anybody has any better idea then I will listen.

    Hope this helped.

    Marked as helpful
    0