How i completed my first web dev challenge

June 5, 2018

4801

Last week, while scrolling up Instagram feeds, I found a web development challenge by @thecodingsultan

Then I go through his post and found interesting. The challenge was not difficult to attend. My mind said to give it a shot. I thought it would improve my web design and web development skills.

So I fired up my Visual Studio code, an opensource code editor by Microsoft along with some plugins.

vs code

Color Highlighter – highlights colors in the document

Github – Integrates GitHub and its workflows into vs code

Dracula theme – A dark theme for vs code

live server – Launch a development local Server with live reload feature for static & dynamic pages

After firing up vs code, I headed towards downloading mockup and asset files from thecodingsultan’s linktr.ee site. The files are images, sketch design and a png version of sketch design, fonts from dropbox link.

First thing I marched is to create two div tags. I was clear and fixed to create that pinkred (as per the codingsultan readme file) object. So I created two div tags. One for placing the image and one for creating the skewed rectangle.

HTML:

<div class="bg">
</div>

<div class="rectangle">
</div>

CSS:

.rectangle
{
position: absolute;
max-width: 65%;
max-height: 100%;
height: 100%;
width: 65%;
background-color: #DB5461;
}

At first sight, I don’t know how I’m going to do a cut in the rectangle. My creepy little mind told me to make an image with a cut.S that it would be perfectly paced. Then when I realized that it won’t help me out in learning new things.

ALSO READ Bill gates Quotes for Success

But, I calmed my mind and shot my search engine and started with random keywords including “rectangle CSS”.I don’t get any satisfactory result. Then the man who is responsible for this web development challenge again helped me with a hint in his comment for another developer. The comment has a keyword called “skewed rectangle”.I searched with his hint and then I found out the solution with ease.

next thing I want to do is to fix the rectangle, oh now its skewed rectangle 🙂 in a perfect position. To do it I moved the rectangle with left CSS property, now the rectangle division was perfectly affixed.

/* Rectangle with skewed effect and perfectly positioned */
.rectanlge 
{
position: absolute;
left: -130px;
max-width: 65%;
max-height: 100%;
height: 100%;
width: 65%;
background-color: #DB5461;
-ms-transform: skewX(15deg);
-webkit-transform: skewX(15deg);
transform: skewX(15deg);
}

Its time for placing the image, It wasn’t a tough thing to do. But where I stuck is I used both width and height as 100% as CSS value. So it wasn’t perfectly placed. Then a developer suggested me to remove width property in a slack group.

Up to this section, all things were gone smoothly. The main problem arose when I started adding logos and navigation bars. Everything was just in right place, I don’t know how to make layers forward and backwards.

Then I started searching for it and found a new CSS attribute called z-index. Which helps us to stack elements. The elements having higher z-index value will be moved to the front than elements having lower z-index value.