@Kemuntogift
Latest solutions
Latest comments
- @Carolkiarie
Hello Kemunto, congratulations on completing the challenge. I have a few suggestion.
-
You could include a css reset . A CSS Reset file targets all rules that the different browsers apply defaults to and resets them to their minimum possible value. This is because different browsers have default rules with properties and values applied to all pages before loading files. Due to the cascading nature of CSS, any styles the browser uses will remain unless explicitly overridden. Here is a css reset that I use often https://www.joshwcomeau.com/css/custom-css-reset/
-
In your code , you only needed to put the display of the container as flex just as you did. Not the card too. The content of the container is overflowing. You only need to set the height of the image, for the rest of the container the height could be set to auto.
happy coding!
-
- @samarth0605@Carolkiarie
hey @samarth. congratulations on finishing the project. I have gone through your code and have some suggestions. To start with its not proper to put your main content in a div and in a span tag. Semantic tags make it clear to the browser what the meaning of a page and its content is. That clarity is also communicated with search engines, ensuring that the right pages are delivered for the right queries. For the main content. you could use the main tag as a container so that you can be able to flex the items that you have. please go through this playlist it will give you a better idea on the Semantic HTML and all the basics that you need.https://www.youtube.com/watch?v=hu-q2zYwEYs&list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G
- border-radius is the css property that makes the curved edges.
- for the button to be small. in html instead of using a p tag . instead use button . then manipulate it to the desired size using margin and padding.
happy coding!
- @pedrohfarantes@Carolkiarie
Hello Pedro good job on the challenge. I have some few suggestions that could possibly help.
-
You should use Semantic HTML in your file. semantic tags make it clear to the browser what the meaning of a page and its content is. That clarity is also communicated with search engines, ensuring that the right pages are delivered for the right queries. it is also easier for someone who is going through your code to know what the content is.
-
include a css reset in your css file. All browsers have default rules with properties and values applied to all pages before loading files. Due to the cascading nature of CSS, any styles the browser uses will remain unless explicitly overridden. A CSS Reset file targets all rules that the different browsers apply defaults to and resets them to their minimum possible value. my favourite css reset is from https://www.joshwcomeau.com/css/custom-css-reset/ you can just copy and paste it in your code
and lastly, the image should be in your html file and not set on your css file as a background image.
happy coding and good work!
-
- @ColonelSandurz@Carolkiarie
Hello Colonel. Congratulations on finishing the project. I went through your code and I noticed that you did not include a media query for your project. I found this article which went into detail about why you should do a mobile first approach when designing.
https://xd.adobe.com/ideas/process/ui-design/what-is-mobile-first-design/
Second suggestion is for you to include a css reset into your code. Josh has a really good css reset which you can check out.
https://www.joshwcomeau.com/css/custom-css-reset/
happy coding!
Marked as helpful - @Carolkiarie@Carolkiarie
Thank you so much for the tip and the compliment. I will correct and implement the tip in future projects.
- @FelpBSouza@Carolkiarie
Hello Felp, nice work done! I have just recently completed the challenge myself and would like to make a few suggestions.
-
Try including media Queries in your CSS to make it more responsive. you can read more from https://www.w3schools.com/css/css3_mediaqueries.asp
-
You could include a CSS reset to your code because browser have different "built-in" styles which they apply to different html-elements. These style definitions may vary across different browsers. The normalizing css files are meant to „normalize“ the rendering of the page across browsers by resetting these browser-specific styes. You could use https://www.joshwcomeau.com/css/custom-css-reset/
-
CSS variables will make your work way easier when using css. My favorite video which helped me understand the usefulness of them was by TheNetNinja . https://www.youtube.com/watch?v=8Yum7EQgadM.
-
