Last year I bought a domain as a refresher on the process in case I taught more “introduction to websites” classes. Though the classes focused on drag and drop website publishers, I wanted to update my basic coding skills with FreeCodecamp, which introduced me to Codepen.io, a neat tool and community. With a free Codepen account, you can create easily create webpages, fork them for variations, and share them to get help or show (off) your work. CSS had come a long way in 10 years. In Inkscape, I had been tinkering with a color palette I called Rumination, and thought it might make for a good background image.
Font face: Mada
Background image: Floaty Triangles, which has a stained glass window effect I like.
It didn’t take me long to get the (new to me) Bootstrap responsive layout working. Look ma, no tables! Like a beginner in a new app, I pored over the fonts available via Google Fonts. Hadn’t this been harder?! Now that I had containers, what should go in them?
Background image: Ruminations Glacier, a mirrored and reversed set of triangles meeting at a point.
For source material, I incorporated making things and solving problems with colleagues at work, and a bio I wrote during the Fast.Co Creativity Challenge and used for a speaking engagement. I tried another background image and was obligated to try another font. I attempted a one page website, but hit a wall trying to pair in each row an image and text with alternating divs (still not sure if this is possible?). It was a limitation in experience and understanding that I overcame two days ago.
CSS: CSS Grid
Font: PT Sans
Background image: Hero Sunset 2, flowers in my yard in pinks and purples.
The background image started in blue and purple. I experimented with a sunset (because GLOAM!) gradient, and absolutely had to add pink to the image. I copied the sticky navigation bar at WCSchools. In trying to put all content on one page, I ended up with unique divs for each item in the grid, which is counterproductive.
It looks the same as Hero Sunset 2, the difference is in the CSS. Seeing that all divs behaved the same, I reduced them to one div called “window” reused for each “cell.” I applied HSLA color format throughout, and for the background gradient. Images are SVGs for anything that isn’t a JPG/PNG. Eventually I’ll add some of my instructional makes, descriptive image accessibility text, and a contact form.
It only took 14 months or so.