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

Responsive using vanilla JS, CSS and HTML (mainly flexbox layout)

@ozangokdemir

Desktop design screenshot for the Intro component with sign-up form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi to everyone reading my post and probably checking my creation !

For this one I had to learn a bit about Javascript. In fact, I started this challenge like 2 months ago, and I learned Javascript basics when I had free time not working.

My first mistake was to trying to handle everything with Javascript (because, you know, it seems so powerful and when you get a new tool you want to use it everywhere !). I ended editing the input fields styles and creating the elements containing error messages only by using JS, but I quickly understood it's not the best way to get this job done...

Finally, after having such a bad time for so long, I got motivated again and I could end this challenge being happy of my result :)

The only little thing that bothers me is this Try it free button... I have 2 issues I couldn't resolve on it :

  1. First, I used flexbox to center the text but I had troubles with the spacing between my emphased text and my normal text. I have an <em> inside an <a> element.
  2. Then when I worked on responsive, I noticed that using flexbox wasn't getting me a good result for 2-lines text. Maybe I should have played with flexbox-shrink property or something ? I ended up using padding to center it, but it becomes sadly ugly around 570px width...

Anyways, thanks if you took some time to read my comments, and I would fell very happy to get your comments and advices on the solution provided. :)

Peace ! Ozan

Community feedback

P
David Turner 4,150

@brodiewebdt

Posted

I think it looks pretty good. One thing you have to remember about responsive design is you can't resize the screen on different devices. Resizing the browser on a desktop and/or laptop doesn't happen with a tablet or mobile phone. I wouldn't worry how it looks at 570px, because I doubt there are any devices at that resolution. If you use the Dev Tools in the browser, set it it to 375px and see how it looks. Then set it to IPad and see how it looks. I usually only go a maximum of 1000px maximum and center it in the screen after that. I hope this helps.

Marked as helpful

0

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