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

Solution Ping single column coming soon page

Steph 500

@xStephx

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

Community feedback

Mcbattle 40

@MarioBatalha

Posted

Some tips you should consider:

  • Try to keep the indentation in entire code.
  • Dispite of some tag are auto closed (Link, img and so on) you should close in openning tag in order to appilication with focus on accessibility like screen reader can index your app properly and improve your app semantic. Eg: <link rel="preconnect" href="https://fonts.googleapis.com" />
  • Add alternative text with alt attribute in img tag Eg: <img src="./user.webp" alt="user image profile" />
  • If a tag doesn't have a child element you should close in the openning tag. Eg: <i class="fa-brands fa-facebook-f p-3 rounded-full cursor-pointer text-Blue hover:bg-Blue hover:text-white transition-all duration-300" />
  • Add the script tag in the begnning of your code so this way you guarantee that it will run when your application is loaded and not only when it called.

Marked as helpful

1

Steph 500

@xStephx

Posted

@MarioBatalha thank you for your feedback! I will use that tips in my future projects. If you have any other tips/suggestions, feel free to text me!

0

@chemsodev

Posted

And do w-full for the input also to maintain 100% of the form width,and I like the fact that u started using tailwind css it's so helpful

Marked as helpful

1

Steph 500

@xStephx

Posted

@chemsodev thank you for your feedback! I will do that style on form. Yeah I use Tailwind CSS, it is easy to work with it and helpful in doing projects. If you have any other suggestion feel free to text me.

1

@chemsodev

Posted

Oh Steph maybe U the input should be a little bit wider u know to be able to show the whole email when it's inserted

Marked as helpful

1

Steph 500

@xStephx

Posted

@chemsodev thank you for your feedback! I will make it wider to show whole email. If you have any other suggestion feel free to text me.

1
Kal Wick 110

@kalWick01

Posted

if we all got figma we will be make better than our soulution, good job

2

Steph 500

@xStephx

Posted

@kalWick01 thank you for your feedback. This is true, with figma design you can made 100% same.

1
Wina 40

@Wina1603

Posted

pretty nice, although haven't gotten a hang of js, finding it really hard to both understand and get help lol🙂. Nice work😊

1

Steph 500

@xStephx

Posted

@Wina1603 thank you!!

0
hemel 70

@hemel17

Posted

hey, we are currently in a out of internet situation. some days before govt stopped all kind of internet service and international calls. now they gave internet with very limited speed. like I needed almost 7 mins to login to fem. all kind of social platforms are banned by the govt. so I can't reach you out through discord. and I don't have your mail address. keep me in your prayers. keep coding.

1

Steph 500

@xStephx

Posted

@hemel17 hey, I saw your situation with govt. Stay safe! Try to download a VPN, it may be help you to reach better connection with internet. I will keep you in my prayers. Keep coding too, and stay safe you and your family!!

0

@chemsodev

Posted

Perfection,no comment!

1

Steph 500

@xStephx

Posted

@chemsodev thank you!!

1

@MoamenAbdelrahman7

Posted

Perfect

1

Steph 500

@xStephx

Posted

@MoamenAbdelrahman7 thank you!!!

2

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