Inspiration
Designing and building a new website for myself was the reason that I wanted to learn to code. I was so fed up with the free resources available to me (an at the time non-techie) and I wanted to learn to make my own website. I had no idea that I’d get so into it, but here I am.
Wire framing
I’m new to designing websites but I know what I like. I watched a few Youtube videos about wire framing, with hopes of understanding some of the thought processes behind the practice and what things to take note of in the beginning. I kept my eyes open as I perused the web for designs that I liked and then I sketched a several designs over a few days. I nixed most of my initial ideas (some that I still like) because I didn’t think I could get it to work in the browser or because they were just bad. At this point, many of my ideas are a remix of some of the things that I admire online.
Prototyping in Codepen
I coded 3 iterations of my design in Codepen to prototype. I like Codepen for it’s auto preview feature. I thought it might be nice to immediately see how my code came to life - and it was. I chose to use Bootstrap to create my layout fast. Here is one iteration of the design:
See the Pen vKJOzQ by Tanisha Hampden (@tanham2122) on CodePen.
Resources
I had plenty help every step of the way. For wire framing I watched a video from DevTip and bits and pieces from others to try to put myself on the right track.
Lil Chen’s site redesign article was such a big help in having a peek into how someone more experienced may go about the process.
I also read about writing clean and modular code with BEM and OOCSS.
Learn layout was a good help for some CSS refreshers.
Oh and Minimum viable product.
I can’t say that I have hard fast followed any of these things. I have to remind myself of the things that I learn and want to adopt at every turn but they serve as good jumping off points. I will say that at some point I had to stop trying to take advice and just code. The resources were great to get me started but I had to dig in before analysis paralysis set in.
Enter Jekyll
I downloaded and ran Jekyll for the first time with the help of their amazing documentation. I decided to use the default Jekyll theme as a starting point. I ran into several problems that I am still working out and in retrospect I should have began with a clean slate but working the kinks was a tremendous learning experience.
One problem that I had was using vanilla CSS instead of Sass. The default Jekyll theme comes with Sass styling. I pasted my CSS into a new file and added to the project - the Sass styling and my CSS was competing with each other. I liked some of the Sass styling but I ended up deleting the entire Sass files so I can have full control.
I am still learning Jekyll and I’m constantly amazed by how powerful it is. My design and overall website will continue to evolve as I learn and experiment more.