Peter Eagleton

In this post I will outline the challenges I underwent when learning how to code a creative agency website with Brad Traversy.

Enjoy!

Challenge 1: Grid layout not working

Brad taught me how to change the services page so it become a grid layout like this:

However, even though I put in the same code, it continued to stay like this:

Additionally, the heading is in a different position and it doesn’t look as good.

I had a bit of a problem on my hands!

After spending ages making adjustments to CSS to no avail and asking ChatGPT question, I decided to to the obvious. I decided to copy and paste pasted Brad’s HTML into my own editor to see whether it was an HTML issue.

Lo and behold!

The page displayed perfectly.

Conclusion: It was an issue with my HTML, not CSS.

So I perused the HTML and compared Brad’s HTML with my own.

Solution 1: Misplaced <div> tags and duplication of classes

I found the discrepancies in the HTML coding, and it the solution turned out to be fundamental:

Misplaced <div> tags

That’s right!

In the first code image you will find that there is an extra </div> tag, which is in the wrong place.

So I removed it:

And it’s now in the right spot.

The lesson: Be careful when placing the <div> and </div> tags. If a single tag is in the wrong spot, chaos can ensue.

Duplication of class:

When copying and pasting the different services icons, I mistakenly copied and pasted the following class with each one:

This class is only meant to be declared once, but in my HTML it was declared several times, messing things up.

The lesson: Be careful when copying and pasting. You could very well be pasting something that ruins the layout of your website.

Problem solved:

This is what my page now looks like:

One more misplaced </div> tag

I still had the issue of the heading.

I perused the HTML for so long trying to find the error. Eventually, I decided to check with ChatGPT:

There was one more misplaced </div> tag.

A simple solution, but one which took me a couple of hours to find.

The lesson: One small error in HTML code (or any code in general) can cost you hours.

My services page is now as it should be (I hope):

Challenge 2: Images stacking vertically instead of displaying in three columns

This is what the page was supposed to look like:

Mine displayed the images across the page like this:

Learning my lesson before, this time, I copied and pasted Brad’s HTML into my own editor, and it displayed properly. So I concluded it was an issue with the HTML, not CSS.

This is Brad’s HTML:

This is mine:

Do you see the difference?

It’s in the very top line. I wrote <section class=”portfolio”> instead if <div class=”portfolio”.

I fixed up that minor issue, and now it looks like this:

Perfect!

The main lesson: check as you go

When creating a webpage with code, it is vital to check things as you go as often as possible. It may take up more time while you’re working, but it can save you time further down the road.

All in all, these problems took me a few hours to fix. Hours which could have been saved if I checked my work more thoroughly.