DEV Community

Cover image for Web Graphics Tutorial: Learn by doing!
Anna Villarreal
Anna Villarreal

Posted on

Web Graphics Tutorial: Learn by doing!

Alright guys. I created a simple guide today on how to use clip-paths, svgs, and loops and arrays to create some fun and exciting front end stuff. I made this with basic html/css/javascript so it should be easy for everyone to understand, even if front end is not your thing.

This is my first go at a tutorial-format website. By making a tutorial I also got to brush up on basic skills. You can view the full website here.

tutorial website



It's exciting to be able to hop on the code editor and buzz along without too much googling.

star clip path

I had a lot of fun making this and I hope you like it as much as I do!

I felt like clip-paths and svgs had many uses in common in a broader sense and I wanted to investigate. A comparison of when to use svg vs clip path is below!

data table


And lastly, on the arrays page we come to see that the possibilities are really endless.

animation

Let me know what you think! There may be some imperfections and redundancies, but it's working. Right now that's what's important to me!

Top comments (0)