Estimate Completed Time: 30-60 min.
As a junior web developer, you've been assigned to create a responsive website for a client who runs a cat adoption agency. The website needs to display various cat breeds in a visually appealing and accessible manner. Your task is to build this website using CSS Flexbox to ensure it looks great on all devices, from desktops to mobile phones.
This lab will assess your ability to apply CSS Flexbox properties to create a responsive layout, ensuring an optimal user experience across different screen sizes.
- VSCode (or any code editor)
- Web browser for testing
- GitHub repository (https://github.com/learn-co-curriculum/-phase-0-js-css-layouts-lab.git)
- Node.js installed
Instructions:
-
Fork and Clone the Repository
- Fork the provided GitHub repository to your account.
- Clone the forked repository to your local machine.
- Navigate to the project directory and run
npm installto set up the project dependencies. - Run
npm testto test your code and open theindex.htmlfile in a web browser to view the changes. Save the file and refresh your browser to see the changes.
-
Analyze and Plan
- Review the provided HTML structure in the
index.htmlfile. - Define your styling goals for the following elements:
- Cat breed cards
- Page layout
- Responsive design
- Review the provided HTML structure in the
-
Create and Link CSS File
- Create a new file named
style.cssin the project directory. - Link the CSS file in the
index.htmlfile within the<head>section.
- Create a new file named
-
Style the Cat Breed Cards
- Target the cat breed container using a class selector:
- Set the display property to
flex. - Set
flex-wraptowrap. - Set
justify-contenttospace-around. - Add
paddingof2em.
- Set the display property to
- For each cat breed card:
- Set the
flexproperty to1 1 300px. - Set the
marginto1em. - Set the
paddingto1em. - Set the
borderto1px solid #ddd. - Set the
border-radiusto8px. - Set the
box-shadowto0 4px 8px rgba(0,0,0,0.1). - Set the
text-aligntocenter. - Add a
transitionfor thetransformproperty with a duration of0.3s.
- Set the
- For the images within each cat breed card:
- Set the
max-widthto100%. - Set the
heighttoauto. - Set the
border-radiusto8px.
- Set the
- For the headings within each cat breed card:
- Set the
marginto0.5em 0.
- Set the
- For the paragraphs within each cat breed card:
- Set the
marginto0.5em 0 1em.
- Set the
- Target the cat breed container using a class selector:
-
Make the Layout Responsive
- Use media queries to adjust the layout for smaller screens:
- Set the
flex-directionof the cat breed container tocolumn. - Set
align-itemstocenter. - Ensure each cat breed card takes up the full width of the container by setting the
flexproperty to1 1 100%. - Set the
max-widthof each cat breed card to100%.
- Set the
- Use media queries to adjust the layout for smaller screens:
-
Add Hover Effect for Cat Breed Cards
- Apply a scaling transformation to cat breed cards when hovered over:
- Set the
transformproperty toscale(1.05).
- Set the
- Apply a scaling transformation to cat breed cards when hovered over:
-
Organize and Test
- Save your CSS file.
- Open the
index.htmlfile in a web browser to view the changes. - Ensure all elements are styled correctly and the layout is responsive.
- Run
npm testto test your code and ensure all tests are passing.