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