Little Lessons to Flourish your Web Skills

Since starting this blog a whole lot of learning has gone underway in order to develop hybrid web design /development skills. Learning languages:

  • HTML
  • CSS
  • SASS
  • Javascript
  • PHP
  • WordPress ( Yes not a language, but being key to creating sites for customers, it may as well be!)

Somehow these all merge together to create beautiful, functional web pages!

Coming from some programming experience, it didn’t take long to get building didn’t to get my teeth sunk into my first project. I have treehouse to thank for making such a steep learning curve feel achievable. Although I still have a very tall mountain to climb, I have released my first small project to the world — Charles Photography.

Charles Photography

This project is a working progress, made for my father so he can publish his photos and eventually sell them for donations to charity. I plan to continue to develop and add to as I learn, so keep returning to it to see as it develops.

There are many things the process of making this has taught me, vital to consider when making modern responsive websites. I will try and summarise some of these.

Design for mobile first then scale up. This is always much easier as you can always add content but it can be harder to remove it

Always use -webkit- and -ms- when using css transforms. Not doing the meant when I first uploaded the site, many of the hexagon graphics failed to work on most devices, resulting in have to run through all my css to find the bugs, an easy fix if done in the first place.

Design first then code. Having no design template to work to, the design of the site has been limited to my patience adjusting padding, margins … until I move onto something else. Having a goal to work towards is much easier and reduces time wasted umming and ahhhing over where things should go.

Get the page looking right first before adding any javascript or fancy css. It was very easy to get bogged down with some particular animation in my head, although it makes little effect on the websites total progress. These features should be left until the end. This was however how I learnt at least some javascript, so as an exercise was fine in this instance.

Pre-processing languages are great! Discovering SA SS one afternoon changed my attitude to css and has encourage me to develop more of my design skills, moving away from my development background. Using first code kit and now just compass in the terminal to compile, I was able to write css at a much faster and much more logically. Using this is a must for any web developer.

The chrome screen app does not give an accurate representation of what your page looks like on other devices. Relying solely on this to see my web pages across different platforms, I soon found it was not an accurate representation of what it really looked like. I still haven’t found the best work around for this but having the site now on the web, browser-stack has been useful in giving a better representation of the sites image (but yes I did need to mask my IP address to use it for more than 100 screenshots).

Atom is awesome. Swapping from sublime, I am never going back. Spending time supercharging my atom text editor has given me loads of useful tools that help me code quicker and more accurately.- Thanks atom!

Make an App — I haven’t seen many posts elsewhere on the net to do this , but the automator tool on OSX is very useful indeed. Having experience using it from making a media server way back, I thought it would be useful to make an app that in one click MAMP, compass and my project in atom are all loaded up. Super fast, super cool — Whacking a nice GUI on this may be a good app idea for the future.

To Conclude…

I plan on writing a subsequent post talking through how I built the Charles Photography. I am now embarking on a new project, a complete rebuild of Parity’s website. This is a charity doing some fantastic work with the mentally and physically handicapped. I hope to spark some life into the site helping to promote all the charity’s great work. I want to write a series of posts as I make this site. Watch this space…

Thanks for reading!

Elvinos (Aka Alex)

Like this:

Like Loading…

Originally published at on August 26, 2015.