CSS Art: Practical and Creative illustrations With CSS

Focused View

Pamch Tutor M.Ed

16:37:28

0 View

1 - Introduction

1 - Artistic projects we will create in this course.mp4

07:24

2 - Introduction.mp4

03:54

2 - CSS Properties Needed For This Course

3 - CSS-Art-Intro.zip

3 - Position Relative.mp4

27:52

4 - Position Absolute Part 1.mp4

22:20

5 - Position Absolute Part 2.mp4

07:56

6 - Selectors Part 1.mp4

25:37

7 - Selectors Part 2.mp4

12:56

8 - Creating Variables locally and globally.mp4

12:14

9 - CSS units px rem em.mp4

08:23

10 - CSS units em.mp4

18:10

11 - CSS units vmin vmax vh vw.mp4

14:36

12 - Creating a triangle with border and absolute position.mp4

17:30

13 - Using FLEX to centre an element vertically and horizontally.mp4

03:45

14 - Positioning an element to the centre using margin and absolute position.mp4

18:57

15 - CSS Transform.mp4

19:28

16 - The Art of boxshadow.mp4

06:28

17 - The Art of lineargradient and boxshadow.mp4

11:54

18 - Circular pattern with radial gradient.mp4

08:57

3 - England Flag Art

19 - Styling the England flag.mp4

16:26

19 - england-flag.zip

19 - reset.txt

4 - Laughing Emoji Art

20 - Basic Structure of the Laughing Emoji.mp4

13:31

20 - LaughingEmoji.zip

20 - reset.txt

21 - Styling the eyes and mouth.mp4

19:47

5 - Pepsi Logo

22 - Pepsi.zip

22 - Styling the Pepsi Logo.mp4

14:33

22 - reset.txt

6 - Bahamas Flag

23 - Bahamas.zip

23 - Styling the Bahamas Flag.mp4

14:20

7 - Tik Tok Logo

24 - Basic structure of the Tiktok logo.mp4

13:32

24 - tiktok.zip

25 - Styling the curve at the top.mp4

09:17

26 - Styling the curve at the bottom.mp4

06:23

8 - Duck Art

27 - Basic structure of the duck art.mp4

16:29

27 - duck.zip

27 - reset.txt

28 - Styling the nostril eye duck body and flip feather.mp4

17:42

29 - Styling the feathers.mp4

15:57

30 - Styling the legs.mp4

08:54

9 - WhatsApp Logo

31 - Basic structure of the WhatsApp logo.mp4

14:28

31 - whatsapp.zip

32 - Styling the white triangle.mp4

08:59

33 - Styling the green triangle and the phone icon.mp4

06:06

10 - Bulb On and Off

34 - Basic structure of the bulb.mp4

23:40

34 - bulb.zip

35 - Styling the handle of the bulb and the shade colour.mp4

16:41

36 - Styling the checkbox to give the onoff effect.mp4

12:10

11 - Spinning Fan

37 - Basic structure of the spinning fan.mp4

19:31

37 - fan.zip

38 - Styling the blades of the fan the rod and the base.mp4

16:01

39 - Styling the turn onoff button and animating the fan.mp4

20:01

12 - Popsicles Art

40 - Basic structure of the popsicles.mp4

14:17

40 - popsicles.zip

41 - Styling the popsicles with gradients.mp4

22:07

13 - Gmail Logo

42 - Styling the blue and green part of the logo.mp4

15:35

42 - gmail.zip

43 - Styling the crimson skewed part of the logo.mp4

06:58

14 - Eva from WallE

44 - Basic structure of eva.mp4

09:27

44 - eva.zip

44 - reset.txt

45 - Styling the 2 eyes.mp4

08:40

46 - Styling the body and 2 arms.mp4

15:35

15 - Google Logo

47 - Google.zip

47 - Styling the Google logo.mp4

22:34

47 - reset.txt

16 - South African Flag

48 - Basic structure of the South African flag.mp4

17:33

48 - SouthAfricanFlag.zip

48 - reset.txt

49 - Styling the triangles and the the lines on the flag.mp4

16:50

17 - Uchiha Logo

50 - Styling the Uchiha Logo.mp4

18:35

50 - reset.txt

50 - uchiha.zip

18 - Video Game Pad Art

51 - Basic structure of video game pad.mp4

16:22

51 - reset.txt

51 - video-game-pad.zip

52 - Styling the 2 handles.mp4

14:15

53 - Styling the circle holder.mp4

08:41

54 - Styling the tap button and the direction keys.mp4

20:32

55 - Rotating and translating the direction keys.mp4

13:51

56 - Styling the circle buttons.mp4

09:28

57 - Styling the joysticks.mp4

17:47

58 - Styling the 2 small rectangle buttons.mp4

11:02

59 - Styling the analog and red light.mp4

09:35

19 - Bart Simpson head

60 - Basic structure of Bart Simpson head.mp4

16:32

60 - bart.zip

61 - Styling the hair structure from hair1 to hair6.mp4

22:14

62 - Styling hair7 to hair9 and the forehead.mp4

13:46

63 - Styling the back and the eyebulge.mp4

14:52

64 - Styling the 2 eyes.mp4

14:26

65 - Styling the nose.mp4

15:48

66 - Styling the cheek and the covering of the nose.mp4

10:25

67 - Styling the lip and the lower jaw.mp4

13:40

68 - Styling the neck.mp4

11:35

69 - Styling the round neck and the ear shape.mp4

10:06

70 - Styling the ear linings.mp4

11:31

Description

Explore the creative artistic possibilities of CSS. Bring your artistic ideas to reality using CSS

What You'll Learn?

Use CSS techniques to Design logos of TikTok, Gmail, Pepsi, Google, etc.
Use CSS techniques to Design Eva from Wall-e, Bart Simpsons, video game pad, smiling emoji, South African flag, etc.
Learn how to use linear and radial gradients and shadows to add depth and dimension to your artwork.
Apply CSS properties like transform, border-radius, box-shadow, z-index to create intricate designs.
Learn how to use pseudo-elements (::before and ::after) to add extra layers and details to your drawings.
Understand how to use CSS to control the appearance and structure of HTML elements.

Who is this for?

Anyone who wants to learn how to draw or make illustrations with CSS

What You Need to Know?

Ability to write CSS syntax properly and use CSS properties is a MUST

Text editor such as VS code, Sublime text, Bracket, Notepad++, etc.

More details

Description
Welcome to the CSS Art:Â Practical And Creative illustrations With CSS course.
We will use CSS techniques to design Eva from Wall-e, Bart Simpsons, Video game pad, smiling emoji, South African flag, etc.
Use CSS techniques to Design logos of TikTok, WhatsApp, Gmail, Pepsi, Google, etc.
This course is designed to open up a world of artistic possibilities. If you are eager to explore the intersection of coding and art, or you are looking to add a unique skill set to your CSS repertoire, then this course is for you.
A very important aspect of using CSS to draw is positioning the shapes for alignment. That requires manipulation of the co-ordinates of the shapes. To do that, we often need to set an absolute or relative positioning.
Along with every element we also have the pseudo-elements -Â ::before and ::after as two additional boxes.
You will learn how to use CSS and HTML to create intricate and beautiful artworks. Imagine the satisfaction of seeing your code come to life as vibrant images and designs. This course will help you harness your coding skills in a way you never thought possible.
With CSS techniques, you will be able to create intricate designs and add fine details to your drawings. You'll also learn how to use pseudo-elements to add extra layers and complexity to your art.
You'll learn how to draw a variety of objects. You'll understand how to add clip-path properties, shadows, border-radius, textures, etc to make your drawings more realistic and visually striking.
Throughout the course, you'll work on a series of projects that reinforce what you've learned. These projects will give you hands-on experience and help you build a portfolio of stunning CSS art. Building a portfolio to showcase your CSS art can impress potential clients or employers and open up new career opportunities. If youâ€™re an illustrator, CSS art is a perfect introduction to coding. If youâ€™re a front-end developer, drawing with code is a creative way to become more familiar with the subtleties of CSS.
Don't miss out on this opportunity to combine your passion for art with the power of coding. Enrol in our course today and start your journey towards becoming a CSS artist. Unleash your creativity and create stunning digital art that will amaze and inspire!
Who this course is for:
Anyone who wants to learn how to draw or make illustrations with CSS

User Reviews

Rating

average 0

Total votes0

Focused display

CSS

Pamch Tutor M.Ed

Instructor's Courses

This is Pamch Tutor. A tutoring genius who has been teaching ICT related courses since 2009 in my personal life. I have a Masters Degree in Educational Technology (M.Ed. EdTech). I am dynamic, friendly, creative, flexible and interactive with my teaching profession. Teaching to me is not to pass time, it is what I breathe. I have experience in teaching HTML, CSS, Bootstrap, JavaScript, Python, Microsoft Excel, Scratch animation, etc. Likewise, I train adults one-on-one on how to design websites, handbills, calendars, business cards using Corel Draw. As a trained and experienced teacher I value student's learning modalities;hence, my lessons are driven to meet the student's needs and thus I frame a creative and possibility mentality.Anyone who takes my courses know that with me there is no room for dull moments. All my lessons are exciting, engaging and easy. I simply make it simple because easy does it.Great to have you on board.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.