The Intro

It’s been a fast moving journey into becoming a Full Stack Web Developer. Just a little over a month, we established ourselves as “Software Engineers”.

Because we created code onto a page, we were knighted the honor by King Leon (unless you live in Canada, sorry).

Fast-forward one month later, we now have the skills and tools to create responsive web pages for clients! Today, I want to reflect and give my thoughts on each project we were assigned in the last month.

Beginner Assignments

BBC

One of our first assignments we were tasked with is re-creating the BBC webpage only using HTML. For some, this was their first time throwing down “bad code”. For others, a piece of cake. I was humbled doing this project because it brought me back to the first time I wrote code, through The Odin Project.

TechCrunch

I thought this would be a difficult webpage to re-create, but the way Leon explains how to approach building it made the beginning easy.

Khan Academy

Last but not least, Khan Academy. This may have been the most basic assignment to build. In this lesson, I was able to learn how to practice using buttons but did use anchors because it's easier.

I write bad code.

The Floats

This is where the pain began to kick in. I feared learning floats because I learned flexbox first through The Odin Project. I thought, “Why do I need to learn something that's old?”

You might join a company, and have to convert legacy code to modern flexbox. This is why I teach floats first. So you can appreciate how easy it is today. - Leon

Simple Lab Site

Creating Leon's about me page was difficult during this period of time. I recall how difficult it was to wrap the text around the image, and was trying to get it pixel perfect to the real thing.

If I were to do this layout today, definitely would complete it in less than 12 minutes.

15 Minutes of Pain and Layouts

Creating layouts from scratch with floats was realistic, 23492 hours of pain. As you see below, we had the chance to work with using basic math + floats to make our boxes stack.

This was also the first introduction to media queries, which I used in the last part of the gif.

Floats will always push to the top, and either left or right, depending on the value you give.

The Epic Layouts

This was where all our developer trough of sorrow begins. We knew it was real when he gave us two more weeks on top to complete all the web pages.

All the reading we did with Shay Howe and the homework we submitted were going to be used to build layouts Leon provided.

On top of creating the BBC, Khan Academy, and Tech Crunch using HTML and CSS, we needed to build The Level Ground, Source, Restaurant, and Hair Salon.

Disclaimer: I did not do the hair salon or add media queries to the pages, yet! BAD CODE ALERT!

Level Ground

Floats were not my best friend, diving into this layout. I struggled to try to find the spacing for the nav. If I did it with flex, for sure complete it in seconds, but I wanted to work on my floats.

Source

My confidence grew when creating the layout to Source. Floats clicked when I was able to space the features section correct.

Restaurant

Doing this project, I re-did it TWICE. The first time around, I hated the way I wrote my HTML and assigned classes. I thought of reading through the code, but ended up deleting it.

I also used flexbox because why not?

What I still need to review is the background-image in CSS. The image always comes out blurry or doesn't fill enough of the page when I input the correct value. I will need to dive into this soon.

Hair Salon

This was the last layout I did not start. Do I feel regret or “behind”? Just a bit, but I know I will learn along the way with 100Devs.

Conclusion

The journey of becoming a Full Stack Developer has been amazing. I have connected with many folks, made online friends, and networked with professionals in the industry. On top of that, I am learning a skill that will always be in demand.

Let's connect on Twitter!

Stefan's Blog