Lukas• 50
@Lolex3366
Submitted
Jordan Martin
@JordanMartinWebDev
All comments
- Jordan Martin• 190
@JordanMartinWebDev
Posted
Hey Lukas,
There are a few things I noticed about your design.
First, for some reason "Great" is no longer capitalized. Small fix I know...but it's the first thing I noticed.
Next, there is no spacing between the word "Summary" and the results section. I suggest adding a bit of margin-bottom. 15px or so should do it.
Next, the words in the right results pane aren't against the icons. Some weird spacing is happening there. The way I did this in my project was by adding the <img> inside of the <p> so they stayed together.
Lastly, you're missing the bold on the results pane for the actual scores. The 80s should be bolded.
Marked as helpful
1 - gireisalim• 40
@gireisalim
Submitted
Jordan Martin• 190@JordanMartinWebDev
Posted
Hey gireisalim, Looks like you did a bit of a palette swap with your design. Looks good in my opinion except on the right side in the original design the score received was bold. I like that aspect of the original design a lot. I think it adds more clarity to the image. Just my opinion though.
0 - amine• 90
@amine-boukhris
Submitted
Jordan Martin• 190@JordanMartinWebDev
Posted
Hey amine,
2 things I noticed when looking at your design.
First, the alignment of "Summary" and "Your Results." In the original design they were lined up horizontally. In your design, there is a clear drop in the height of the word Summary on the right side.
Second, the right side results area you didn't use the colors provided in the ReadMe for the background. This may have been an aesthetic choice on your part, I don't know. But if you set the background colors to the same as the text colors, then lower the opacity, you'll get the same effect as what's in the design.
0 - AryanSoni4119• 40
@AryanSoni4119
Submitted
Jordan Martin• 190@JordanMartinWebDev
Posted
Hey Aryan,
So it looks like the area on the right where your results are, you're missing the background colors. They were provided in the ReadMe...however you do have to change the opacity of them to make this look correct.
Also, I see you're missing the gradients for the left side of the card. You do a gradient in CSS like this "background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%));" that's one from this project (for the button hover and the main gradient of the left pane), however there is another in the project I'll leave you to figure out which goes on the circle that is behind the overall result.
0 - joshua carter• 240
@taylor003
Submitted
the challenge was great and i got to practice more on CSS. the mobile view part mostly give me issues but I managed to code that part in this project. any kind of corrections are welcome...
Jordan Martin• 190@JordanMartinWebDev
Posted
Hey joshua, So it looks like the area where your results are, the padding is all off. Looks like it's doing a stair step rather than being in line with consistent padding for all the results. Also, I see you're missing the gradients for the left side of the card. You do a gradient in CSS like this "background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%));" that's one from this project (for the button hover and the main gradient of the left pane), however there is another in the project I'll leave you to figure out which goes on the circle that is behind the overall result.
Marked as helpful
0 - Abel López Pérez• 80
@Grancan91
Submitted
Jordan Martin• 190@JordanMartinWebDev
Posted
Looks like you're missing the font that was provided. Did you have issues getting it working or anything? Or is that for a v2?
0 - perterHUAN• 250
@perterHUAN
Submitted
Jordan Martin• 190@JordanMartinWebDev
Posted
The bottom text has a color that is mentioned in the file download. Looks like you missed that. Also, the bottom text doesn't quite look like the example in your solution. In mine I used the width css attribute to make both the <h2> and <p> slight smaller than the QR code image. That kept the card text from looking so boxy and fixed the text alignment to meet the example.
0 - Anita Ikponmwosa• 20
@Hanitah
Submitted
Jordan Martin• 190@JordanMartinWebDev
Posted
I think you got the card down pretty well, but you could move the attribution information at the bottom outside of the card since it wasn't a part of the challenge itself. Just take it out of your card div and put it right above your </body> tag. The original html doc included some CSS in it for the attribution section, so you should just have to move the html, assuming you didn't delete it.
Marked as helpful
1 - Ferrari• 130
@pferrarip
Submitted
Jordan Martin• 190@JordanMartinWebDev
Posted
Your solution looks to be stretched...you have too much padding or margin at the bottom of the card, and the QR code image looks taller for some reason? Did you add a width css selector? That's what I used and it doesn't have this weird stretching I'm seeing on this solution.
0 - Sheharyar Abid• 10
@sheharyarabid
Submitted
It was not diffuclt at first had basic problems i encountered like vertical alignment of flexbox divs. I am not sure about margins although tried my best. So far enjoyed this one! TIA.
Jordan Martin• 190@JordanMartinWebDev
Posted
The spacing is a little weird on your bottom text. Try adding inside of your card, the bottom text needs some margin/padding-bottom. Also, the text for both the header and <p> text should be slightly smaller than the QR Code Image size. Try adding a css width to that section and make it slightly smaller than the width of the image above. I think I did like 10px smaller and it looks good.
0 - Steve Mogan Odumbe• 270
@StevetheRebel
Submitted
Read somewhere that it's best practice to be designing first for mobile then making sure that it's responsive to other device screens. Is this true and how would one go about doing it? This is because I still have a bit of a problem with the @media and screen and the like.
Jordan Martin• 190@JordanMartinWebDev
Posted
In general, yes. There are a couple of reasons for this. First, mobile development has the most constraints for viewing due to the limited space. Second, mobile UI/UX tends to be more streamlined. By focusing on it first, you also have determined what information is crucial and what information is useful, but not 100% necessary. There are other reasons as well, but in general...mobile is a massive market, so making sure things work there first is extremely important.
Now...to give a bit of the inverse perspective from working in the industry. Some applications have literally NO mobile presence. I've worked on applications that the smallest screen it's used on is a surface tablet. So in some cases, at least in industry work, you may not have to make something for mobile at all. But this isn't the standard, and thus why mobile first is taught very heavily.
Marked as helpful
1 - FG-ABC• 180
@FG-ABC
Submitted
I don't understand how to replicate the font style of the text. I've tried changing the weight, but I still can't seem to do it.
Jordan Martin• 190@JordanMartinWebDev
Posted
So, it looks to me like your font-weight may be correct, but the font size is off? But honestly, I think you nailed the design replication otherwise. Just saw your question and figured I'd take a stab at helping. LOL
3
