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…


This content originally appeared on DEV Community and was authored by Anna Villarreal

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!


This content originally appeared on DEV Community and was authored by Anna Villarreal


Print Share Comment Cite Upload Translate Updates
APA

Anna Villarreal | Sciencx (2024-08-21T22:23:27+00:00) Web Graphics Tutorial: Learn by doing!. Retrieved from https://www.scien.cx/2024/08/21/web-graphics-tutorial-learn-by-doing/

MLA
" » Web Graphics Tutorial: Learn by doing!." Anna Villarreal | Sciencx - Wednesday August 21, 2024, https://www.scien.cx/2024/08/21/web-graphics-tutorial-learn-by-doing/
HARVARD
Anna Villarreal | Sciencx Wednesday August 21, 2024 » Web Graphics Tutorial: Learn by doing!., viewed ,<https://www.scien.cx/2024/08/21/web-graphics-tutorial-learn-by-doing/>
VANCOUVER
Anna Villarreal | Sciencx - » Web Graphics Tutorial: Learn by doing!. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/08/21/web-graphics-tutorial-learn-by-doing/
CHICAGO
" » Web Graphics Tutorial: Learn by doing!." Anna Villarreal | Sciencx - Accessed . https://www.scien.cx/2024/08/21/web-graphics-tutorial-learn-by-doing/
IEEE
" » Web Graphics Tutorial: Learn by doing!." Anna Villarreal | Sciencx [Online]. Available: https://www.scien.cx/2024/08/21/web-graphics-tutorial-learn-by-doing/. [Accessed: ]
rf:citation
» Web Graphics Tutorial: Learn by doing! | Anna Villarreal | Sciencx | https://www.scien.cx/2024/08/21/web-graphics-tutorial-learn-by-doing/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.