Project: Design a web page to be mobile responsive
This project will take you off-platform and get you started in your own developer environment! Never done that before? Not to worry - we’ve shared some resources to help you down below. This project can be completed entirely on your own - or, you can join the #web-dev-buddies in the Codecademy Lifelong Learner Pro community on Slack and find someone to work with! Jump to the community support section to hear more about this.
The project is broken down into a set of user stories for you to follow. User stories are likely something you will see more and more of as you progress in your journey as a developer. They are short, simple descriptions of a feature told from the perspective of the individual using that feature. The goal of each user story is to describe to you, the developer, what the feature or application needs to do, while providing you with enough flexibility to determine the best way to make that happen.
Use your knowledge of responsive design to refactor an online fashion blog to be viewed from a mobile device
In order to complete this project, we suggest that you have familiarity with the content in the following courses or lessons on the Codecademy platform:
Specifically: CSS Selectors & Visual Rules, CSS: The Box Model and CSS Display & Positioning (other modules are optional)
Depending on where you are on your Path, there may be multiple technology options you can use to complete this project - we suggest the following:
Get started - hosting your project
Since you won’t be completing this project in the Codecademy learning environment, you’ll need to find somewhere else to host your project! We’ve listed our recommendations below. For more specific information on the set-up involved with either of these resources - visit our forums guide.
- Visual Studio Code: If you’re excited & ready to set-up your own local environment, we’ve got your back too. Visual Studio Code is a popular open source text editor that you will set-up & configure on your own device and can be used to develop websites and applications locally before pushing to production.
- User Story: As a user I like to be able click the image of the article to read the full article.
- User Story: As a user that uses the accessibility features of my window I would like to be able to hear description of each article as I’m scrolling through the list.
- User Story: As a user I would like to click the fashion blogs email and automatically have my default email client open with the “To” field populated with the fashion blogs email.
- User Story: As a user I would like to be able to view only the title, author, timestamp and image when viewing all the articles.
- User Story: As a user I would like to be able to view all articles on this blog from an Iphone 8 and Samsung S8 screen.
- User Story: As a user I would like to be able to differentiate between articles with alternating article blocks when scrolling through the list of articles.
- User Story: As a user I would like to be able to choose between viewing the blog in light mode and dark mode.
Resources & Support
- Fashion blog source code
- Article on simulating mobile devices using Chrome dev tools
- Video on how to use Chrome dev tools
- Introduction to user centered design
- Understanding user stories
- Mobile-First Sample Designs
- How to get set-up for coding on your computer
- What you need to know about Git, GitHub & Coding in Teams
- How developer teams work
- First steps in tackling a group project
- Resource on writing pseudocode to get started with off-platform projects
- Video on how to use Chrome dev tools
Looking for additional help or someone to work with (or somewhere to brag about your finished project)? Join our Codecademy Lifelong Learner Pro community to meet other learners like yourself!