Hello,
I have completed yet another project using CSS Flexbox properties. While building this project, I set a fixed height for each of the flex items what is the practice of setting height and width for flex items?
Any suggestion on how to improve this or my code will be appreciated. Thank you.
Hi Paul,
Flexbox generally focuses much more on the positioning of its items rather than the sizing of its items. Giving size to flex items generally works the same way as giving size to most other elements.
I think the cards' children elements overflow downwards off the card itself when the browser's viewport is between 481px and 800px is because each card is set to a fixed width rather than auto (initial value when you don't set the width or height). The card is to remain at that fixed height, but because the width of the card can't fit all their children, the children elements are squeezed and pushed downwards, even running off the card in this case. Also, by setting the max-width of the card instead of the width, the width is initialized to auto. The browser tries to fit all the card's within the viewport's width, even if it means decreasing the width of the cards and squeezing its children downwards.
Also, when you use media queries to change from flex: row; to flex: column;, you gave max-width in em. I don't see a good reason for this and I think it would've been much less confusing to read, both for you and others, if you used px, since most browsers display the viewport size in px.
Would be Happy for any Feedback What can i do better ?
I like the attention to detail on the colors and typography. Here are some improvements you can consider:
The QR code <img> should have alt text that describes what the image shows. Maybe something like "QR code" or "QR code to Frontend Mentor website".
Also, notice the border radius of <img> shown in the design. It's actually smaller than the border radius for the card itself as opposed to being the same border radius size.
Hi I’m Brijeshkumar and this is my solution for this challenge.
Any suggestions on how I can improve and reduce unnecessary code are welcome!
Thank you. 😊
Before I answer your question, I want to point out that the hover states that was in the implementation are not quite correct. According to what's displayed in /design/active-states.jpg, the button should have a white border and text against a background with its card theme color.
There's not really much I can suggest to reduce code duplication.
You could try to use JS to extract the card creation semantics & styling into a function, then call that function 3 times, each time passing in different background colors and text content. However, that tends be more difficult to organize in vanilla JS since it takes an imperative approach (how to make these elements, style them, and assemble them together?) as opposed to the declarative approach HTML5 provides (what elements should I use under this existing element, and what CSS styling should I give it?). You could instead use a JS frontend framework/library like React, Angular or Vue, that harness the power of JS while keeping the declarative approach to building UIs. Though that may be overkill for a project of this small magnitude.
One thing you can do is to use CSS variables in your stylesheet. For example, you can declare the variables to store color values in the root and give it names:
:root {
--bright-orange: hsl(31, 77%, 52%);
--dark-cyan: hsl(184, 100%, 22%);
--very-dark-cyan: hsl(179, 100%, 13%);
--transparent-white: hsla(0, 0%, 100%, 0.75);
--very-light-gray: hsl(0, 0%, 95%);
}
...
And then you can use them throughout your stylesheet:
...
body{
...
background-color: var(--transparent-white);
}
...
main h1{
...
color: var(--very-light-gray);
...
}
...
main p{
...
color: var(--transparent-white);
...
}
...
.sedan{
background-color: var(--bright-orange);
}
.sedan button{
color: var(--bright-orange);
}
.suv{
background-color: var(--dark-cyan);
}
.suv button{
color: var(--dark-cyan);
}
.luxury{
background-color: var(--very-dark-cyan);
}
.luxury button{
color: var(--very-dark-cyan);
}
...
The benefit is that if any color value needs to be changed with the intention of changing all instances it's used at to correspond with the style guide, all the color values will be kept in one place, making it easier to find and to correct all its instances. This isn't just exclusive to CSS color values. CSS variables can also store CSS size measurements.
Check your CSS color values again. The style guide states that grayish blue is hsl(220, 15%, 55%), but you have:
body { ... color: hsl(218, 44%, 55%); }
So it would have seemed that you used the saturation for dark blue in the place of the saturation for grayish blue. You've also used the lightness for grayish blue in the place of the lightness for dark blue.
To improve your odds of avoiding these types of mix-ups, it helps to use CSS variables to assign names to values. This keeps those styles in one place and gives that color a connection to the style guide. For example, you could have:
:root {
--white: hsl(0, 0%, 100%);
--light-gray: hsl(212, 45%, 89%);
--grayish-blue: hsl(220, 15%, 55%);
--dark-blue: hsl(218, 44%, 22%);
}
And then you could use the variables throughout your CSS:
body { ... color: var(--dark-blue); } main { background-color: var(--light-gray); ... } ... .modal { background-color: var(--white); } ... .subtitle { ... color: var(--dark-blue); // Not hsl(255, 100%, 0%) ... } ... @media only screen and (min-width: 500px) { main { background-color: var(--light-gray); ... } ... }
This reduces code duplication, makes your code more readable, and keeps the values that need to change for a single reason together. If any of your colors don't look correct for any reason, you could always look at the variable name used, then go to :root to see what color value it was assigned. All your color values are kept in one place (being :root) and you can fix all instances of the same bug wherever the color is used.
For your text not being in the correct font family, double-check to make sure that you copied the all the proper HTML tags from Google Fonts to your index.html. There are usually 3 different <link> tags for you to copy, not just 1.
Also, there's no styles provided for the .description class. Check to make sure you have them in your CSS files on your device. And if you already do, then it's likely that you didn't commit them to git properly, or it didn't get pushed properly to GitHub.
Great job on developing a QR code component in HTML5, CSS3, and JavaScript! Here are some questions for feedback:
I liked the sizing of the component, image and texts. I'd also like to give a few suggestions for what you can do in the future:
alt attribute of <img> represents alternative text that is displayed in place of the image when the browser cannot display that image for some reason/error. A better and more descriptive alt text for the <img> would be alt="QR code to visit Frontend Mentor"rem measurements instead of px measurements for sizing. rem calculates its measurement off the font size of the root element (which is html). The font size of the root element is dictated by the browser and can be changed by the user. While the default is 16px on most browsers, users can choose to make it larger, possibly because most text would be too small to read. By sticking with px measurements, you remove that capability from the user, as the text won't scale larger when the user chooses larger font sizes. Instead the text will remain the same size.
html font size using px to change how the root font size appears. That also removes that feature from the user as well. If you want the root font size of your page to appear at a different size:
%13px / 16px = 0.8125 = 81.25%html { font-size: 81.25%; }