I kicked off my self-guided learning by taking several courses within the 51-hour Treehouse Web Design track. Alongside the coursework, I started to play with code I thought I'd need for my website, as I wanted to cement the learning by applying it to an actual project. Once I was refreshed on the basics I learned long ago, I began to get excited about building things and found myself breaking off from the courses to figure out how. Googling topics and reaching out to helpful friends have been the most useful ways to advance.
Designing in the Browser
Instead of starting with a polished design, I made a very basic Sketch wireframe (including the 3 breakpoints I'd be using) and then designed within the browser. I was really surprised by how immediately fulfilling it was to build and design in tandem. I was also pleased with how approachable HTML/CSS are and how quickly I could bring my website to life.
I started with something I knew I could build, and in turn learned a lesson on prioritizing (and minimizing) content, features and visual detail. On my homepage, I wanted to start with a concise statement that could summarize me in a sentence, in case that's as far as a viewer made it. With all the text-over-image heroes around the web, I wanted to be sure someone was reading about my qualifications rather than skimming images. I purposely left imagery below the fold. I also added links to the text to break up the content, emphasize important work and create more organic navigation.
Adaptive over Responsive
One last note is the choice to approach to site's responsiveness with hard breakpoints rather than fluid elements. I find fluid elements can be distracting if the user resizes their browser, and they can be hard to control as a designer (like fluid-scaling photos centering inside a fixed-height container). For instance, in the case of this site (which is admittedly small scale with relatively set content) I can ensure with fixed breakpoints that no typographic widows or orphans will occur.