As part of my tech research, I stumbled upon Free Frontend. A curated collection of free hand-picked HTML, CSS and JavaScript (jQuery, React, Vue) code examples, tutorials and articles.
Subject & Objectives
I recently developed a small one pager, with a simple HTML5, CSS3 and vanilla JS combination. As I presented it, I was suggested some UI modifications, that I still have to implement at this very moment.
So this is the perfect occasion: try to fit what I find on free frontend on this project.
The goal is to make the website look like the one on the cover picture, while trying to find useful features on Free Frontend.
For reference, the website looks like this for the time being:
Expected results
I think I’ll find most of what I need for the animations and the “About” card that has to be implemented. I’ll probably have to clean up the code to take only the bits and pieces useful for my project, as it’s never short, clean snippets as you could find on code drops.
What I did
I started by adjusting the layout and CSS to what I was asked, and it became something pretty similar.
I now have to add some animations to the buttons and a card that pops up when I click on the “About”(A propos) button.
I should look like something like this:
As I said, I’m going to try and find some useful features on Free Frontend. On the homepage, the website presents a list of links to the latest articles and tutorials, as well as a menu of different technologies.
I chose the CSS link, and scrolls to the “Essentials” section. I then looked through different lists of ‘cards’ elements and found one somewhat similar to what I was looking for.
I now find myself on a CodePen page, with about a hundred of line of CSS. Looks way easier to do than I first thought. I’ll still have to adapt everything to my project. Time to get my hands dirty !
Actual results
After very little tweaking, I managed to make the website look like the one on the cover picture. I found it really easy to implement this card feature, even tho I had to polish it to make it look part of my website design.
While looking, I found lots of other cool features, like [awesome logout buttons] I can’t wait to try and implement in the future. Free Frontend is a goldmine in terms of fun and useful frontend interactions. I really love it, because it helps me imagine features that I would never have thought of without it.
Conclusion
I think Free Frontend is a great resource for frontend developers, and I’m looking forward to trying it out on more projects.
It really helped me implement the feature I needed fairly quickly, and I even learned some things while at it.
On the other hand, it may have been overkill for this project. But I’m pretty sure that would be great to use this tool as innspiration for the UI, over using it as a fix mid project.
