Background
I recently implemented the frost glass affect and a tilt animation on my website. If you are interested in implementing the glassmporphism, check out my last post: styling on frost glass affect. If you want to see the final live implementation, check out my website (arturocreates.com). In this article, I will walking through how to implement tilt animation, and how to handle the mobile view as well.
JavaScript Implementation
Here are the steps to get this done.
- Download and save vanilla-tilt.js to your project
- Reference the vanilla-title file javascript in your HTML
<script type=”text/javascript” src=”./src/js/vanilla-tilt.js”></script>3. Give your HTML container a class…
Background
Glass morphism is a UI design trend that creates a Frosted Glass aesthetic. It’s been used in Mac and Windows OS, and web and mobile designers have also picked it up. I really like this trend, and when I was first saw it I thought it would be somewhat complicated. But after some research, I found it to be rather simple. After watching a YouTube video, I implemented this design on my website.
These three resources helped me go from beginner, to confidently take on clients as a web developer.
- 1. Paid online course: Zero to Mastery
- 2. Free online resource: W3 Schools
- 3. Paid Book: Don’t Make me Think
Zero to Mastery
The Zero to Master Web Developer course teaches you the fundamentals of web development as well as skills that can help you land a job as a developer. I know their platform and community has grown since I first took the course, so things might be a little different now. I learned HTML, CSS, JavaScript, React, Express, and Node, and I would expect…
If you are working on CSS and want to be able to handle hover on desktop view, but wan’t to avoid any changes on mobile touch, I got you.
I spent too much time trying to figure this out, so I am writing a quick article for anyone who wants to implement this.
Background
In CSS, you can define :hover, which will trigger any styling changes when the user hovers the mouse on the item which you have tagged.
Problem
The problem for me was that it was also registering a hover when a user would touch the component on their phone…
Who This Article is For
If you’re ready to code your first website, this post is for you. In this post, I will focus on HTML, CSS, and JavaScript. I’ll also touch on API’s and Databases. I will talk about what they are used for and go into Static vs Dynamic sites. I will also highlight good resources to learn with (both free and paid options).
What This Article Isn’t
I will not go into coding an example or project. To get experience, it’s best to practice the ideas and concepts covered. …
Who This Article is For
Are you a small business who wants to launch their website and doesn’t have the budget to hire a designer? Maybe you’re an individual who wants to create a website for your personal brand, but doesn’t know how to code.
I wrote this article to help anyone who might not have web design experience, but wants to launch their own website.
There are many applications out there that help you create a website without any coding experience. Wix and Squarespace are among the most popular choices for people.
What This Article Isn’t
I will not be comparing Wix vs Squarespace. If you are interested…
On June 2019, I graduated with a Computer Science degree from UC Santa Cruz. I didn’t have a job lined up, so I went back home and started applying. I wouldn’t consider my path to be traditional one, but I did learn somethings along the way that I’d like to share.
Working while job hunting
Within a couple weeks after graduation, I started working in construction. Before my first day on the job, my boss knew that I was a recent grad and was looking for a job in tech. …
Arturo Lopez
Tech analyst at Accenture. Mobile app and web developer. Passionate about tech and education.
