DEV Community

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

Posted on

1

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!

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay