@briannelson95
Submitted
This was a pretty easy challenge for me. I decided to keep it simple and utilize just html and css files.
@kanuos
@briannelson95
Submitted
This was a pretty easy challenge for me. I decided to keep it simple and utilize just html and css files.
@kanuos
Posted
Congrats on your first submission. It looks great :)
@Kuzitaa
Submitted
@kanuos
Posted
Hi @Kuzitaa, I previewed the site and found some issues - mostly JS issues.
type="submit"
and not type="button"
. In your HTML form, update the button type.button.addEventListener('click', completeFormView)
on line 18 as the form doesn't submit on click meaning the form validation is never run. It's a hack and not a good one too. You cannot bypass validationheading
element - try to include a h1
element per page - even if you have to hide it using CSSspan
to denote the thank you logo is not preferred. It should be an img
element.width: 280px;
. Using relative units helps in avoiding unnecessary media queries.Apart from these, I think your solution is pretty decent. Fix the issues and re-upload if you can.
Let me know what you think of the feedback - happy coding :)
@caduovieira
Submitted
Anchor tag error
When I was finishing my project I found the following error:
The code was written as follows:
<footer>
Challenge by <a
href="https://www.frontendmentor.io?ref=challenge"
target="_blank">Frontend Mentor</a>
Coded by <a
href="https://github.com/caduovieira"
target="_blank">Cadu Vieira</a>
</footer>
If someone could help me explaining why this happened, I'd be thankful.
@kanuos
Posted
Hi Cadu, it is not an error - rather an attribution. When someone sees your solution, FrontEnd Mentor wants the visitor to know that the design was created by them.
If you want you can hide them using something similar to tailwind's sr-only
class.
@Legrito
Submitted
@kanuos
Posted
Hi Lesya, congrats on your first submission. The UI structure looks nice, however I've few questions/suggestions -
As far as the semantic HTML and BEM naming conventions are concerned - you aced it! At a quick glance, I thought it was perfect. Keep up the good work :)
Marked as helpful
@mariemkhaled0
Submitted
@kanuos
Posted
Hey Khaled, Your design is not mobile responsive. It looks good on desktop but the mobile UI is completely missing. Try to fix that and generate a new screenshot.
Also, I found this in your css file -
body {
background-color: hsl(0, 0%, 81%);
font-family: "Bai Jamjuree", sans-serif;
font-family: "Barlow Semi Condensed", sans-serif;
font-family: "Big Shoulders Display", cursive;
font-family: "Fraunces", serif;
font-family: "Karla", sans-serif;
font-family: "Kumbh Sans", sans-serif;
font-family: "Lexend Deca", sans-serif;
font-family: "Montserrat", sans-serif;
font-family: "Open Sans", sans-serif;
font-family: "Outfit", sans-serif;
font-family: "Poppins", sans-serif;
font-family: "Raleway", sans-serif;
font-size: 10px;
}
Could you explain why you did that?
@WiaterKa
Submitted
Had problems with a proper positioning of the image (please see the bottom line).
Any feedback concerning the above (and other aspects) hugely appreciated :))
@kanuos
Posted
Hi Kamil, congrats on your submission. Your code looks pretty decent to be honest but like they say - there's always room for improvement.
Here's a few tips on how to improve your code
div.container
to main.container
BEM naming convention
. That'll help you isolate the UI into minute re-usable components - hence leading to DRY-er code.alt
attribute to your img element.object-fit
object-position
etc props on img
elements. Setting the display to block
helps prevent a lot of unnecessary bugs.<a>
tag instead of the button element. Also, decrease the border-radius of the button to make it look identical to the design's button.relative
units like rem, %, em
etc instead of absolute units like px
.Hope this helps. Hope to see a lot more from you in the future. Happy coding :)
Marked as helpful
@petronela88
Submitted
@kanuos
Posted
Hi @petronela88, congratulations on your first submission. Your solution looks decent however there's room for improvement. Here's some of the things you should fix and regenerate a new screenshot -
div.container
to main.container
- that will resolve your landmark issueslang="en"
attribute to the HTMLh3
tag to h1
footer
and it's contents as they are not there in the design. Hide them using CSS, so that they are available for the screen-readers to read. Look up screen reader classes
to do so. Here's a link if you want to read more about it.text-align: center
as per the design.h3
tag in your code looks a bit darker than the designh3
Hope this helps.
Hope to see more of your submissions soon. Happy coding :)
Marked as helpful
@svishwam
Submitted
Feedback welcome
@kanuos
Posted
Hi @vishwam, congrats on completing this project. However, your app isn't mobile responsive. Also you missed out the rounded corners. Try to fix them and generate a new screenshot!
Marked as helpful
@IgorM867
Submitted
What could I improve on this simple project?
@kanuos
Posted
Hi @Igor, the end product looks great! Congratulations on your first submission.
However, a few things you might want to consider :
div
element to wrap the card, use a semantic tag like section
or main
.object-fit
property of an img
as well as making it's display
to something other than the default inline
value.Overall, it's a pretty decent effort! Happy coding!
Marked as helpful
@Tachy-22
Submitted
@kanuos
Posted
Hi @Tachy-22, you haven't added the font family to your design as per the style-guide.md
.
Also, why are you using background image to display the qr code element. <img/>
tag should be used as the qr code is the main element of the card. Background images are used only for decorative purposes.
Try using relative
units e.g. rem, em, %
instead of absolute units like px
.
Hope these feedback help you :)
Marked as helpful
@AdrianoEscarabote
Submitted
👨💻 Hello guys.
This is my solution to this challenge. It was a lot of fun and challenging to do this project, at times I had complications with the positioning of the hero image, but I think I did a good job. I would like to thank my friend @correlucas for giving me the opportunity to do a premium project.
Tamo junto man 🇧🇷
I added some details:
Feel free to leave feedback on how I can improve my code. 😊
Thanks!
@kanuos
Posted
@correlucas Hi Adriano, your design looks impeccable. However, as you probably have observed, the design has a prominent linear-gradient
background which fades from bottom up, whereas in your solution that gradient isn't that prominent. Was that something you did deliberately as your own variation?