Let me know what your feedback and if there is anything you would change! Thank you!
Try to make it responsive and mobile-friendly.
Start from a mobile viewport, fix everything, then move to bigger viewports using mediaqueries.
Happy coding
1 Like
Thank you @Meimato !
I was actually thinking that as well, I realized I should start with mobile first, I realized after I was done that moving forward I should start doing that.
1 Like
Your page looks good @troyb16. Some things to revisit;
- Codepen provides the boilerplate for you. It only expects the code you’d put within the
bodyelement in the HTML editor. (No need to include thebodytags). For anything you want to add to the<head>element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
For instance, links to fonts go in the box labeled ‘Stuff for <head>’ - Run your HTML code through the W3C validator.
There are HTML syntax/coding errors you should be aware of and address. - Do not use the
<br>element to force line breaks or spacing. That’s what CSS is for.
Reference MDN Docs - Check that the user has entered a valid email addr. Throw an HTML5 validation error if not.
You learned to do this when coding the survey form - Make your page responsive. Remember, the R in RWD stands for Responsive
There’s a horizontal scrollbar on smaller screens
To help with responsiveness;
Rather than using fixed dimensions on elements, use max-width/height and relative units like %, em, rem and vw to keep everything responsive.
Start by styling for a narrow view port first. Narrow your browser as far as it will go and style the page so it looks good at that narrow width. Then gradually widen your browser and use CSS media query break points to adjust the style for wider view ports if needed.
2 Likes
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.