Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Ping Coming Soon Page

Mesut Çifci• 485

@mesutcifci

Desktop design screenshot for the Ping single column coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is done pretty quickly

Community feedback

Al Nahian• 775

@alnahian2003

Posted

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

Al Nahian

1

Mesut Çifci• 485

@mesutcifci

Posted

Hey @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
Al Nahian• 775

@alnahian2003

Posted

Hi 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
Mesut Çifci• 485

@mesutcifci

Posted

@alnahian2003 Thank you. Why did you say "Eyvallah Kardash." :D

0
Al Nahian• 775

@alnahian2003

Posted

Haha, I was kidding :P

0
Szymon Rojek• 4,540

@SzymonRojek

Posted

@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
Ovidiu-Antonio• 3,125

@ovidiuantonio

Posted

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 GitHub
Discord logo

Join 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