I’ve been tinkering with websites for nearly 20 years. My friend Hunter and I were big into making terrible Angelfire sites as pre-teens. In high school, my dad paid me to make him a webpage for his doctor’s office (I used Frontpage). A year or two after that, I read Kevin Yank’s “Build Your Own Database Driven Website Using PHP & MySQL” and hacked together a PHP back-end for a Lord of the Rings fan site.
In recent years, I’ve put together this blog, shouldigetaphd.com, and a few other simple web-based side projects. However, I haven’t kept up with modern web development, and my projects have been hacked together from boilerplate or templates. I’ve programmed professionally since 2011, I’ve spent very little of that writing anything close to graphical user interfaces.
I have a number of other side projects that I’d like to do at some point, and most of them would require some sort of graphical interface. While I could work on app development, I think web-based implementations would be a great starting place.
A few months back, I decided to stop watching Netflix on the treadmill and instead use those 45 minutes each morning to learn; in particular, I’ve been trying to learn more about modern(ish) web design and development. My work has a subscription to Safari Books Online which gives me access to copious technical books and video tutorials.
The number of resources available on Safari (along with YouTube, blog posts, etc) is astounding. I started many video tutorials on Safari that I quickly realized weren’t going to be useful. Yet there many gems to be found, which I share here with you.
What follows is an overview of the technologies I’ve realized I need to learn more about and links to the resources I’ve found valuable in learning about them. If you think there are gaps I haven’t yet filled or better resources than I’ve listed below, I’d love your feedback.
What I Knew Going In
I’ve been a professional software developer and data scientist since 2012. I mostly write Python, but I’ve programmed in a number of different languages.
I’ve used the Python Flask web framework for several projects. I understand how to repond to HTTP requests with server-generated content. I had some idea of how to run my own web server on AWS.
I understood DNS at a high level, but never really learned what all the different DNS types were, and I didn’t understand why name server changes take so long to propagate.
I’m a committed Sublime Text user.
A Meta Tutorial on Web Development
A great place to start is Andrew Montalenti’s lengthy tutorial on using Python, Flask, Bootstrap, and Mongo to rapidly prototype a website. The tutorial is out of date, but the principles still stand.
Another great resource is Cody Lindley’s free Front-End Developer’s Handbook. This is a substantial list meta-resource that organizes links for learning all angles of front-end development. “It is specifically written with the intention of being a professional resource for potential and currently practicing front-end developers to equip themselves with learning materials and development tools.”
Chrome Developer Tools
One of the most important tools for me in learning more about web development has been the Chrome Developer Tools. You can live edit the DOM elements and style sheets and watch how a website changes. I’ve mostly learned Developer Tools through exploring it myself, but there are lots of tutorials for it on Youtube.
HTML, CSS, and Bootstrap
For several projects, I’ve used the lightweight Skeleton project to create simple, responsive pages.
Recently, I decide to dive deep into the more robust Bootstrap framework originally developed at Twitter.
I watched Brock Nunn’s Building a Responsive Website with Bootstrap (Safari), a two hour tutorial on getting started with Bootstrap. The documentation for Bootstrap is clear (if terse) and worth reading through.
Once you have a basic idea of how Bootstrap works, the best thing you can do is start playing with it. Since I was familiar with the Pelican static site generator, I decided to switch this blog to Bootstrap theme starting with pelican-bootstrap3.
I’ve worked with Bootstrap 3 until now. Bootstrap 4 is about to come out. Bootstrap 4 moves the style sheets from LESS to SASS and adds Flexbox functionality. Unless you understand what those mean (more below), you’d be fine using version 3.
I wanted to get a better grasp on CSS Selectors, so I read Eric Meyer’s brief Selectors, Specificity, and the Cascade: Applying CSS3 to Documents (Safari)
Advanced Stylesheets (LESS, SASS, and Flexbox)
There are several alternatives to writing raw CSS. Two popular ones are Less and SASS. These “preprocessors” allow you to write CSS-like stylesheets but with constructs such as variables, nesting, inheritance, and mathematical operators.
Another modern innovation is the Flexbox layout model for CSS. Stone River Learning has a great tutorial on Flexbox (Safari). It seems that Flexbox is the future of CSS-based layouts, and it’s worth learning about.
Web Server Operations and DNS
I learned a ton form Linux Web Operations (Safari) by Ben Whaley. “The videos discuss the relationship between web and application servers, load balancers, and databases and introduce configuration management, monitoring, containers, cryptography, and DNS.”
I’ve struggled with DNS configuration over the years, so I watched Cricket Liu’s Learning DNS series (Safari). I still wouldn’t want to be responsible for a company’s complex DNS infrastructure, but I can now configure my own sites DNS with a little more understanding.
There’s a GUI application called Codekit that can do a lot of these tasks. You can also do it through a Node.js program called Grunt. I haven’t used it yet, but it looks like following the documentation would be the best way to get started.
Gulp is a popular alternative to Grunt.
I enjoyed Software Engineering Daily’s interview with Tracy Osborn on Design for Non-designers. She has some blog posts on the topic. Tracy recommends COLOURLovers for color ideas and Font Pair for selecting fonts from Google Fonts.
User Experience Design
I still have a lot of learning and a lot of practicing ahead of me, but I’m starting to feel confident that I could make headway on some of my projects. The modern frontend development landscape is massive, varied, and ever changing, but that shouldn’t prohibit you from diving in if you want to.