Addition to your bookmarks!

Hello!

On this blog, I am gonna share references that I have used or have been using for the past year starting from the time I learned and loved web development.

First up!

FreeCodeCamp

As the name suggests it is a website that lets you learn how to code for free. FreeCodeCamp is a donor-supported tax-exempt nonprofit organization. You can sign up through any of your email address, Github account, google account, or your Facebook account.

This is where I started learning how to code and got through a couple of hundred hours of self-paced lessons until I decided to attend an online school for Software Engineering. An ample amount of lessons on their curriculum to cover basic knowledge about HTML, CSS, JavaScript, React, Redux and etc. I kept it on my bookmarked pages since I feel like this will be a useful tool as a refresher if I need one.

Next!

CodePen

One of my favorite resources I use! I love styling, and this is where I practice my CSS and HTML styling skills. I learned about this website through freeCodeCamp when the module I was on was about making responsive web design. I got to make a mock portfolio, a couple of other projects and fell in love with this website. You can check out other developer's work and see how they built theirs. You can also fork their work and try to tinker with it and learn from them. There is a lot of variety of materials to learn and see. There are games, pure CSS projects, 3D, and many more!

Now, let's go to the third on the list!

CSS-Tricks

Stumble upon this gem when I was looking for more explanation on something I was working on in a project. Like other websites, they have an almanac for terms you need to know and it will show you the syntax too. UI is pretty cool and they also have guest authors so articles are new and updating. There are videos and the founder is active on social media as well.

Number 4!

Boxy-SVG

Ahhh. Yes. SVG photos. What is SVG? It's Scalable Vector Graphics. More details on that here. I have encountered SVG photos recently and it blew my mind that I don't need photoshop to edit these photos. I love vector images. Now knowing I can personalize them makes it even better thanks to Boxy-SVG. Using this program, you can edit everything! I played around with one of their demos and look!

Clearly I had fun on text edit :)

Next!

CSS Diner

Somewhat similar to Flexbox Froggy where you learn to maneuver with flexbox by controlling the froggy, or just like Grid Garden, where you learn about grids by watering the carrots. But with this app, it's about learning the basics of CSS selectors by picking up items on the table! And it has 32 levels! Got some sleek but adorable UI and is fun to play. So if you need a short but fun refresher on CSS, maybe add all of these to your list too!

Next up!

Animista

Yes, yes, yes animations! One of my recent discoveries to date. Animista is founded and built by a UI Designer & Front-End Developer, Ms.Ana Travas, which started with just being a side-project. She made this website to be accessible to anyone who wants to play around CSS animations and organize them enough to be reusable to different types of projects.

It's a great tool to experiment with animations, transitions and etc. Tweak it and grab what you need! You can animate texts, 2D boxes or shapes, pyramids, 3D cubes, gradient backgrounds, attention seeker animations and etc. They are open to feedback if you have used this on any of your projects too! Go on, add this to your bookmarks!

So there you have it! I hope this helps anyone that is looking for any front-end or coding related resources and anyone interested to update their bookmark collection for references to study or use as a reviewer because these sure helped me!

Thank you for your time!