Building things (NEF & Freeformers workshop)

Last month we had a 1 day NEF workshop on the basics of web development and all things coding! The day was put on for us by an outside agency called Free:Formers (http://www.freeformers.com) and hosted at CCT Venues in Farringdon.

The purpose of the day was simple, to give a crash course in coding, how the web and websites work, look at mobile and responsive design, and have a go at developing a mobile app ourselves. This was a good idea and a great complement to our learning programme. While I’ve done plenty of web design previously myself, my knowledge is self-taught and basic in my opinion. It’s always good to hear it re-iterated and from a different source, plus I also wanted to learn more about mobile apps, which are an area I’ve not played in before.

Some of the objectives for the day:

Understand how the web works

Look at how the web has changed – trends

What is out there

Cut through the mass of information and get to the 10% I need

Summary of the day’s agenda:

Build a basic web page for a (hypothetical) product launch event

Make the launch page slick and mobile-ready

Add ticket booking and commenting facilities through plug-ins, and look at ways to market and make the webpage viral

The day was good fun, the presenters were very energetic and a good laugh and I enjoyed learning more about apps and the different types (native versus hybrid) which are out there. The exercises we did made use of a couple of online facilities for making web publishing easy and simple for beginners (or developers alike), including JSBin.com, and also the Bootstrap framework. Both of which I’d not used before, previously I’ve done all my web design in basic HTML, CSS, a bit of PHP, and all on Adobe Dreamweaver.

Some of my (rather disjointed) notes below:

Using JSBin.com (open source software) – gives a great user interface for coding up web pages

“The web is made of boxes – sites are built up of an arrangement of boxes (HTML elements etc.) – only now they move!” (Responsive Mobile design)

On the FireFox Inspector tool – there is an awesome 3D visualisation of these ‘boxes’ – click on the 3D icon…

‘Bootstrap’ is a “mobile-first” front-end framework for faster and easier web development. Developed by Twitter and made OpenSource. Changes page layout to a 12-column format – http://www.getbootstrap.com