Sign in
Log inSign up

Is it possible for a beginner to clone a website with HTML,CSS and JavaScript in just 30 days?

Abhishek Sardagi's photo
Abhishek Sardagi
·Feb 7, 2021·

4 min read

To start with answering the above question, it is an obvious 'YES'. Well, it always seems difficult and impossible until one starts working on a certain thing(e.g.- cycling, swimming, mountaineering, skiing.. etc). Once started, anything could be achieved with learnability, enthusiasm, improvisation, deliberate practice, and determination.

Speaking in detail, we team Narmada at Masai School were handed with a project to clone the website of Codecov in 3 days after 4 weeks of disciplined and well-structured learning. I would like to take you through the important aspects of the journey so far -

  1. Unit concepts.
  2. Project brief.
  3. Key takeaways & special mentions.

Unit concepts.

  • CMD & GIT - Introduction, collaboration & branching.
  • Javascript - Introduction, operators, conditional statements, loops, arrays, strings, functions, objects, higher-order functions, DOM, DOM events & attributes.
  • HTML - Introduction, styles, layouts.
  • CSS - Introduction, selectors, combinators, specificity, properties, flex, grid, media queries.

Project brief.

Introduction about the website -

Codecov is a tool that is used to measure the test coverage of your codebase. It generally calculates the coverage ratio by examining which lines of code were executed while running the unit tests.

Aspects & snapshots -

As the given website was almost a static one, we majorly focused on coming up with a replica of it in terms of visual visibility, functionalities & responsiveness for different screen ratios using the concepts, learned in the past 4 weeks.

  • Dashboard.

1.PNG

  • Product features page.

2.PNG

  • Pricing page.

3.PNG

  • Contact page.

4.PNG

  • Signup page.

5.PNG

Report -

Being the first project and team collaboration, we worked wonders to bring the scattered bits & pieces of our project into a cloned website. Due to the time constraints, we choked on imposing a few more functionalities using the DOM events & attributes which were still in progress. You may explore our codebase available on GitHub by clicking Here.

Key takeaways & special mentions.

The joy, confidence & satisfaction attained in doing something of your choice & passion is way better than watching it being done by others. Yes, I am happy to be on the right side. We came across many hurdles, but never gave up. We broke them into bits & pieces, worked upon them, resolved them, fixed them together to shape up this project.

It was all about approach, problem-solving, management, and many more factors. As we always have a scope of improvisation, we as a team would like to improvise on time management, collaboration & work efficiency. This project was shaped-up well with the substantial contribution from Shekhar Suman, Milind Anand, Abhishek Sardagi(Myself) & Kamlendra Singh. Thank you.