Skip to content
OverviewSolutions
21
Comments
7
orphandeity
@orphandeity

All comments

  • orphandeity•530
    @orphandeityPosted about 1 year ago

    The JSON file is included for people using javascript to build the project. When using javascript libraries, like React, you can use the JSON file to populate the page with content. You would create a loop to generate a list of cards from the data in the JSON file. In the real world, this would allow you to dynamically generate stuff like this instead of manually writing HTML for every new testimonial card you needed.

    0
  • Vanesa Suarez•10
    @vanesuarezSubmitted about 1 year ago
    • What is the best practise to make a website responsive?
    • How do you make the calculations for relative sizes to make it responsive?

    QR Code responsive website

    5
    orphandeity•530
    @orphandeityPosted about 1 year ago

    Great job on this challenge!

    If you want to make your sizes responsive, you could use viewport units (vh and vw). These act like percentages and you use them in a similar way. For example:

    .container {
    height: 50vh;
    width: 50vw;
}

    Another way to accomplish responsive design is with media queries. With media queries you can make different rules for different screen sizes. This article explains the concept much better than I could ever hope to.

    I hope this helps... keep up the awesome work and keep asking questions!

    Marked as helpful
    0
  • CamronWithrow•120
    @CamronWithrowSubmitted over 1 year ago

    I spent quite a bit of time thinking about semantic HTML for this project. I have a couple of questions regarding best practices:

    • I treated the individual notifications as <li> in an <ol>. For this project, this just leads to a more nested HTML structure, but was it still "correct" to do this, or should I have just treated the notifications as individual <section>'s?
    • I couldn't figure out a nice tag for the private message. I eventually went with <p tabindex="0"> so that it was still focus-able. Was there a better choice for this element?

    Responsive and accessible notification page using flexbox

    1
    orphandeity•530
    @orphandeityPosted over 1 year ago

    I think you're on the right track here with the list and list item elements. I suggest using <article> instead of <section> for the individual notifications and maybe contain them all in a single <section> element.

      <section>
    <article></article>
    <article></article>
  </section>

    You could also wrap the <article> in a <li> like so...

    <ol>
  <li>
    <article></article>
  </li>
  <li>
    <article></article>
  </li>
</ol>

    Because the private message is a type of notification and not an input field, I don't think it needs to be focusable. Usually, you would only want the interactive elements to receive focus... like the 'mark all as read' button.

    Marked as helpful
    0
  • Olebogeng Sebogodi•80
    @OlebxgengSubmitted over 1 year ago

    I struggled to space the image & details 50/50 on a bigger screen. Struggled with centering my main on the page but figured it out (Would really like to know a better way to do it). How to center my main on the mobile device to get rid of the horizontal scrolling. Any advice on how to better my code, thanks.

    Appreciate the feedback & help :).

    HTML CSS

    3
    orphandeity•530
    @orphandeityPosted over 1 year ago

    you can center your content by giving the containing element (the body in your case) a height and some flex-box properties like so...

    body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

    you could use grid instead like this...

    body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

    to space the content within main evenly you can also take advantage of flex-box...

    main: {
    display: flex;
}

.img, .details {
    flex: 1;
}
    Marked as helpful
    0
  • alihaydar28•30
    @alihaydar28Submitted over 1 year ago

    I found putting some spacing between text and card a bit challenging so I hope anyone can help. also any feedback would be great since i'm still a beginner

    QR code using flexbox in CSS

    3
    orphandeity•530
    @orphandeityPosted over 1 year ago

    Wow, your project looks great!

    Looking at your code, I think you would benefit a lot from using responsive units like em and rem. These units are based on the font-size and will help keep things consistent and prevent you from having to think with pixel-perfect precision. They are used in place of px and are great to use for margin, padding & font-size. When you are first learning about these units, I would start with and focus on rem and then use em when you need more control.

    Instead of trying to explain how this works myself, I will point you towards an article that I think explains it pretty well.

    There are also responsive units that are based on the window size... these are vh and vw. To illustrate, 100vh is equal to the entire height of the window and would effectively make the element fullscreen. 50vh would make the element take up half the window and vw does the same thing for width.

    Here is a really good article on the subject of viewport units.

    Marked as helpful
    1
  • Charlie Hun•30
    @CITRGSubmitted over 1 year ago

    When should you use em over rem? Are there any better practices that I could incorporate into my CSS?

    QR Code with CSS Grid

    2
    orphandeity•530
    @orphandeityPosted over 1 year ago

    I would suggest using 'rem' units for most things, since the sizing is based on the root font-size and it will give consistent & predictable results.

    However, in certain situations, it could be helpful to have the sizing based on the font-size of a particular element. For instance - if you have set the font-size on a button to something other than 1rem, using 'em' units to set the border-radius will give you better control.

    I hope that made sense... if not, or if you want more color, here's a good article

    Marked as helpful
    0
  • orphandeity•530
    @orphandeityPosted over 1 year ago

    flexbox is the easiest way to quickly center content. a quick google search will fill you in on the details, but what you want to do is put the following CSS rules on your parent container - probably the body element in this scenario, but whichever element is parent to the element you want centered.

    .container {
  height:          100vh;    // this sets height to the screen height
  display:         flex;
  align-items:     center;   // center content vertically
  justify-content: center;   // center content horizontally
}
    Marked as helpful
    1