"One Site, Every Device" Welcome to your first Group Challenge! In the professional world, developers rarely work alone. This week, you and your partner will build a landing page that looks beautiful on a giant desktop monitor and a tiny smartphone screen.
Collaborate with your teammate to create a Responsive Landing Page for a product or service. You will practice "Git Flow" by working on different parts of the code and merging them together.
To pass the automated grader, your team’s project must include:
- Flexbox or Grid: Use display: flex; or display: grid; for your main layout.
- The Responsive Switch: Include the Viewport Meta Tag in your HTML
<head>. - Media Queries: Use at least one
@mediarule to change the layout for screens smaller than 768px. - Fluid Images: Ensure images have a
max-width: 100%;to prevent "overflow." - Collaborative History: Your GitHub commit history must show contributions from both partners.
Click the GitHub Classroom link.
- Learner 1: Create a new team name.
- Learner 2, 3, and 4: Find that team name and click "Join."
Start by styling your page for a mobile phone. It’s easier to stack elements vertically first, then use Media Queries to move them side-by-side for desktop later.
Don't all code on main at the same time!
- Partner A: git checkout -b feature-header
- Partner B: git checkout -b feature-content and so on and so forth....
- Push your branches and create a Pull Request on GitHub to merge your work.