@KemuntogiftSubmitted almost 2 years ago
Caroline
@CarolkiarieAll comments
- @CarolkiariePosted almost 2 years ago
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!
0 -
- @samarth0605Submitted about 2 years ago
How to align the image with the white box ? how to make curved edges ? How to make button small? Can you please suggest me some of the improvements that I can do in my code ?
please answer these questions. Thank you.
@CarolkiariePosted about 2 years agohey @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!
1 - @pedrohfarantesSubmitted about 2 years ago@CarolkiariePosted about 2 years ago
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!
0 -
- @ColonelSandurzSubmitted about 2 years ago@CarolkiariePosted about 2 years ago
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 helpful0 - @CarolkiarieSubmitted about 2 years ago
I have just completed the challenge and I welcome all criticism on how i did it. Thank you for your time:)
@CarolkiariePosted about 2 years agoThank you so much for the tip and the compliment. I will correct and implement the tip in future projects.
0 - @FelpBSouzaSubmitted about 2 years ago
text center with image. space between image and text with the div
@CarolkiariePosted about 2 years agoHello 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.
0 -
- @correlucasSubmitted over 2 years ago
👾 Hello, Frontend Mentor coding community. This is my solution for the QR Code Component.
Making this challenge again was something really amazing for me, first because going back through my past challenges I was able to fix some issues and clean my code and then because was my first time using JS (yes I'm a newbie) 😂
I added some features:
- 🎨 Dark and Light mode button
- 👾 Custom QR Code image
- 🧚♂️ A little bit of color customization
- 👨💻 Custom image hover state
I'll be happy to hear any feedback and advice!
@CarolkiariePosted about 2 years agoThis is amazing and inspiring. I love how creatively approached the challenge!
1
