As part of a Ruby on Rails course I am doing on Udemy it was suggested to brush on your front end web development skills. The course suggested a beginners front end web development course created by Shay Howe called “Learn to Code HTML & CSS“. This course runs through the basics of HTML and CSS for front-end development and includes positioning content, the box model, backgrounds and typography. It is a great little course that a beginner could complete in a few hours.

As an extended exercise, I decided to take the opportunity of applying my existing knowledge in web development frameworks and mobile-first development to this particular course. My main goal was to convert the existing course website into a mobile responsive site. This was a great learning exercise, but took quite a bit longer than I anticipated. I took the following steps to achieve the end result:

• Create a Github repository for the coursework
• Work through the existing course until completion
• Added npm and gulp framework
• Converting source to BEM model using PostCSS
• Added gulp tasks for styles building
• Created Menu and added Javascript dependencies
• Convert pages to Mobile friendly
• Added further gulp tasks for building a deployable version
• Deployed version on Github enabled

You can compare the course website at Shay Howe – Style Conference and my mobile friendly version at Shay Howe – Style Conference – Mobile friendly

Check out further details on this project (including access to my source repo) here.