What did you find difficult while building the project? the difficult one for me is how can adjust the image for desktop view. Cause i have a 1629px screen. but i just stick to the guide and finish it successfully (i hope!!)
Which areas of your code are you unsure of? the responsiveness cause i just want to know my capabilities for writing a code with just pure html and css no css framework use
Some recomendations for you bro please check your design responsivenes again You will not make your desing responsive. Even your desing are breaking at 1000+px.Its because you will not make your images width adjustable to your screen size try to see where your design break where horizontal sidebar coming by this you will come to know thw breakpoints where your desing breaks. Hoep this will helpful to you any query please let me know
Make sure to advice me on how to improve my code
Yeah a recomendation for you I have seen your code. try to use local variables made it in :root{} and use it on the whole stylesheet. Another recomendation is you set buttons using position absolute try it to do with flex using align-self:baseline .if you are using flex property then try to position it using relative units like vh,% it is more helpful to you in position elements more accurately even in responsive desings .Main Fault i have found in your project see your responsive mobile preview because you set height 100vh cards are not showing correctly it will go beshind the screen try not to set the height in these cases. hope you will like some recomendations any other query let me know.
i want to learn more on the display grid propity. i don't understand i have used more the display flex for this project
yeah go for it and make projects with display:grid property u can make the same project also with grid use grid-template-Columns:1fr after setting display grid .
Second project down - scratched my head at first with regards to the positioning of "button" as it is not inline with the other elements within the box. Happy to hear suggestions on what could be better on my code. Working on lots more. :)
yeah I have found your mistake u are lets talk about one section .In first section sedan section u are trying to use flex properties without using display flex and it effects your positioning of button because you can use align-self :baseline only when your parent element which is your section in this case should be flex but in this case parent element is display block due to which you will not position your button . Do these Changes to correct it : .sedans{display:flex;flex-firection:column;} .button:remove display block and margin-left:20px and use align-self:baseline instead of align-self:first baseline. Hope so this comment will help you in understanding your issue.
A lot of improvement you need to adopt : 1 - Firstly main thing you need to do is using media queries to make your website responsive and firstly see the challenge carefully before starting because frontend mentor has provided you also the mobile design not only desktop design so use media queries to do this.
2- Make seperate style.css file and write css code outside the html file its the best practise you should follow
3- Dont use inline css dont write css inside the tags its not a good experience
4- Make local variables in :root and then use it in your css code
Hope so its helpful for you
Hi, this is my second challange. I see few problems in my coding:
If you have any adivces how can I fix or make better my code please give me some feedback.
Overall you did well try to do some changings. Try to just fix the width using absolute units like px but not height keep your height default and when you have done this now give their children containers max-width 100% not height 100% by this You will better your code for more review my code of order-Summary challenge i hope it helps you alot
It was really hard to minimize SVG file size, can you tell me easy way to do that?
impressive Design but a recomendation to you brother try to write font colors in custom variables in :root{} in css and use it in the code where you want hope so it is helpful to you
