Looking to hire developers?
@madkn1311
@itsmeralph09
Submitted
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.
@madkn1311
Posted
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.
Marked as helpful
@Khalid-debugg
Submitted
the social media icons weren't included so I downloaded them but I can only change border color while hovering.
@madkn1311
Posted
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. 😊
Marked as helpful
@MuharemagiC
Submitted
Solution for profile card component :D
@madkn1311
Posted
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..!! 😊
Marked as helpful
@jesusfrancisco88
Submitted
Feedback welcome about my practices :D
@madkn1311
Posted
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 😊
Marked as helpful
@RalphJnr
Submitted
I had issues displaying the background image. Any feedback will be appreciated. Thank you!
@madkn1311
Posted
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.
Marked as helpful
@Hanzz14
Submitted
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
@madkn1311
Posted
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.
Marked as helpful
@mahmud035
Submitted
Can someone please tell me how I can add the background image to the container?
@madkn1311
Posted
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;
}
@ammarqureshi120
Submitted
This is my another challenge. Please give your feedback so that I can improve more.
@madkn1311
Posted
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;
}
Marked as helpful
@cathleys
Submitted
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!
@madkn1311
Posted
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. :)
@munyite001
Submitted
Feedback is highly appreciated :)
@madkn1311
Posted
Hello Emmanuel,
You've done a great job..!!
For the background, so that it doesn't repeat use the property background-repeat: no-repeat;
@eslammohamedtolba
Submitted
I am happy if we talk about my design, all feedback and questions are welcome
@madkn1311
Posted
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 :)
@steven-barkley
Submitted
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.
@madkn1311
Posted
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 :)
Marked as helpful
@dvbenthem
Submitted
Hello Coders,
My second project. Hope to get some feedback:) I had some trouble with positioning the bg-pattern-bottom.svg and bg-pattern-top.svg. When I resize my browser the two svg's are not resizing(shrinking) . How can I code this so that they size when I resize the browser?
Another question, on my image I have:
img{ max-width: 100%; }
When I use width: 100% the image gets bigger.
Which one is the best option? and why.
Thanks for the feedback
greetings, Danny
@madkn1311
Posted
Hello Danny,
Good job on the design..!!
It is good practice to apply background on the body instead of the html tag.
body{ background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg); background-position: right 48vw bottom 30vh, left 45vw top 48vh; background-repeat: no-repeat, no-repeat; }
max-width:100% it means that the width of that particular element will be between 0-100% and not more than that.I hope this was helpful. :)
Marked as helpful
@viotel81
Submitted
Hello everyone,
I do have only one challenge with this one. The svg background picture shows all well on Live server with me but disappears, once I check on GitHub pages. There must be something wrong with the path but I tried everything:( Any suggestions? Do I need to encode something here?
Thanks in advance!
@madkn1311
Posted
Hi there,
Your design looks perfect :)
You just forgot to add the quotes
It should be like this: background-image: url("/images/pattern-background-desktop.svg");
Instead of this: background-image: url(/images/pattern-background-desktop.svg);
@osmannurierdogan
Submitted
I am open to your any feedback :))
@madkn1311
Posted
Hello,
Good job on the design...!!
The only thing you forgot is to add an alt attribute to your image tag.
And the accessibility issue is because you didn't make h1 your first heading. A page should always have a level one heading.
I hope this was helpful :)
@Muhdzalf
Submitted
Hello, this is my attempt for this challenge. but I'm having trouble implementing the background in this challenge. what is the best way to implement it? Thank you
@madkn1311
Posted
Hello Muhammad
You have done a great job with your design...!!!
For the background, after the background-color: hsl(225, 100%, 94%); you need to add the given svg as the background-image.
As for the accessibility issue, you need to have a h1 heading in your code.
Just make these changes and your code will be free of issues.
I hope this was helpful :)
Marked as helpful
@MoooiJS
Submitted
Please share your valuable feedback, even if you are new please share how differently you would do things, so that we all can learn together. Thanks
@madkn1311
Posted
Hello,
Great job on the design....!!!
The only thing you forgot was to add an alt attribute to your image tag.
@thapa14
Submitted
There are some accessibility problem with the solution. what is it and how can i improve solution.
@madkn1311
Posted
Hello,
Your design looks great...!!
Every html page should have some important landmarks so that it is easier for a screen reader to understand the structure of your page. Such landmarks are header, nav, main, footer, etc.
In your code you need to add a main tag and a footer tag.
Also, it is good practice to start with a level one heading <h1> in your page and then <h2>, <h3> and so on.
@ashleyhurd
Submitted
Hey! I'm relatively new to these projects and would love any feedback! Can be literally anything- like if you would do anything differently please tell me. Thank you in advance! :)
@madkn1311
Posted
Hi there,
Great job...!!! :)
The only thing missing is an alt attribute in the image tag.
As for the accessibility issues your code body should have a main tag and a footer.
@Enzomf
Submitted
@madkn1311
Posted
Hello, Your design looks great...!! :)
But you need to add a lang attribute to your html tag. Also the image tag should always have an alt attribute. Just make sure to add these in your code and the issues will be resolved.
@AmeerBamigbayan
Submitted
@madkn1311
Posted
Hello,
Your design is great. :)
But you need to add an alt attribute to the image tag, it will resolve the issues.
Marked as helpful
@samuelorobosa
Submitted
@madkn1311
Posted
The design looks great..!!
All you need to do is add an h1 heading to your section. This will resolve the issues.
@sperr637
Submitted
I think I write too many commands where I can use them much less, which makes the code cumbersome to read.
@madkn1311
Posted
Hello,
There are some issues with your code.
You need to name your stylesheet style-qr.css instead of style qr.css.
You need to add an alt attribute to your <img>.
And lastly you need to add lang="en" to your html tag, to specify the language.
I'm sure if you make these corrections the issues will be resolved.
Good luck...!!! :)
Marked as helpful
@karam730
Submitted
@madkn1311
Posted
Good job...!!! :)
But you need remove the alt attribute from the div tag.
Marked as helpful
