Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Receive an error message when the form is submitted if:
- The
Email address
field is empty should show "Email address" - The email is not formatted correctly should show "Oops! Please check your email"
- The
- Live Site URL: Pod Access Request
- Semantic HTML5 markup
- SASS/SCSS custom properties
- Absolute positioning
- JavaScript
I typically default to using the flexbox to build webpages, but this project was focused more on utilizing absolute positioning for overlays. At first I felt a good approach would be to define each divider with specific heights and widths, but margins seemed to work better here to make the page more responsive.
As I built the project, I could see some problems I would naturally run into due to using absolute positioning. With flexbox, you can simply define boundaries and manipulate the items inside those containers, but that did not work as well here. The next project I complete will be attempted with a mobile first approach. This should allow me to get a better layout that is more responsive accross varying widths. I will most likely design for a minimum width start at 375px and increasing the width ranges from there. That way I can be certain my website will look great when I finish without having any gaps in page responsiveness.
I also used some simple jQuery to show some email validation. The position of the validation messages change position depending on the size of the viewport.
On future projects, I plan on switching from plain css to scss implementation. There are useful tools on VSCode such as Watch Sass which writes scss compilation script as you type. Some may wonder why this is great but it also locates webkit tools needed for making your code compatible across different browsers. It's also much easier to organize.
- Website - Jason Nembhard
- Frontend Mentor - @jNembhard