Improve Front End Skills By Doing Clone SpaceX

I saw most peoples start doing a clone, I decided to do one clone, so i started looking for famous websites on google, so I decided to go with an easier one SpaceX. I used in this clone react CSS and HTML programs,

I started by collecting necessary pictures and logos, then I discover which fonts family they used. I did 3 components in this clone logo, header, and page component. I found. the logo as an SVG extension then I saved in logo component, then i imported in the header to use it with other elements.

The header component includes three parts separated by div and CSS selectors logo, center, and right side text. In the header’s CSS style I used a fixed position to make the header available to all pages with a fixed place.

On the Right Side of the header, I added the burger menu from hamburger-react, I didn’t use modal in this clone to show burgers may I will do in the next part. I used inline style inside react JSX and external style header.css.

In-app component we called this page component 4 times, each page has different props values so when they receive new props, so each page will get its own props includes text1 ,text2 text3 ,btn…

The only tricks were some pages have a different number of the text, so in this issue, we passed extra prop to the page we want to render extra text or different style of button and we just used javascript ES6 , for example

{! lastpage && <div style={second? { width:’100px’,height:’30px’,’padding-top’: ‘13px’,’font-size’:’15px’} : {}}

className=”button”>

{btn}

</div>}

so if lastpage props true then this element button will be hidden, if the lastpage props are false then this element above will render for other pages and disappear for the last page.

Conclusion

In front end improvement skills, we used a clone of websites includes css, html, and react, so cloning it makes you fell like you area working on real project and real work expereince.