responsive-web-design-I

KO | EN

gitlite — search

#python #hacktoberfest #react #ai #llm #android #machine-learning #linux #vue #awesome-list #pytorch #security #openai #open-source

responsive-web-design-I

(★ 77)

Responsive Web Design I project

responsive-web-design-I Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Responsive Web Design I: Adaptive Website

It's time to expand our CSS skills into multiple devices.  You will be creating an adaptive version of the "Great Idea" design. You will be working through design mock ups for desktop, tablet, and mobile devices located in the [design-files](design-files) folder.

## Task 1: Set Up The Project With Git

Follow these steps to set up and work on your project:

- [ ] Create a forked copy of this project.
- [ ] Add your project manager as collaborator on Github.
- [ ] Clone your OWN version of the repository (Not Lambda's by mistake!).
- [ ] Create a new branch: git checkout -b `<firstName-lastName>`.
- [ ] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
- [ ] Push commits: git push origin `<firstName-lastName>`.
 
Follow these steps for completing your project.

- [ ] Submit a Pull-Request to merge <firstName-lastName> Branch into master (student's  Repo). **Please don't merge your own pull request**
- [ ] Add your project manager as a reviewer on the pull-request
- [ ] Your project manager will count the project as complete by merging the branch back into master.

## Task 2: Minimum Viable Product

* [ ] Review each [design file](design-files).  Notice the subtle differences between them all. 
* [ ] Insert a `viewport` meta tag into the head of the project with these html attributes: `content="width=device-width, initial-scale=1"`
* [ ] Introduce max-width media queries into your project at 800px and 500px  
* [ ] Do your best to make your styles match the design files at each breakpoint

## Stretch Goals: 
* [ ] Create a tablet and mobile version of the services page from previous projects
* [ ] Once you have completed the project with max-width media queries, start over with min-width media queries to get a feel for how a mobile first approach would be like.  I recommend making a copy of all your contents in a new folder named "mobile-first" to keep it separate

responsive-web-design-I

responsive-web-design-I Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

responsive-web-design-I

responsive-web-design-I Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README