Launching My First Project!

Hey fresh eyes stepping into the technical world along me. Welcome to the insights about my very first project which is not exactly a project. Umm, Let me clarify, This is a non-responsive, purely HTML & CSS based clone of the Amazon.com website. This is very basic,right? But, lets keep it real we all start from zero and no one becomes a “Full Stack Developer” overnight. And I wanted to document this journey from the very begining, So here I am. Buckle Up and come along!

Backtracking

From where did I gather up the skills I have? Yes, from our very own home university “Youtube” . I followed the Apna College playlist, they have nicely structured videos of HTML and CSS. Furthermore, I loved to explore the rest of the topic through MDN Documentations, thier Try It Out! sections were kinda addictive and fun to learn with. Alongside all this was just actual implementation, that’s the important part!

Addressing the "How?"

All the elements combined in the Amazon website look mesmerizing. Let’s try to replicate that brick by brick.

Navbar → That nicely equipped navigation bar you see has a lot going on. For me aligning everything up using flex properties for the first time was the trickiest part. It contains:

• The Amazon logo as a background image with the cover attribute.

• The input field as a search bar with a placeholder and a dropdown menu.

• A few more redirects and dropdowns.

• Also added the hover effects on each of these options.

    .locate:hover,.logo:hover,.lang:hover,.sign:hover,.return:hover,.cart:hover
    {
         border:1.2px solid white;
    }
  

Hero Image → The orange coloured image that blends into the grey background is the highlight of this section. Though its not that smooth but it was definitely the most intriguing part. I have styled it using linear gradient property, flex properties and appropriate margins. Go ahead and try it!

.hero
{
     background-image: linear-gradient(to top,  #e3e6e6,transparent 60%),url("hero.jpg");
     width: 94%;
     height: 650px;
     display: flex;
     align-items: flex-end ;
     justify-content: center;
     margin-left: 50px;
     margin-right: 50px;
     background-size: contain;
     background-repeat: no-repeat;
}

Shopping Boxes → The structured boxes arrangement placed at top of the transparency effect was challenging yet fun. I used flex-wrap and a negative top margin to achieve it, as listed below:

.outerbox
{
 height: 2080px;
 width: 94%; 
 display: flex;
 flex-wrap: wrap;
 justify-content: space-evenly;
 margin-top: -370px;
 margin-left: 50px;
}

Added a few more shoping boxes here and there.

• Top Picks for India: An elongated box having 10 images flex wrapped in a single line.

• Sale Box: I breaked the monotony here and styled it a bit differently. By playing around with dimensions and number and size of images placed.

Footer → I have placed four panels in the footer section. Let’s dig around the main areas.

• Pannel-2: This has a collection of four columns. The columns are placed one after the other using properties as listed:

 display: flex;
 align-items: flex-start;
 justify-content: space-evenly;

• Rest of the panels consist of centred content such as ‘Back to Top’ redirect, copyright section and the logo image to make it as realistic as possible.

That's it, This brings us to the end of the page.

The Toolkit

Being a newbie I was discovering tools and references one uses to end up with projects like these. Thereby, I have used

the tools below to assemble it all up.

• For the icons used throughout the website like the location, search and menu option, I have used the font-awesome website.

• For the colors used in different panels, navigation bar etc, I have used the coolors website. It has a vast collection of complementary colors. Also, by directly inspecting the Amazon website.

• For certain debugging sessions, the stackOverflow website was really helpful.

What’s next?

The road ahead will consist of many things to do as this was just a stepping stone. It would include:

• Making it responsive for mobile and other devices users.

• Adding functionality to the pages using Javascript.

• Backend support using Django.

• Adding more pages to make it a full fledged website.

For the detailed code visit my github repository: Click Here!

Phew! That was a lot too handle. I’m glad you reached the end. Thank you for reading and stay tuned for my next update which would be on ‘Learning Javascript’.

Hoping to see you in the next one!

~JasDoIt