Chingu Voyage 10 Pre-Work: Solo Project (4-8 Hr)

Solo Project for Chingu Voyage 10: Clone a Landing Page

My Notes:

The deployed page can be seen here: Chingu Voyage 10 Pre-Work by Melanie Althaus

I started out with a mobile-first approach and aimed to complete the requirements first (you can find them below). Since this is the first time I am using JavaScript in a project, it cost me a few hours to get the submenus working as they do in the original page.

Since I had some time left, I decided to create the other menues as well. I also rebuilt some JavaScript functions, which now seem to work better. I would like to find a way to include polyfills for older browsers, but that is a time issue.

Tools I used:

• GitHub Desktop
• VS Code
• Autoprefixer CSS online
• W3C Markup Validation Service

---

Directions:

These projects are a way for you to familiarize yourself with the concepts required for the larger eight week project.

• Project source code must be hosted on GitHub
• Completed project must be must be deployed on the Internet.
• You'll be asked to provide the URLs for both your GitHub repo and the deployed application when you submit the Pre-Work Form for your project.

Chingu is all about collaborative learning and supporting each other as we level up! You're going to have questions, and when you do we highly recommend utilizing the community - ask questions in the Pre-work Discord (your Village channel, #code-help, #community-chat, etc.). Don't worry, everyone is super friendly!

For easy deployments, look into using Github Pages, Netlify or Heroku.

Remember that you are required to produce original work! You should not copy and submit a solo project you did not personally author. For more information refer to our Community Standards.

Key Concepts To Learn From This Assignment:

• Git + GitHub Workflow.
• Familiarize yourself with local development.
• Project Setup.
• Documentation.
• Deployment.

Solo Project Tips:

1. It is more important to complete the project than it is to add features since completion is require before you can advance to the Voyage Project.
2. Concentrate on completing the requirements for your tier and then add bonus features if time permits. Keep in mind that advancing to the Voyage phase of the Cohort depends on the completion of the requirements listed in the project descriptions below.
3. Choose a tools you are comfortable and productive with. In the limited time available to complete the Pre-Work it's not a good idea to try to use something you aren't already familiar with.
4. The languages, tools, libraries, and frameworks you use are up to you. For example, all of the following approaches are acceptable paths to a successful Pre-Work:
   • Using any language for web development, not just Javascript
   • Using Vanilla JS instead of a library or framework
   • Using a framework of your choice like React or Vue
   • Using a boilerplate or generator like Create React App (CRA)
   • Using a CSS library or creating your own CSS
5. Remember that your app should run error-free. There should be no errors in the browser or server console logs.
6. You should deploy your app to a server accessible from the Internet for testing, demonstration, and to allow the Chingu-X team to evaluate it at the end of the Pre-Work phase.

Tier 1: Clone a Landing Page

Project:

Clone the Lloyds of London Taking Control Page

Requirements:

Use HTML, CSS, and JavaScript to create a web page clone of the Taking Control page on the Lloyds of London website. You should create a web page that duplicates the style and content of the original page. Your web page should:

• Remember that this is a clone. Even though you may prefer something different you should match the style of the Taking Control page as closely as possible. This includes layout, color scheme, and text content.
• Links on this page should be to corresponding content on the Lloyd's of London site. You do not need to replicate any content other than what's on the Taking Control page.
• The tabs section pops up additional links when the cursor hovers over it and the pop up disappears when the cursor moves out of the tab section. You should implement this effect for the 'News and risk insight' tab.
• Create your own solution without looking at the page source for the site you are cloning.

Key Concepts to Learn:

• HTML/CSS layout
• Using JavaScript to manipulate the DOM and event system

Bonus:

• Implement Responsive Design
• Implement a popup for each tab, not just the 'News and risk insight' tab.
• If you need help breaking down the project, try our Trello Board.