CSS Flexbox!

Creating a responsive website

The challenge.

Over the past week and a half at Perpetual Education, our goal was to create a responsive webpage using this design template as guidance:

The template starts by showing us what the narrow form of the webpage should look like followed by two breakpoints as the window is expanded. After taking a good look at the sections of the template and opening up my boilerplate, I was ready to hit the ground running.

The process.

The first step was to break down each part of the webpage into sections. As Derek puts it, “everything is rectangles!” That is, every tag we use in HTML to build each part of website creates a box for content. Each box can then have its own boxes (parent > child).

After that was done, I started coding using the smallest screen first with the goal of expanding toward the two breakpoints. I knew that I had multiple sections to work with, so I kept in mind the question, “How can I position these sections to appear as needed at each breakpoint?”

My first run-through of the challenge was somewhat successful in terms of positioning the mid-page content as the page expanded. However, once I got to the second breakpoint, the content was not flexing as intended. At this point I decided to reach out to a classmate so we could work on it together. He helped me fix the content so that it was properly aligned as the page expanded.

After trying it myself and talking with my classmate, I watched Derek’s video outlining the creation process. I realized that I missed some of the background graphics, so I followed along with Derek’s coding to learn how to properly integrate them into the code. In addition, I fine-tuned some styling in areas such as the mid-section links, which were supposed to have gray-filled background colors with rounded corners (border radius).

The outcome.

While coding along with Derek’s video, I wasn’t only coding; I was comparing my code to his and learning where I could improve for similar future projects. Not only was this a great experience with CSS flexbox, I also learned more about how to organize code and name HTML classes. This will help me write code more efficiently and do so in way that makes it easier for fellow developers to read.

Here is my outcome.

Regards,

Andrew