Firstly, let me answer some questions…
Where’d I go since my last post?
As mentioned in my previous article, these are the only three languages our browsers understand. So isn’t it fair that we too understand them thoroughly?
Why this article?
A couple of days ago I decided to build several fairly basic web development elements like menus, sliders, etc and explain my code and the thought process in my articles here. I plan to do this on Codepen, a platform designed perfectly for front-end development practice and showcase. But before jumping into the code it would be sensible if I explained why I’m choosing Codepen as the platform to work on, and why you should too.
So what is Codepen?
At CodePen.io, they describe themselves as a
“social development environment for front-end designers and developers”.
Here are 5 reasons why you should start making use of this service (and why I have)
1) A Hassle-free and Quick Coding Experience
I love how easy it is to start off with Codepen. With absolutely no need of setting up a development environment, running servers for live previews or even creating the HTML, CSS and Js files (Yes I’m pretty lazy) Codepen offers the fastest way to get started on a new idea or concept you’ve been thinking about. Other than the fact that creating pens is fairly easy, the development process and the workflow is really smooth and pleasing.
2) Highly Customizable Editor
The editor offers high customizability options and can provide various development workflows.
The Codepen editor offers a number of view for your pens. These include
- Editor view
- Details view
- Full page
- Debugging mode(And much more if you purchase the pro membership.)
Other than that the Settings tab offers great customizability options.
If you don’t know what any of that means, it doesn’t matter really, not when you’re just starting out and focusing on the basics.
Other than that external CSS or js files can also be referenced in your pens.
3) Showing off your skills and experience
Codepen has a really large community you can show off your skills to. Having an impressive Codepen profile can speak tons about your skills and experience in the web development community.
Think about it as a development portfolio where you can display coding skills to anyone who’s interested.
Blogging is a new feature on CodePen, allowing you to easily write about code just like on a regular blog. You can write with Markdown, and use a special embedding tool to embed your pen when you need to. You can add custom CSS to your posts, and there is a super simple preview to test out your post. This was a really great news for me because it meant I could reuse my articles here on Geekfell in my Codepen profile *winks*
As I’ve mentioned before, Codepen has a massive community of really talented and creative developers. Inspiration on almost anything you wanna build can be found within seconds. You can follow people’s collections and projects and can even edit their pens (on your browser client) to know the ins and outs of their code
In the end, I’d like to say that every developer out there must be using this resource to the maximum extent. Whether you feel like coding something new, learning by browsing pens from others or just want to experiment with new frameworks and tools, Codepen is the perfect tool for you.
I’ll be starting my series on building the basic components of a website/webapps under this section (soon, I hope). So stay tuned for any updates.