Learning some CSS / SASS

4 min readAug 24, 2018

These hack days (August 23/24 2018) I am finishing off this course — https://www.udemy.com/design-and-develop-a-killer-website-with-html5-and-css3.

And starting this one — https://www.udemy.com/advanced-css-and-sass/learn/v4.

Both of the above courses are done by Jonas Schmedtmann.

I am working on CSS and SASS as I want to improve my skills and knowledge of these.

My longer term plan is to update my own site http://libbyschuknight.github.io/ and do great CSS, focusing on mobile first.

Then I want to work on making an app for recording surf sessions, with a map integration and again will be aiming to do mobile first, as that is the device I would mainly use it on.

Thinking I will aim to make it an api and then a single page(?) app so I can change out the frontend if I want to down the line. Would also give me the space to try out different ways of doing the front end.

This is a simple example in Rails 5 of the kind of thing I want to do https://go-surf.herokuapp.com/surf_spots. No maps though and not a good UI.

Visual Studio Code

I am also starting to use and learn Visual Studio Code — https://code.visualstudio.com/.

I did start playing with it at a hack days a couple of months ago but didn’t feel I got into it enough to not lose too much producivity when getting back to day to day work.

It does load the Powershop codebase faster, which is great and I have added these extentions:

Atom Keymap — https://marketplace.visualstudio.com/items?itemNme=ms-vscode.atom-keybindings

so don’t have to learn too many new keyboard shortcuts

Guides — https://marketplace.visualstudio.com/items?itemName=spywhere.guides

this shows indent guides between tags and I have used it in Atom and find it really useful, great being able to add it to VS Code

Ruby Starter Pack — https://marketplace.visualstudio.com/items?itemName=HookyQR.ruby-starter

this one is from our own Bryan Hoekstra (thanks!)
“Extensions for Ruby devs (mainly those switching over from other editors)”
I think it finished it off the first time I was trying VS Code and I installed this time

Cobalt2 Theme Official — https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2

I like things looking a certain way and have used Wes Bos’s Cobalt theme everywhere!!

file-icons — https://marketplace.visualstudio.com/items?itemName=file-icons.file-icons

Again, cos I like things so so, I like to have my file icons within my editor clearly different
In Atom, there are different icons for ruby files and spec files
This extension doesn’t change the spec files but hoping I can figure it out someway or suggest the change
Might be something to do on another day!
When something went wrong with the Atom package I did post an issue — https://github.com/file-icons/atom/issues/571
issues for the vscode file icons https://github.com/file-icons/vscode/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen

Build Responsive Real World Websites with HTML5 and CSS3

https://www.udemy.com/design-and-develop-a-killer-website-with-html5-and-css3

Looking at performance optimisation

reducing images sizes and compression
https://imagecompressor.com/
minify CSS and JQuery code
http://www.minifycss.com/

Search engine optimisation (SEO)

meta description tag
write valid HTML code
https://validator.w3.org/
keywords in content
title, meta description tags,
backlinks

Launching Website

get a domain name e.g. iwantmyname
buy web hosting
upload website
HOWEVER, I have done this by using github pages — http://libbyschuknight.github.io/omnifood-site/

Site maintenance — Google Analytics