Web Dev Independent Project #2 – Refactor a Legacy Website

Project: Refactoring a Legacy website to be 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 in the Codecademy Lifelong Learner Pro Community 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

You’ve just been hired at a company and your first task is to redesign the company’s legacy website to be responsive and HTML5 compliant. The requirement is for it to be responsive not just in modern browsers but you must also support IE 11.

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

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 and/or
  2. CSS Grid and/or
  3. Media Queries
  4. After learning Flexbox in the lesson linked above, Flexbox Froggy is a fun game that will give you more practice in using flexbox before applying it to projects.

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

Feature: Redesign company website to be responsive with support for IE 11 and HTML5 compliant.

  • Research Task: Research what sort of support IE 11 has for the technology you’ve chosen and determine what workarounds if any will be needed to work in IE 11.
  • Task: Practice using the chosen technology by refactoring previous projects. (Use previous projects completed on Codecademy platform i.e. Fashion Blog, Tea Cozy, Dasmotos arts & Craft)
  • Task: Refactor legacy application to meet HTML5 standards. Validation can be done via the W3C Validator. Find the legacy website source code here.
  • Task: Responsive Design checklist:
    • All assets (i.e images, fonts) load in IE 11, Firefox and Chrome.
    • Images scale proportionately to viewport size - no overflow.
    • There is no loss in interactivity when switching between browsers.
    • Content/text is readable between browsers.

Additional challenges

Tech Debt: The company style guide was recently modified to adhere to Block-Element-Modifier methodology when it comes to naming CSS selectors. To address some tech debt, you’ve been tasked with reorganizing the company website’s codebase to follow the BEM naming convention.

  • Research Task: Familiarize yourself with Block-Element-Modifier technology.
  • Task: Refactor previous projects to follow BEM to gain a better understanding of how to a codebase can be better organized using this methodology.
  • Task: Implement block element modifier methodology into the company’s website.

Resources & Support

Project-specific resources

  1. Legacy Website Source Code

  2. How to clone a website

  3. Validate HTML5 using the W3C Validator.

  4. Use caniuse.com to find a breakdown by browser and browser version of supported CSS,HTML and Javascript properties.

  5. Practice using Flexbox on previous projects completed on Codecademy platform (i.e. Fashion Blog, Tea Cozy, Dasmotos arts & Craft)

  6. Accessibility and HTML

  7. HTML Glossary / CSS Glossary

  8. HTML Inline Styles

  9. HTML5 Elements

  10. CSS3 Features

  11. HTML Classes vs Ids

  12. Setting up and Using Screen Readers

  13. Introduction to User Centered Design

  14. Using Dev Tools

  15. Block Element Modifier Convention

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
  7. Resource on writing pseudocode to get started with off-platform projects

Community Support

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!

Once you’re done…

Share in the CLL Community or the Forums for feedback and to see some other ways of solving this problem!

2 Likes