I am using HTML5 input type email to validate email address. I found it's handy and no regex is needed. Is it a good way to verify email? What is your way to verify email?
I found the trickiest part of this challenge is the position of hero image in mobile and desktop. I can't manage to stick the desktop image right below the logo in HTML file. I have to do it separately and add the desktop image to bottom part of HTML file and control the show/hide with media query. Is there any semantically better solution? Or is it a viable solution?
Hey Samson, you did a great solution here! About your asking, here I give you my thoughts:
The way you validated the email using HTML and JavaScript is really interesting and I didn't know that method. In my case, I did the validation using a regex expression. Like you said, your solution is more clean. So I think both ways are good because it satisfies the solution. Remember that there's not only one way to solve something. One thing I could say you is that the prompt function you use to confirm that the email was sent successfully is quite aggressive, because users can't do anything until they click 'ok'.
I changed the position of the hero image modifying thegrid-template and then adding grid-column and grid-row to the elements. Thus, I can reorder the entire template. If you have any doubt, you can review my solution or send me a message.
I found the javascript part the most challneging only because I haven't been using it much lately as i've been focusing on just html and css but it was very rewarding finally getting the form validation working how I wanted it to work. I didn't try to make it responsive as I only focused on 375px and 1440px but I would appreciate advice on how I could setup my code to have my page be more responsive and cleaner looking when it grows. Also Any advice on my code would be much appreciated thank you! :) I forgot does anybody know how to have the email input form and the icon arrow always be next to each other?
Hey Chris, great solution! I know you focused only on the the two resolutions that the challenge indicate you, but you as frontend developer, need to satisfy more than two screen types. You need that your clients can look your website from the right way on any device, or at least, a vast majority of devices.
You can achieve this by multiple methods, from using just CSS Grid or Flexbox, but one common way is using media queries, that reviewing your code, you already know how to use it. So you only need to add an extra media query.
Still is a great solution and looks clean. I hope this help you! Keep coding.
Hey Prabhash, awesome job and kudos for using React. But I don't quite sure if this is the reason your solution have a lot HTML issues. You could try to review the report and see if you can fix those problems.
In the other hand, the image seems to have aspect ratio problems. You could try adding the properties width: 100%; height: auto. Also trying with object-fit: cover. If you already tried this, maybe you overwrote some property from a parent tag.
Hey Caio, nice job. Just a couple of thing you need to know in case you haven't corrected it yet:
Take care the aspect ratio of the image. One classic simple way is to use width: 100%; height: auto. This will prevent the image deforms. In case doesn't work well, you could try to add object-fit: cover.
When you click the 'send button', the message and border color from the input remains doesn't hide. You could fix this adding a setTimeOut to the function that is in charge for this behavior.
Impressive job Navid! The design is really well made.
I have a suggestion but it depends of personal taste, I guess. You could erase padding left and right from the image on the mobile view. I think this fix would fit so much more with the solution design.
Also, you should review your report and fix the accessibility issue. It could seem like an minor problem, but could be helped to people with accessibility problems.
Hey, Oyeyinka. Great Job! However, you can still made some improvements. First, review your report and fix your accessibility and HTML issues.
Also I noticed that you didn't add the background-gradient to the desktop view. And there's some problems with text, the text breaks when there's not enough space. You can try with a min-width property or change font-size with media queries.
I started out trying to make the structure of this component totally clean and robust, and I did OK at first.
I was using slots with fallback content to try to capture all the styles and behaviours before introducing any real content, but I lost my way a bit with that when it came to the share button.
I put waaaay too much time into allowing the share button to slide responsively along its tail to make it fully responsive over the 100px or so when the screen is too small to accommodate it off the right edge.
Hey Mark. I had the same issue: put too much effort trying to make the share button responsive for small displays. And I failed too hahaha. I ended adding a min-width value just for no broke the design. Anyways, your solution is great!
Here is my first challenge. I really enjoyed working on it and would greatly appreciate as much feedback as possible.
The one component I struggled with the most was the background wave image, I wasn't sure how to introduce it and eventually settled on including it as a background-image in the CSS file. I did find it difficult to adjust it properly to the layout and I'm not entirely happy with how it turned out, I think it could have been done a lot better, I'm curious to know what your thoughts are on my solution for this particular element, and what you would have done differently -->
How it looks on the desktop view: I don't think it matches the design perfectly nor does it on the mobile view to be fair.
How it looks on mobile devices: when I viewed the completed design on my iPhone 8, annoyingly I could move the screen up and down and this ruined the design as the card was static on the centre of the screen with blank space above or below as I moved it.
Please do let me know if anyone had the same problems or what your solution would be for this.
** I also viewed the finished design on a larger iPhone 11 and again it looked way off because the viewport was vertically a lot larger which left blank space on the top and bottom.
Hey Alejandro, great Solution. Seems nice and pretty sweet to me. About the second problem that you are facing:
The viewport unit vh doesn't work very well on mobile device. That's because the top or bottom bar from the multiple mobile browsers. So, when you go to your site it scrolls because it cannot calculate the proper viewport due this bars. There's a couple of alternatives to this, and recently they are testing new viewport units design specially for mobile browsers( large, small, and dynamic viewport units). You can search more about this.
Hello everyone !
I'm new to Javascript so my solution isn't the best. I noticed a few bugs when I spam the share button. If you have any solution, please feel free to let me know in the comments.
Hey LefieuxL, great solution. Looks good. The only advice I can give you is that instead of name every single tag to set margin: 0 and padding: 0 you could just use the universal selector *, just like this:
* {
margin: 0;
padding: 0;
}
This will select every single element on the page.
