I'm just new in front-end development, hope you like my solution to this challenge. I spend about almost 2 hours in total in creating solution for this challenge. Feedback on my solution, i.e, areas for improvements, code optimization, and others are welcome.
Hello Raph,
Great job on the design...!!!😊
The image paths should have a forward slash instead of backward slash.
Also, images should have an alt attribute for better accessibility for screen readers.
the social media icons weren't included so I downloaded them but I can only change border color while hovering.
Hello Gigachad,
Great job on the design...!!!
You can use the icons from font-awesome. All you have to do is include the font-awesome cdn to access the icons and then you can customise them however you like.
All the best for the next challenge. 😊
Solution for profile card component :D
Hello Emir,
You have done an amazing job with this challenge.
The only thing I would suggest is that you should really read the report that is generated, as it helps a lot in improving the code.
In your code, you have used the paragraph tag everywhere instead you should have used appropriate tags for headings, for instance, there should always be a level one heading that is h1 and they should be used in order such as h1, h2, so on and not randomly.
Other than that I think it's perfect..!! 😊
Feedback welcome about my practices :D
Hello Fransisco,
You have designed the card quite well.
Here are some things that you need to change
You need to remove the background from your html code and place it in the styling of the body.
body
{
background-image: url("./images/pattern-background-desktop.svg");
}
To center the card vertically use min-height: 100vh in the body instead of plain height as min-height allows responsive behaviour and adjusts according to the screen sizes.
Always add an alt attribute to the images for better accessibility.
All the best for the next challenge 😊
I had issues displaying the background image. Any feedback will be appreciated. Thank you!
Hello Raph,
The design of your card looks great. :)
You need to include the following code in the body.
body {
background-image: url("../images/pattern-background-desktop.svg");
background-repeat: no-repeat;
background-size: contain;
}
Since your css file is in a folder, you have to set the image path with ../ that states that the image is located in the folder one level up from the current folder.
Using background-size: contain; makes the entire image fit to the background space.
I rarely use image as my background, is making the page heavy and need more time to load. but this challenge force me to do it. seems i did a wrong code, i already look to other person work but it doesn't work on me. can someone help me to find where is the problem?
I also accept any critic or suggestion to improve my code in the future
Hello Ali,
You have designed the card quite well. :)
To fix the background you need to include the following code in the body.
body{
background-color: hsl(225, 100%, 94%);
background-image: url("../images/pattern-background-desktop.svg");
background-repeat: no-repeat;
background-size: contain;
}
You were using background instead of background-image property. Also, you have to be careful in setting the path of the image. In your case your css file is in a folder so that is why you have to set the path with ../ as this states that the image is located in the folder one level up from the current folder.
Using background-size: contain; ensures that the entire background image will fit the background area.
To center the card you need to include the following code once again in the body.
body{
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
We use min-height instead of plain height because it enables responsive behavior and it will adjust according to the screen size.
Also remove the media query since it is not needed in this case, instead add max-width to the container class as it also enables responsiveness and adjusts the size accordingly.
Can someone please tell me how I can add the background image to the container?
Hello Hasan,
Great job on the design...!!
Remove the background-color from your card-container, and include the following code in the body,
body {
background-color: var(--pale-blue);
background-image: url("../images/pattern-background-desktop.svg");
background-repeat: no-repeat;
background-size: cover;
}
This is my another challenge. Please give your feedback so that I can improve more.
Hello Ammar,
You designed the card really well. :)
To center your card you should do the following:
min-height is the best option as it will change when needed(i.e enable responsiveness). Plain height property won't allow responsiveness.
body{
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
I'm done with the challenge so far and I don't know how to display the favicon. I got lots of difficulties on GitHub lol because this is my first time using it.
If there are things you see that need tweaking, please let me know.
If the codes are understandable and clean? is the media query rule I used correct?
please give me your reviews on my code if you have time.
Thank you to all!!
Have a great day!
Hello Cathleys,
Good job on your first challenge..!!
What I noticed in the CSS for the container is that you have used both width and max-width. Since max-width overrides width so its better to use just max-width.
All the best for the next challenge. :)
Feedback is highly appreciated :)
Hello Emmanuel,
You've done a great job..!!
For the background, so that it doesn't repeat use the property background-repeat: no-repeat;
I am happy if we talk about my design, all feedback and questions are welcome
Hello Eslam,
You've done a great job..!!
Just always make sure to read the assessment report as it helps a lot to improve the code.
Accessibility is very important for any webpage, so here are some very small changes that you can make,
1.If you are using headings then they should always start with h1, which is the level one heading.
2.Also the code should have specific landmarks like head, title, main, footer, etc. so that navigation beacomes easier for screen readers.
All the best for your next challenge :)
The was easier because I completed the Product Card project before this. I used w3schools for reference as well my previous project. It was done a lot faster than the first one. I would love to improve this so suggestions are welcome.
Hello Steven,
You got the design of the card perfectly.
To center the page vertically and horizontally, you should use flex.
For that you will need to add min-height: 100vh to the body so that it's centered vertically on all devices.
Just using normal height won't make it responsive.
body{ min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
Also in this link: <link href="style.css" text="text/css" rel="stylesheet" /> you need to add type instead of text, because the type of the document is text/css.
Type specifies the type of the document/resource.
I hope this was helpful :)
