Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Creative CSS Drawing Course : Make Art With CSS
Highest Rated
Rating: 4.9 out of 5(252 ratings)
3,115 students

Creative CSS Drawing Course : Make Art With CSS

level up your CSS skills by learning how to create more than 30 drawings, shapes and logos using only CSS.
Highest Rated
Created byAhmed Sadek
Last updated 8/2024
English

What you'll learn

  • how to create more than 20 well-known and original illustrations in CSS.
  • take your CSS skills to the next level using different creative approach.
  • how to use your CSS skills in a fun creative way.

Explore related topics

Course content

6 sections • 42 lectures • 6h 26m total length

  • course introduction2:45
  • diamond6:49

    Build a diamond using only CSS borders on four spans inside a diamond div. Rotate the diamond by 45 degrees and refine the border colors to resemble a real diamond.

  • envelope with heart9:42
  • pepsi logo6:47
  • camera11:29

    Learn to build a CSS camera illustration by composing divs for the camera body, lens, flash, and button, and style them with flexbox alignment, circles via border radius, and shadows.

  • coffee mug8:45

    Create a coffee mug illustration using HTML and CSS by layering circles with the box-shadow property, then build the handle with a before pseudo-element and rotate it into place.

  • batman18:46
  • captain america10:44

    Design Captain America's shield logo using nested red, white, and blue circles, centered with flexbox, and form a star in the blue circle with bordered triangles.

  • gear6:11
  • git logo6:49
  • google logo6:37

    Learn to recreate the Google logo in CSS by crafting three colored borders and a blue connector with divs, borders, rotation, border-radius, and z-index to layer the pieces.

  • instagram logo6:05

    Create the Instagram logo using pure HTML and CSS by nesting divs (logo, square, circle, small circle), applying borders, border radius, a radial gradient, and flexbox centering.

  • panda drawing11:01
  • watermelon drawing5:26
  • adidas logo5:36
  • Brackets logo7:05

    Create the brackets logo with CSS by a white box with layered blue shadows for borders, and shape the two brackets inside using before and after pseudo elements.

  • donut drawing11:21
  • figma logo6:38
  • react logo5:20
  • LG logo9:43

    Explore css drawing by building the LG logo from divs, forming the letters L and G on a red circular background with borders and transforms.

  • ice cream drawing11:01

    Create a CSS ice cream illustration using a container div, a stick, and side pieces, with three bite animations and melting parts to reveal negative space.

  • pikachu drawing11:31
  • koala drawing10:12

    Create a koala drawing with simple circles in CSS and HTML, building a head, ears, eyes, nose, and triangular hair using absolute positioning, flex centering, and a red canvas.

  • owl drawing18:02
  • bear drawing9:40

    Create a polar bear head using CSS and HTML by layering divs for the head, ears, eyes, and muzzle, with responsive positioning and z-index to achieve depth.

  • snowman drawing14:48

    Create a playful snowman drawing using HTML and CSS by building the head, body, hat, scarf, eyes, nose, hands, and buttons with positioned divs and shapes.

  • bomber man drawing20:19

Requirements

  • basic CSS skills are required like positioning elements, adding different styles, colors and so on
  • code editor and browser

Description

If you get bored in those regular CSS courses where the instructor just builds web pages and want to try something new that takes your CSS skills to the next level by using different creative approaches, or, if you just want to push all your CSS skills to their limits and learn how to use them to create shapes, drawings, and logos...then this course is for you!

I’m Ahmed Sadek, a full stack web developer and designer with more than 8 years of experience and I wanna welcome you to my Creative CSS Drawing course. This course will help you get the most out of your CSS skills; you will create more than 25 different shapes, logos and drawings. Some of them are complex in ways that are different from web pages, and the methods we’ll use to solve these creative puzzles are also different. That means this course will help you open your mind to things you never knew you could create with CSS, and hopefully, you’ll learn to see more of the fun, imaginative side of CSS in each lesson.

A very important heads-up, though: before taking this course you should have basic knowledge of CSS—things like positioning elements on the screen or adding borders and backgrounds.

The drawings and logos we will create include some well-known items, like the Batman symbol, Captain America’s shield, Homer Simpson, and logos for Adidas, Brackets (the code editor), Git, Google, Instagram, and Pepsi! We’ll even do some original illustrations, like a camera, a donut, a diamond, a panda, and more!

Don’t worry, though. You don't have to watch the lessons in any specific order to be able to follow along. You can just hop around and enjoy the lessons in the order that works best for you.

Who this course is for:

  • Web designers and developers who want to enhance their CSS skills in ways they probably never considered.
  • Anyone who has basic CSS skills and wants to have some fun learning how to illustrate and solve creative problems with CSS.

Report abuse