The Dramatic Past

A always loved to draw picture , a cat , a buffalo , a phone and all sorts of other stuff. I drew and drew until one day, when my teacher way gave an expression of excitement after looking at my drawing. She gave me this grade.

After 5 years of not drawing anymore 5

Again, after 5 years I took my pencil to draw an iPhone , but waaaait. I suck at drawing. What can i do . Program it

CANVAS

The internet is going to be my next canvas . There are many tools such as SVG, ICONS, THREE.JS, GSAP....etc that help you get this job done. But what's our speciality ? So, I started using only CSS and HTML to draw graphics on a website. I made this phone ( comment if you like it). Just have a look

Every diagram can be broken down into shapes for instance let's take the phone I made. The Outer case is a rectangle with border-radius. Even the inner screen is the same. The fingerprint thingy was made by making circle and then giving it a think border ( same colour as the outer case ), This gives the required look. The volume buttons are rectangles with border radius on only the left side of their length. The camera is black circle with dark grey border that gives it the feel. You do not need advanced JavaScript APIs, libraries or C++, C, Python Turtle, Java all those for graphic designing. Common designing and applying are the two basic features of designing a perfect graphic.

STEPS OF SUCCEESS

In the hyperplexed way. Break bigger anxieties into smaller anxieties and conquer them .Sir if you are reading this, I am a big fan of yours . Now the anxieties_(I mean steps)_:

STEP 1: Design using shapes in figma

STEP 2: Assign a div for everything

STEP 3: Position them using z-index

STEP 4: Give them some colour

STEP 5: Share the design

MISTAKES

If you don't make the following mistakes, your good to go

1) Setting position fixed
2) Giving equal z-index
3) Not having a container
4) Not knowing about margins, paddings, z-index & border-radius

Now that you know how to create a design here is a challenge from Mince

CHALLENGE

The challenge is to create a snowman only using CSS & HTML in CODEPEN and post the link in comments. Best snowman gets a shout out !

I am very happy because of the enormous support from you guys, I got 400+ followers of only 4 posts.

OK, NOW COMPLETE THE CHALLENGE !

Check out my website guys: Citeal

#css #design #new #webdev #dev.to #codepen