This is a solution to the Clipboard landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Solution URL: GitHub repository
- Live Site URL: GitHub pages
- Initialize a public repository on GitHub.
- Configure the repository to publish my code to a web address.
- Look through the designs to start planning out how to tackle the project.
- Structure the content with HTML.
- Write out the base styles for the project, including general content styles, such as
font-family
andcolors
. - Start adding styles to the top of the page and work down.
- Semantic HTML5 markup
- CSS variables
- Flexbox
- CSS Grid
- Mobile-first workflow
- Bootstrap
Bootstrap Breakpoints
/* sm */
@media (min-width: 576px) {}
/* md */
@media (min-width: 768px) {}
/* lg */
@media (min-width: 992px) {}
/* xl */
@media (min-width: 1200px) {}
/* xxl */
@media (min-width: 1400px) {}
Bootstrap Docs
- This helped me to learn property declarations.
- Frontend Mentor - @alangvazq