alfiandwi93• 410
@alfiandwi93
Submitted
I found a file with json format in this file, does anyone know what the function of that file is for?
orphandeity
@orphandeity
All comments
- orphandeity• 530
@orphandeity
Posted
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
@vanesuarez
Submitted
- What is the best practise to make a website responsive?
- How do you make the calculations for relative sizes to make it responsive?
orphandeity• 530@orphandeity
Posted
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
@CamronWithrow
Submitted
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?
orphandeity• 530@orphandeity
Posted
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 - I treated the individual notifications as
@Olebxgeng
Submitted
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 :).
orphandeity• 530@orphandeity
Posted
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
@alihaydar28
Submitted
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
orphandeity• 530@orphandeity
Posted
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.
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
@CITRG
Submitted
When should you use em over rem? Are there any better practices that I could incorporate into my CSS?
orphandeity• 530@orphandeity
Posted
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 - DivyanshiDetroja• 10
@DivyanshiDetroja
Submitted
Need help centering div vertically
orphandeity• 530@orphandeity
Posted
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
