Adventures in Website Design && Development – 1/25/14

As a practicing and learning Website designer && developer, I come across some Website creation related tools, examples, and demonstrations. When possible, I try to use these tools and examples in my own work. Here now are my current favorite tools and examples and a quick site I’ve been writing.


Spearheaded by Adobe’s open-source development project, Brackets is a free, open-source IDE who’s goal is to “Code the Web”. Written in HTML, CSS, and JavaScript itself, Brackets is the best web IDE I’ve found. If contains pretty much all the features you’d find in other editors, in addition to plenty of extensions available and a unique feature called LiveDevelopment. Currently restricted to Google Chrome (they plan on expanding it to other browsers), it allows you to preview your HTML and CSS changes without having to reload the browser. It’s really cool. I downloaded a nightly build of Chromium (not Google Chrome or Google Chrome Canary, actual Chromium) to use it. 😀 Brackets is currently in beta (known as Sprints) and does contain bugs, but they are not that large or disruptive (unless you hit a doosy 😛 ). New releases cover out roughly every two months, so it’s “like getting presents all year long.” Brackets is available for Windows, Mac OS X, and Linux. If you need a good web editor, Brackets should be your editor of choice.


Grunt (sometimes referred to as Grunt.js) is an open-source JavaScript task runner (or automation system) for writing and maintaining your web project. Written in JavaScript via Node.js, Grunt is fast and cross-platform. While Grunt in itself does nothing, there are of thousands of extensions (called tasks) that it can run. From script linting to minifying to keeping dependencies up-to-date to who knows what, chances are there is a Grunt task (for that 😛 ). If you can’t find a task, why not write it? Plenty of tutorials are available to teach you how. Setting up and initially running Grunt can be daunting with configuring tasks to run even more so (I probably spent about 1.5 hours getting it working with some tasks), Grunt is a seriously powerful yet amazing helpful tool. No matter if you are automating redundant tasks or preparing your code for deployment, Grunt can help. I am currently using Grunt for a few of my projects, and I’ll be making mention of it and a few available tasks in an upcoming post.

The Expressive Web – Beta

I am a big fan and supporter of the new HTML5 and CSS3 improvements coming out, fueled by the mass of mobile devices in use. They reduce the need for plug-ins and addons such as Adobe Flash and Java and overall make the Web and cooler place. However, it can be hard to understand what these new features are and how one might use them. Adobe has put together a site called The Expressive Web that shows off the new technology in small but fun animations, games, and examples. My favorite examples are for the Canvas tag and HTML5 Video. You can easily waste some time clicking around this site. 😛

You should always be learning. You should never stop learning. You should stop only when you die. Now, that does not mean you should be in college your whole life, but you should aim to always learn something new. However, there is another side to that. What you learn you should also use. If you do not use it, you’ll forget it. I have heard countless times how people did well in, say, Algebra in high school and college, but since they did not use it they forget it. As I learn about writing websites and study the best ways to do so, it is important for me to implement what I learn so I do not forget it. Thus I created Hosted using GitHub Pages (so it is a static site unless I set up Jekyll), I am currently using it to display my CSS3 animation entitled “Not Pong” (even the ball is CSS) in addition to a small browser detector plugin (not written by me 😛 ), with the results displayed using a CSS3 transition. The page contents (viewable by clicking the link in the top left) is pretty boring right now and needs a lot of work, but I’m currently too busy with other stuff to fix it. 😛 I recommend viewing the Browser Compatibility chart to ensure the animation plans. Perhaps someday I will expand this to be my own website written by me, but for now it will continue to be a place to practice the skills I am learning. 🙂

You’ve reached the end of the first installment of Adventures in Website Design && Development! Come back next time to learn more about my adventures of there and back again as a learning Website designer and developer! 😀



2 thoughts on “Adventures in Website Design && Development – 1/25/14

    1. You’re welcome Brick! 😀 I did not say this in the post (oddly), but I use Brackets myself and have found it to be a great tool. You should it when writing your Online Desktop. Trust me, it’ll help a ton. 😉

Comments are closed.