Front End: HTML/CSS HW #2 Amazon Mock

All Homework Must be Uploaded to it own GitHub repository. You will copy the URL Link for your GitHub Repository and Submit that link for each of your homework assignments

Using the skills we’ve practiced up until now, your task is to position the following based on the mockup:

  • Sign In
  • Email(phone or mobile accounts)
  • Password
  • Forgot Password

Feel free to glance over the CSS Tutorial – particularly the sidebar topics, just to get an overview of some other techniques and CSS tools that you may want to implement. You’ll want to use this resource in the future as well. Don’t read the entire thing page by page, as many tools are specialized and not things you’ll want regularly.

Once completed, commit the project to GitHub and submit the link to the assignment by clicking start quiz.

Useful Resources:

https://www.w3schools.com/css/default.asp

Image Resources:

Note: You can right click images and press ‘save image as’ to save the image to your computer.

Useful CSS Resources:

Playgrounds for Bootstrap columns, media queries, and grid. Feel free to change the code – it will go back to how I made it when you refresh.

Also, links for extra games/practice for Flexbox (Flexbox Froggy), and a cheat sheet for flexbox that I am sure will prove helpful. If you feel you have a good grip on flexbox, bootstrap containers and columns, and css-grid, feel free to move on.

Zen garden is useful for ideas for web layouts in the future; I also use https://dribbble.com/ and look at web designs on Figma for inspiration.

Bootstrap cheat sheet is best used with the inspector tool, so you can see what classes are being applied to each element.

Bootstrap Columns Codepen

Media Queries Code Pen

Zen Garden

CSS Grid Code Pen

Dribble

Figma

Flexbox Playground Code Pen

Flex Box Froggy

Flex Box Guide

Bootstrap 5.0 Cheatsheet

Skip to content