Our First Project at Masai

ASOS.COM clone

This is the first project I have made at Masai and this project was given to us at the end of the 2nd unit. All the students were divided into groups of 5/6 members and each group had to make a clone of different websites, the website which was given to us was asos.com and we tried our best to clone it completely in every aspect.

Concepts/Topics covered in 2nd Unit

At first, we were introduced to basic HTML and its property then we moved on to CSS and CSS properties such as CSS styles and box models, CSS selectors, CSS flex, and Grid. After that, we were taught Media Queries and how to use them to make responsive websites, then we were taught higher-order functions (HOF) and how we can use HOF to add functionalities to our websites. Then we moved on to DOM (document object model), JavaScript local storage and at the end, we were taught sorting techniques using the HOF filter.

Roles and responsibilities of team members

We were a team of 6 members and the name of all the members are Prateek, Pratyay, Rohit, Vijay, Sagar, and Chinni. On the first day of our Construct Week, we decided the roles of each member and decided the parts/pages which are going to be made by which member. Pratyay means I have made the navbar, men's home page, and women's home page with maximum functionality, Prateek has made the home page of the website, login page, and signup page which was fully functional, and Rohit made the men sale's page, women sale's page, and a page with products of a particular brand with many sorting techniques and functionalities, Sagar made the cart page, payment page, and checkout page, Vijay made the product view page which is accessed after clicking at any image in any of the product pages, and at last, Chinni made the footer which is placed at the bottom of all the pages which were present in our website. We made the whole clone project only with the help of the concepts which were taught to us in the 1st unit and 2nd unit itself. Everyone on my team did a great job and I am very thankful to them.

Key learning points and improvements that can be made

I had a great time during the Construct Week I learned a lot of things as the team members were very supportive and helpful so I didn't face many problems. The main problem I faced was with using GitHub for the collaboration as it was my first time using the git for a big project and collaborating with my other 5 members. I did a mistake while pulling the main branch after completion of the project on my pc without merging my branch and switching to the main branch. So as we were about to submit the project became a little chaotic but we still managed to complete it on time and submit it before the deadline. We all should've merged our branches to the main after completing our work in our branches so that our main branch would be clean and a lot of time could be saved and I will keep this thing in my mind for future projects and collaborations.

Asos_clone -%[https://stirring-marzipan-5d4585.netlify.app/]

Github link

• https://github.com/Sagar1079/asos_project

  YouTube Link of Our Presentation

  -%[https://youtu.be/lX_LOmwAX48]

Navigation Bar

<script>
    document.getElementById("payment").addEventListener("click",payment)

    function payment(){
    document.getElementById("blur").style.display="flex"


    }
    document.getElementById("X").addEventListener("click",Close)
    function Close(){
        document.getElementById("blur").style.display="none"
    }

    </script>

Women Home Page

                    <h4>SALE Jewellery & Watches </h4>
                    <ul>

                    <li> <a href="#">SALE Jumpers & Cardigans</a> </li>
                    <li> <a href="#">SALE New lines added</a> </li>
                    <li> <a href="#">SALE Jumpsuits & Playsuits</a> </li>
                    <li> <a href="#">SALE Lingerie & Nightwear</a> </li>
                    <li> <a href="#">SALE Loungewear</a> </li>
                    <li> <a href="#">SALE Shoes</a> </li>
                    <li> <a href="#">SALE Skirts</a> </li>
                    <li> <a href="#">SALE Socks & Tights</a> </li>
                    <li> <a href="#">SALE Sunglasses</a> </li>
                    <li> <a href="#">SALE T-shirts & Vests</a> </li>
                    <li> <a href="#">SALE Trainers</a> </li>
                    <li> <a href="#">SALE Trousers & Leggings</a> </li>
                    <li> <a href="#">A-Z of brands</a> </li>
                </ul>
                </diV>

                <diV class="shadow">
                    <h4> SHOP BY EDIT </h4>
                    <ul>


                    <li> <a href="#">Sale under £15</a> </li>
                    <li> <a href="#">Tops under £15</a> </li>
                    <li> <a href="#">Dresses under £20</a> </li>
                    <li> <a href="#">Bottoms under £20r</a> </li>

                    </ul>
                </div>

Responsive Webpage

@media all and (min-width:480px) and (max-width:720px)
{    
    #Main{
        display: none;
    }

.bottom-details
{
background-color:#ddd;
}

.bottom-details .bottom-text
{
    display: flex;
    justify-content: space-between;
    padding: 0px 90px; 
}
 .bottom-details .bottom-text span,
 .bottom-details .bottom-text a
{
    font-size: 12px;
    color:black ;
    opacity: 0.8;
    text-decoration: none;
}

}


.sub-menu{

    display:none ;

    width: 350px;
    height: 0px;
    flex-direction: column;
        position: absolute;

        background-color: white;
        font-size: 0px;

        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

    line-height: 40px;

       margin-left: -100px;
       margin-right: 0px;
       padding: 20px;
       transition: all .5s ease-in .1s;


}
.sub-menu:hover{
   height: 250px;
   font-size: 20px

}
.sub-menu>ul{
    display: flex;


    flex-direction: column;

}
.sub-menu>ul>li{
    text-decoration: none ;
    list-style-type: none;



}
.sub-menu>ul>li>a:hover{
    color: skyblue;


}

.sub-menu>ul>li>a{
    color: transparent;
    text-decoration: none ;
    list-style-type: none;
    font-size: 0px;
    transition: all .6s ease-in .1s;
}
.sub-menu:hover>ul>li>a{
    color: gray;
    font-size: 20px;
    text-decoration: none ;
    list-style-type: none;
}
#nav>div>div:nth-child(3)>div:first-child:hover .sub-menu{

        display: flex;    


}

A long journey is ahead, we have to do lots of things ahead, we have to make lots of mistakes ahead and we have to learn lots of things ahead. This is the beginning..... thank you😊

$$ ........End $$