/Better.com-clone

A clone of the Better.com homepage built using React JS.

Primary LanguageJavaScript

Front-End Practice - Web Page Clone

This is a clone of the Better Mortgage landing page. The project was built to practice my Front-End web development skills by cloning a live web page from the internet and reproduce it as closely as I could.

Table of contents

Overview

This is a practice project for my Front-End web development skills. The task is to try and build a clone of an existing web page and get it as close to the original as I can. Here goes nothing ☺.

The challenge

To reproduce the landing page of the website as closely as possible and implement all the UI designs from scratch if possible. Hence the tasks can be broken down into:

  • Inspecting the page and downloading any resources needed
  • Searching for any fonts and icons used on the page or any free alternatives on the internet
  • Making sure the colors and animations looks as close to and smooth as the original

Screenshots

Links

My process

Break the web page into parts e.g. navbar, showcase (part with mobile phone card) etc. Then build each part as a React component each with it's own styling in a separate css file. Then combine all the parts into one web page. This way any component can be reused to make other web pages.

Built with

  • ReactJS
  • JSX: Html markup mixed in with javascript as per React Standards
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • ES6 Javascript syntax

What I learned

How to use custom fonts in React by including them in a fonts directory and importing them on the top most css file.

@import url("./fonts/Graphik-Regular/style.css");

How to use css variables to control things like colors and fonts for the entire app from one file in React.

:root {
  --primary-font: 'Graphik', sans-serif;
  --secondary-font: 'Montserrat', sans-serif;
  --primary-color: #281741;
  --secondary-color: #00bf92;
  --tertiary-color: #6f6f6f;
}

Author