Tag Archives: CSS

HTML5 Responsive Website with Brackets

Posted on by

For tutorial workshop files go to my DropBox. To see a live sample.

Designing a responsive website could be a challenge if you don’t have the right tools. There are many tools around which you can use, web apps that you need to subscribe and most of the time hosting websites with them, otherwise, you cannot use this tools.

As many of you know, I am a faithful evangelist for open source, and before a schedule a new project I look around to see any OS source that would help me accomplish this task.

Then I found Brackets, and amazing open source project from Adobe®, yeap!!!! You read it right, Adobe® is hosting another open source project and this time they hit a home run with Brackets.

It has to key features that I consider being essential, specially when you are laying out a website. This features are LIVE PREVIEW and CSS LIVE HIGHTLIGHT. Allowing you to save a lot of time in the process of styling and refreshing your project in your localhost to see if you style react and act as you are expecting. With LIVE PREVIEW you can see instantaneously the changes in your browser as you code.

Here I demonstrating techniques that allow you to create your responsive website with ease, thanks to Brackets.

Happy coding, Happy Designing…. Enjoy!

Laying Out a Website with Inkscape

Posted on by

The other day I decided to revamp my website but with the slightly difference that in my house I have a Linux Unit with Ubuntu 13.12. So I don’t have the option of any Adobe brand product, first because I want to proof that open source rocks, so I give Inkscape™ a try, my favorite open source application.

Along with Inkscape in this tutorial I use another favorite one, Netbeans™ as my IDE to develop and code the tutorial test website, which I call “poolweb” not knowing that there is a poolweb.com website… Awkward. So it goes, free advertisement.

Also this video was recorded and edited with open source software. Record My Desktop™ and Openshot™. The music credit goes to Doorwatcher from iStockPhoto.com. Thank you so much for the calming and relaxing tune.

With these two powerful tools, Inkscape and Netbeans, you will be amaze on how easy is to conceptualized, design and develop a website with them. It took me around an hour because is kind of hard to talk and think at the same time. But I hope you enjoy this tutorial.

Happy designing and coding!