Web Dev Independent Project #1 – Turn a Site Mobile Responsive

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 Pro Learner 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.

Overview

Objective

Use your knowledge of responsive design to refactor an online fashion blog to be viewed from a mobile device

Pre-requisites

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:

  1. Introduction to HTML

  2. Learn Responsive Design

  3. Learn CSS

  4. Specifically: CSS Selectors & Visual Rules, CSS: The Box Model and CSS Display & Positioning (other modules are optional)

  5. Getting Started With Javascript

Suggested Technologies

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:

  1. Flexbox or CSS Grid

Project Tasks

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.

  • Repl.it: If you’re not quite ready to get into all of the nitty gritty details of setting up your own local developer environment, Repl.it is an amazing online tool that can help you spin one up a web-based development environment with the click of a button. For this project, you’ll need a Repl.it environment that supports HTML, CSS and JavaScript.
  • 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.

Basic Requirements

  • 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.

Additional Challenges

Intermediate challenges

  • 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.

Advanced challenges

  • 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

Project-specific resources

  1. Fashion blog source code
  2. Article on simulating mobile devices using Chrome dev tools
  3. Video on how to use Chrome dev tools
  4. Introduction to user centered design
  5. Understanding user stories
  6. Mobile-First Sample Designs

General Resources

  1. How to get set-up for coding on your computer
  2. What you need to know about Git, GitHub & Coding in Teams
  3. How developer teams work
  4. First steps in tackling a group project
  5. Resource on writing pseudocode to get started with off-platform projects
  6. Video on how to use Chrome dev tools

Community Support

Want to Looking for additional help or someone to work with (or somewhere to brag about your finished project)? Join our Codecademy Pro Learner Community on Slack to meet other learners like yourself!

Once you’re done…

Share on the Slack & in the Forums