Design comparison
Solution retrospective
This is done pretty quickly
Community feedback
- @alnahian2003Posted almost 4 years ago
Hey Mesut!
Your project looks fine. But here are some suggestions for you:
-
Try to use
margin: 0 auto;
while you are giving the wrapper or the entire container a specific width so that all the content inside of it doesn't break in widescreen. -
Try to write HTML using HTML Semantic Elements. It will improve the accessibility of your HTML webpage to the user.
-
Try to add a submit button in your forms.
That's it! Happy Coding
1@mesutcifciPosted almost 4 years agoHey @alnahian2003.
- I will added margin property
- Actually i am trying to use semantic elements e.g in this project i used header and footer. What other elements can I use in this project? Any suggestions? May be section?
- I don't want to add submit button because when i click button the page reloaded.
0@alnahian2003Posted almost 4 years agoHi There, Mesut!
It's really fascinating to see that you've tried to improve your submission. Yes, you can simply use the
<section></section>
element and specify it with classes or id. That's obviously good practice.Feel free to add a submit button in your forms. If you don't want to reload the page on the submit button click, then try to implement a little JavaScript code to prevent the default function.
Here is an example:
// Get your submit button and contain it in a variable. const submitBtn = document.getElementById("submit-btn"); // now call an eventListener function on the "Submit Button" to get the "click" from the user and let's make prevent the default submit button function. submitBtn.addEventListener("click", function(e){ e.preventDefault(); })
That's it!
Give my comment an UpVote if you found it helpful.
Alright Kardash, take care. Happy Coding!!!
1@mesutcifciPosted almost 4 years ago@alnahian2003 Thank you. Why did you say "Eyvallah Kardash." :D
0@SzymonRojekPosted almost 4 years ago@alnahian2003
I just would like to mention that we shouldn’t use any id’s in the project just like that and style elements by id.
ID reference unique elements. There should only be 1 instance of any 1 ID. Classes can be applied to many elements and an element can have multiple classes. ID is unique for an element, there can be only 1 ID for an element. Classes can be applied to many elements and an element can have multiple classes at the same time.
ID assigns a name to an element. This name must be unique in a document. If you have several elements with the same ID, your HTML is not valid.
- Also, we can stop reloading the page.
Greetings :D
1 -
- @ovidiuantonioPosted almost 4 years ago
Hello Mesut,
You did a very good job with this project! The site is responsive and it looks very good. The buttons have hover states and the error message is displayed properly.
One thing you can do is giving the
max-width
property to the wrapper instead of the body (on a bigger screen the wrapper remains on the left side, because of that)Happy coding and keep going!
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord