Twitch Series: A Continuing Project

February 23, 2021
Random

On February 10, 2021, I streamed for the first time on Twitch. I wanted to show what building a site actually looked like, while practicing my CSS Grid chops. I chose this design from Dribbble to work off of. I thought it would just be a one off, but I found that this design shop had also designed other pages for this fictional company, some with much more complex layouts, and I decided to continue the process as a series. I’ll continue the series until episode 10 or so, maybe less if I get all the content I want to cover done.
The working site can be found here.

First Stream: Blog Page

Watch Here
The first stream started with just the “blog” page – which was a simple page with three blog post links and an email alert signup. There was also a nav that would be shared with other pages (unbeknownst to me at the start). In this video, I talk about typography, using flexbox, and go over a lot of basic stuff related to serving a website. I also do a quick intro to grid and talk about the future of the stream.

Second stream: Making it responsive

Watch Here
In the second stream, I started by collapsing the content I marked up in the first stream. I also built the footer that I didn’t know existed. I also go in to some detail talking about making the nav menu responsive and toggleable.

Stream The Third: More Pages and File Structure

Watch Here
For the third stream, I talk about debugging the navigation, setting up the file structure, PHP includes, and changing to VSCode!

Fourth Stream: More building!

Watch Here
In the fourth stream, I started using some new VSCode extensions, compiling SASS, debugging and restructuring CSS, and building the landing page.

Update: June 2022

I’m transferring all my site content and realized that I stopped updating this page. Well…sorry.

No Comments...yet

Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post

Image Gallery with CSS Grid

From February 6, 2021

I built an image gallery with CSS grid and a lightbox. CSS Grid is great fun.

Read This Article
Next Post

Frontend Mentor – Coding Challenges

From February 23, 2021

Frontend Mentor is a series of coding challenges for front-end developers.

Read This Article