@ibrahim-b-devSubmitted 3 months ago
Latest solutions
- Submitted 3 months ago
Used rem and em for relative consistency(I think its for relative con)
- HTML
- CSS
Tips on how to save time in general. Maybe how I can catch stupid errors faster. Also some tips on how I can improve my code would be nice :)
- Submitted 3 months ago
Used flexbox
- HTML
- CSS
Learning how elements change based on screen size and mobile or not. For example, how does the padding and margin of elements change when the screen sizes change and what is the best way to write css so that it can fit the screen?
Latest comments
- @JosephArifinPosted 3 months ago
Hello! Great job completing the challenge!
The way you structured your code (something I have to improve on myself) was great! Very organized and clean. However, I do have a few suggestions on how to improve your code.
1. The size of the card and some off the elements isn't quite right.
Thankfully this is an easy problem to fix. Let me tell you how to get (almost) pixel perfection using the figma file. First, obviously download the figma file. Then on the left hand panel click on the file close to the top of the panel and after that under pages there is a "Designs" page. Once you have nav to there, you can select and measure how close or how far apart elements are by selecting the element and pressing "Alt" on your keyboard and moving your mouse. Now you can see distances and width and height of elements when you select them.
2. The formatting isn't quite right
Some of the text does not have the right formatting. For example, the title doesn't have the right font-weight. The right font weight should be 800.
font-weight: 800;3. Using rem and em units combined with pixels for maximum accessibility
Using only pixels is a perfectly valid solution, but it is considered better practice to integrate rem and em units for better responsiveness across all screen sizes. Here is a great article describing rem, em, and px units.
4. The "Learning" tag is a bit off
The tag is not the right width and height and it is not centered. If you look on figma, the width and height are 82 and 29 respectively. To center the text, you can use the
line-heightproperty. Setting this to the same as the height would make it centered.height: 29px; line-height: 29px;Great job completing the challenge once again!
Marked as helpful0 - @carolsoutinhoSubmitted 3 months ago@JosephArifinPosted 3 months ago
Hello! Good job on completing the challenge!
The only difference I see between yours and the design is the text below the card and the card being slightly higher which I assume you did on purpose which is fine. The only thing I can comment on is the internal css. It is generally good practice to have a external stylesheet, but your internal css is a perfectly valid solution!
Great job once again!
Marked as helpful1
