Pure CSS Images

The course I am taking, to help me broaden my CSS skills.

James Kerrane
James Kerrane
2 min readJul 3, 2017

--

Do you ever see those images on the front page of CodePen? Boasting that they are completely created with only CSS?

See this one?

I always wanted to make those. Not just because of the fun while doing it, but also the practical uses that comes with it. With a pure CSS image, I can make a loading screen, interesting background, animated button image (when using vue.js), and more! So where do I start?

I started searching, and I came across this free course by Mike Mangialardi called “How to Make Pure CSS Images to Progress With Design-Focused Frontend Development”.

Course promo art.

I started the course, and Michael Mangialardi taught me through video tutorials, with helpful examples along the way. The first project, creating a CSS elephant, taught me how to use pug, vue.js, and helped deepen my understanding with CSS.

My First Project (Guided)
My Second Project (Guided)
Final Project (Not Guided)

The course, I would highly recommend for newcomers to CSS. It took me along slow enough that I learned the material, but it didn’t drag on. Another plus about this course is (as I’m writing this), it is completely free! If you want to broaden your scope with CSS, you should definitely check it out!

If you liked this article, please 👏 below, so that other people can find it! :D

--

--