CSS Art: Creatively Craft illustrations With CSS

Focused View

Pamch Tutor M.Ed

22:04:03

0 View

1. Introduction

1. Introduction to the projects to be created.mp4

04:48

2. The resources are all available for download.mp4

00:42

2. Valuable CSS Properties For This Course

1.1 CSS Art Intro.zip

1. Position Relative.mp4

27:52

2. Position Absolute - Part 1.mp4

22:20

3. Position Absolute - Part 2.mp4

07:56

4. Selectors - Part 1.mp4

25:37

5. Selectors - Part 2.mp4

12:55

6. Creating Variables locally and globally..mp4

12:14

7. CSS units - px rem em.mp4

08:23

8. CSS units - em %.mp4

18:10

9. CSS units - vmin vmax vh vw.mp4

14:36

10. Creating a triangle with border and absolute position.mp4

17:30

11. Using FLEX to centre an element vertically and horizontally.mp4

03:45

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

18:56

13. CSS Transform.mp4

19:27

3. Box-shadow and Gradient Art

1. The Art of box-shadow.mp4

06:28

2. The Art of linear-gradient and box-shadow.mp4

11:54

3. Circular pattern with radial gradient.mp4

08:57

4. Android Art

1.1 Android.zip

1. Basic Structure of the Android Art.mp4

12:07

2. Styling the head and eyes of the android.mp4

19:37

3. Styling the antenna and the body.mp4

13:12

4. Styling the legs and arms.mp4

18:16

5. Stairs Art

1.1 Stairs Art.zip

1. Basic Structure of the Stairs Art.mp4

07:33

2. Styling the first 4 stairs.mp4

14:35

3. Styling the last 3 stairs.mp4

14:11

6. Bear face Art

1.1 bear-face.zip

1. Basic Structure of the bear face Art.mp4

10:03

2. Styling the head, ears and eyes.mp4

15:54

3. Styling the nose and smile.mp4

16:24

4. Styling the top hair.mp4

19:07

7. Pot Plant Art

1.1 pot-plant.zip

1. Basic Structure of the pot plant Art.mp4

05:41

2. Styling the leaves.mp4

23:25

3. Styling the vase.mp4

17:54

8. Instagram Logo

1.1 instagram.zip

1. Basic Structure of the Instagram logo.mp4

16:12

2. Styling the inner white parts.mp4

12:09

9. Bottle Art

1.1 bottle.zip

1. Basic Structure of the bottle Art.mp4

13:06

2. Styling the upper part and the shade color.mp4

14:56

10. Captain America Shield

1.1 captain-america.zip

1. Basic Structure of the captain America shield.mp4

06:46

2. 2. Styling the 2 other circles and one triangle.mp4

13:21

3. Finishing up the star.mp4

15:24

11. Dribbble logo

1.1 dribbble.zip

1. Basic Structure of the Dribbble logo.mp4

17:35

2. Finishing up the other 2 lines.mp4

06:31

12. Orange drink with orange fruit

1.1 orange-drink-fruit.zip

1. Basic Structure of the Art.mp4

17:02

2. Styling the leaves.mp4

12:06

3. Styling the orange.mp4

14:55

4. Styling the glass cup.mp4

20:26

5. Styling the liquid and the shiny part.mp4

09:15

13. Aeroplane Art

1.1 aeroplane.zip

1. Basic Structure of the aeroplane Art.mp4

09:09

2. Styling the wings of the plane.mp4

14:35

3. Styling the plane body, nose and screen.mp4

11:29

4. Styling the turbines and tail.mp4

16:29

5. Styling the tyres.mp4

09:03

14. Netflix logo

1.1 Netflix.zip

1. Basic Structure of the Netflix logo.mp4

13:55

2. Styling the parts of the N.mp4

16:44

15. Car Art

1.1 car.zip

1. Basic Structure of the car.mp4

08:06

2. Styling the screen and head rest.mp4

19:15

3. Styling the side mirror and front view.mp4

16:31

4. Styling the bumper and the tyres.mp4

14:18

16. Heart

1.1 heart.zip

1. Basic Structure of the heart.mp4

06:49

2. The curved shapes to complete the heart.mp4

10:48

17. Iron Man Mask Art

1.1 iron-man-mask.zip

1. Basic Structure of the Iron man mask Art.mp4

07:13

2. Understanding Clip-path polygon - Part 1.mp4

23:32

3. Understanding Clip-path polygon - Part 2.mp4

18:02

4. Red outer part of the mask.mp4

22:24

5. Red curved top on the mask.mp4

06:11

6. Yellow inner part of the mask.mp4

11:55

7. Red front layer of the mask.mp4

09:33

8. The segment of the mask.mp4

08:34

9. The eyes of the mask.mp4

15:12

18. Apple fruit Art

1.1 apple.zip

1. Basic Structure of the apple.mp4

06:38

2. Styling the apple and the inner circles.mp4

16:10

3. 2. Styling the leaf and the wood.mp4

09:17

19. Sublime Text logo

1.1 sublime.zip

1. Styling the Sublime Text logo.mp4

15:07

20. Cat face

1.1 cat-face.zip

1.2 reset.txt

1. Basic Structure of the cat face.mp4

11:02

2. ears of the cat.mp4

09:55

3. eyes and nose of the cat.mp4

11:11

4. whiskers of the cat.mp4

11:51

21. Mickey Mouse Face

1.1 mickey-mouse.zip

1.2 reset.txt

1. Basic Structure of the mickey mouse.mp4

17:01

2. Styling the face.mp4

11:59

3. Styling the cheeks and black eyes.mp4

10:57

4. Styling the inner white eyes and nose.mp4

18:46

22. Figma logo

1.1 figma.zip

1.2 reset.txt

1. Basic Structure of the Figma logo.mp4

13:34

2. Adding the other 2 elements of the logo.mp4

07:57

23. Piano art

1.1 piano.zip

1. Styling the body and keys of the piano.mp4

16:00

24. React Logo

1.1 react.zip

1.2 reset.txt

1. Styling the React Logo.mp4

09:05

25. Anchor art

1.1 anchor.zip

1.2 reset.txt

1. Styling the anchor head and shank.mp4

12:33

2. Styling the hooks.mp4

13:02

26. Nike logo

1.1 Nike.zip

1. Basic Structure of the Nike logo.mp4

13:05

27. Santa Art

1.1 reset.txt

1.2 santa.zip

1. Basic Structure of the santas head and eyes.mp4

14:05

2. Styling the ears and moustache.mp4

09:32

3. Styling the beard.mp4

15:09

4. Styling the mouth and hair.mp4

10:16

5. Styling all the parts of the cap.mp4

14:17

28. Ice cream with Cone Art

1.1 Ice-cream-cone.zip

1. Basic Structure of the Ice cream cone Art.mp4

13:33

2. Styling the diagonal lines on the cone and styling the white border.mp4

14:23

3. Styling the top of the cone and the orange ice cream.mp4

20:19

4. Styling the stick.mp4

10:02

5. Styling the strawberry.mp4

17:51

6. Styling the pink ice cream and the cookie.mp4

19:26

Description

Express your artistic creativity in drawing of objects using CSS. Use CSS to open up a world of artistic possibilities.

What You'll Learn?

Use CSS techniques to design animals faces, fruits, plants, car, Iron man mask, etc
Use CSS techniques to Design logos of Netflix, Figma, Android, Instagram, etc
Understand the importance of positioning (relative and absolute) in creating CSS art.
Understand how to use CSS to control the appearance and structure of HTML elements.
Learn how to use pseudo-elements (::before and ::after) to add extra layers and details to your drawings.
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.

Who is this for?

Anyone who wants to explore the artistic side of CSS

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

What You Need to Know?

Adequate knowledge of HTML and CSS is NECESSARY

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
Are you ready to discover a new way to express your creativity? Do you want to transform your CSS skills into a powerful tool for creating stunning art? If so, our course on CSS Art: Creatively Craft illustrations With CSS is perfect for you.
We will use CSS techniques to design animal's face, fruits, plant, car, Iron man mask, Santa, ice cream etc.
Use CSS techniques to Design logos of Netflix, Figma, Android, Instagram, Nike, etc.
You will understand how Position Relative and Absolute really works behind the scene.
This course is designed to open up a world of artistic possibilities with CSS. 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 explore the artistic side of CSS
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.