Marko• 120
@matesic99
Submitted
It's my first time that I use tailwinds, design isn't perfect but I'm happy with it Some recommendations on how to be better and what to fix, and why i can't publish my project, what is wrong
Etienne Desfontaines
@etiennedesfontaines
All comments
- Etienne Desfontaines• 160
@etiennedesfontaines
Posted
Hey Marko, Well done on your first solution - it looks great!
If you feel up to giving a second iteration a go:
-
Click on the "view report" button below your solution, it will give you pointers to help you resolve the HTML and Accessibility issues it has flagged.
-
consider trying out the CSS mix-blend-mode property with a value of multiply, declared on your image, along with an opacity of 0.8. If the images parent has its background set to hsl(277, 64%, 61%), then this method should help you achieve the slightly lighter colouring, as shown in the design. If you get stuck, check out my solution, I used it there...
Happy coding Marko.
Marked as helpful
0 -
- Ando• 40
@bando9
Submitted
I can't overlay an image that's purple. I'd love to see if you can tell me which code I can fix. thank you till this challenge, i can make a layouting with css, a little animation with css3, make a card.
Etienne Desfontaines• 160@etiennedesfontaines
Posted
Hi Ando,
I love the hover effect you've created using box-shadow, it looks great!
Here are a few things to consider that may help improve your solution:
a) Making the Image purple. There are a number of ways you can achieve this. You can either think of the purple as an image overlay, or an image underlay.
If you think of it as an overly, consider a div that sits on top of and covers your entire image. If you make the background colour of that div hsl(277, 64%, 61%) you will have a purple block covering your image. If you then lower the div's opacity so it becomes transparent, you will be able to see the image through the div and the colour of the div will be imparted onto the image. If you've not yet learnt about opacity you can find a reference here: https://developer.mozilla.org/en-US/docs/Web/CSS/opacity
If you think about the colour as being below the image, you will instead give your image a parent container and make the background colour of that container hsl(277, 64%, 61%). If you then give the image height: 100% and width:auto; it will fill that container and retain its aspect ration. At this point you will only be able to see the image. It will be on top of the purple colour. In order to see the colour through the image, you can use mix-blend-mode on the image. ie mix-blend-mode: multiply; opacity: 0.8;
See this link to learn about mix-blend mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode.
In my experience the second solution above is more accurate for solving this challenge, but I think it is worth considering both when thinking about how to solve for getting colour into a grayscale image.
b) I notice you have also added classes to almost all of your html elements. This is not the best practice when styling. It is better to use selectors that have a lower specificity for the bulk of your style declarations. See these two links on CSS selectors and specificity to understand more: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
c) HTML image elements will provide better accessibility if you include an alt attribute with a description of the image. It allows assistive technology like screen readers to relay the image description to their users. ie <img alt="A meaningful description of the image">
d) Using media queries to help your solution translate correctly on for Mobile: 375px. Here is a link to learn about media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries Your browser dev tools can help to check your solution on different screen sizes.
e) You can centre your design using flexbox. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I hope some of the above proves valuable to you. Well done on your first iteration, I look forward to seeing the next.
Happy coding Ando.
2 - Satwik Modi• 10
@SatwikModi
Submitted
Any suggestions for object alignment other than float.
Etienne Desfontaines• 160@etiennedesfontaines
Posted
Hi Satwik,
Well done on completing your first Frontend Mentor solution.
For positioning:
-
Using "Display: flex" on your body element and justifying and aligning your content to centre is an excellent choice, well done. Instead of using float to position the elements within your main element, you can also turn to flexbox. It's a really versatile tool. Here is an incredible resource that helped me fully understand how to use it: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
-
Your choice to use absolute positioning to lay your color-box over your photo is great. However, it would be easier if you gave your main element a position of relative, and stipulated the top property of your color-box to be 0. An absolutely positioned element is removed from normal document flow and positioned relative to it's nearest positioned ancestor. See this link for full details on positioning: https://developer.mozilla.org/en-US/docs/Web/CSS/position
-Alternatively, and perhaps more effectively, you can use mix-blend mode for your color overlay. Checkout @W1lsonCodes solution for an example as to how effective this method can be.
- Your mobile view looks like it could do with some adjustment. You have chosen to approach this challenge with a desktop-first solution, which is fine. It will just require you to use media queries to adjust some of your style declarations for mobile responsiveness. e.g @media screen and (max-width: 345px){ body{display: block} etc etc} Here is a link to help you out if you're not yet familiar with media queries: https://www.google.com/search?client=firefox-b-d&q=using+medias+queries+yourtube#kpvalbx=_jm3tYMeLDIXC8gLAwKWADQ17
I hope my feedback brings some guidance. I look forward to seeing another iteration of this solution.
Marked as helpful
3 -
- Simon Wilson• 30
@W1lsonCodes
Submitted
This is my first project so anything you can see to improve. Please do tell!
Etienne Desfontaines• 160@etiennedesfontaines
Posted
Hi Simon,
This is an excellent result for a first project - well done.
There are a few tweaks you could consider to more closely match the design:
-
Changing the width of your .main-container to around 75% should adjust your card length and the surrounding space to more closely resemble the design.
-
Increase your body font-size to 17px.
-
Increase you h1 font size to around 40px.
-
Adding some padding-right to your <p> element, perhaps around 50px or so, should create a similar rag to the one on the copy in the design. You can do the same with your stats.
If any of these changes distort the size ratio between your image and copy sections, just play around with adjusting the image section size until you find a size that looks correct.
Be sure to recheck your media queries against any changes maid to your main styling, incase they need adjusting to compensate.
It may also be advantageous to make a habit of considering your HTML semantically. This resource really helped me: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
Good luck with the adjustments. I hope my advice comes in handy and I look forward to seeing your future projects.
Marked as helpful
1 -
- Abhinav Maurya• 65
@abno-24
Submitted
Hello Coders this is Abhinav Maurya here and this is my first challenge on frontend mentor and I have use my best to build it. I'll be glad if you please have look on it and on my code. And please tell me that how can I improve my CSS skill. Thank You
Etienne Desfontaines• 160@etiennedesfontaines
Posted
Hi Abhinav,
Your solution looks great on mobile, and I really like your use of mix-blend-mode for your colour overlay. Well done.
On desktop, I think it's mostly the sizing and positioning of your elements that might benefit from a second iteration.
I would suggest giving your <body> tag a height of 100vh. This will force it to take up the entire screen. Then, if you create a new <div class="card-main> within your body element, that wraps all other content, it will allow you to more easily position the card with similar spacing to what you see in the desktop design file. You can achieve this quite simply by adding "display:flex;" to your body element (as I notice you have done) but then including "justify-content: centre;" and align-items: centre". Your card component should now be sitting directly in the middle of your screen.
Increasing the "padding-right" of your h1, main, and footer elements will help with the copy spacing. Just adjust it whilst taking note of the copy's rag and you will know when it is correct.
Looking at you image, I see you have kept the aspect ratio, which is great. But it is being cropped. Increasing the padding of the elements I suggested above should help with this as you copy will need more height, which will expand your div and reveal more of your image. If the padding alone doesn't do it, just play around with the sizing of your containers to try to allow full image visibility, with correct copy alignment and spacing.
I also think it will be beneficial to consider using semantic html markup. I know this project is more about the styling, but it's always good to develop positive programming habits and using semantic html is one that will really benefit you in the long run. This document was a huge help to me, perhaps it will be valuable to you too: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
I hope you find my feedback useful. Good luck on your next iteration of this project, I look forward to seeing the result.
Marked as helpful
1
