This is a walkthrough tutorial, with code examples on how to build this one-page website that you will be able to customise with a text-editor. I’ll also talk you through buying a domain name (http://example.com), web-hosting (where your website is stored), how to point yout domain to your web-host and upload your website.
I’ll make this as easy as I can and will assume you have no previous coding experience. You might want to bookmark this page because it’s quite long.
Ready? Let’s go.
Before you start building your website, you should have a clear vision of what you want on your website and how you want it to look. You can sketch something on a napkin or make it pretty in Photoshop. Either way, it’s a lot harder without some direction.
SweatRoulette.com has been making headlines in The Mercury newspaper, available to read online and in print.
It’s crazy to think that this idea was only thought up last week and a crude prototype was only developed last Sunday. The website has been updated with more functionality since it’s launch such as giving you a rest period after each workout, a round counter which tells you how many rounds you completed with a dynamic link to share your achievement on Twitter.
A big shoutout to TeamTreehouse.com, I’ve learned so much from these guys. It’s definitely one of the best places online to learn how to code (amongst a load of other useful things). If you want to take yourself to the next level, give it a try with 50% off your first month.
Code Lab, formerly called Code Club, Coders Collective, Munch ‘n’ Crunch, etc… is something that I’ve wanted to set up for a while to get people coding and sharing ideas together in real life. There are things like this going on, but this is going to be for a smaller number of people and more regular. Pizza, beer, computers, coding / programming, sharing ideas, hanging out, chatting about whatever – it’ll be good.
Check out the Code Lab site that’ll show who’s attending the next session, when and where it’s happening and what grub will be for the picking.
Above are the current (but soon to be outdated) Modest Innovation home page and Projects section. A redesign has been a long time coming. Originally I got them up as quick as possible, I had a vague idea for the design theme being thin borders and grids – it worked on the home page, but that got lost in the projects section.
After finally getting round to making a pure CSS version of the Modest Innovation logo, it sparked a new round of inspiration for me to get the redesign and new web build together. I had to sort my act out, and so, after three days of hard graft, it’s almost there.
The simplicity, the thin accent lines and the 1:1 ratio and grid spacing all came together beautifully. Everything needed is on a single page (I love one page websites); projects and project summary, social links, thumbnails – everything. One page.
As for the actual content, that’s all hosted on the relevant site for that type of content (videos on Vimeo, photos on Flickr, PDFs on Dropbox, etc).
It’s likely that the site will be live by Monday, if not sooner.
As for its future – I’m working on giving each project its own site, similar to how I’ve showcased my fonts on their own site and User Manual, I’ll continue to do the same with the other projects. I’m also looking to update the blog to inkeep with the new style.
I’ve been wanting to make the Modest Innovation logo a single div element made purely out of CSS (actual CSS version below), instead of an image. This was for a few reasons.
Firstly, I wanted to learn how make CSS icons by calling a single element. My logo is simple so I thought it would be a good starting point. Secondly, once it’s done it’ll save the headache of optimising it for retina display devices.
Lastly, it’s super fast and fucking awesome.
Inspired by one-div I set out to learn about the :before and :after pseudo elements (with the help of Smashing Magazine) and how it all works.
Feel free to use the code and manipulate it over on GitHub.
The other night I quickly threw together this website showcasing my new fonts with download links for personal use. I posted it on Reddit before I went to sleep thinking nothing of it (as my posts don’t usually fare too well).