CSS Challenge - HELP!

I’ve been given a task to do by my college but there’s no help or answers or tutorials that I can find that are helping me. We’re supposed to make the attached code look like the attached image. I don’t understand the majority of commands in the CSS code - can anyone help? I’d love to see what the answer is just to understand what this is all about, I’m so lost!


Zip files CSS and HTML

Use the resources on freeCodeCamp.
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design

If you want a quick answer on how to properly lay out a design like the attached image, you would use css grids and flexbox. I would suggest, going over the Flexbox and Grid section of FCC to get a grasp on how they work.

Hey, welcome to freeCodeCamp!

From your question it is not clear where exactly you are stuck. A practical thing with this difficulty is to break a coding challenge down further. So for example you could start with the title section. You can focus on that and ask: Why doesn’t it look the way I want it? What do I not understand about this section of the code? Fix only one area, then work down from there - let’s say the project section. In the project section the box, then the headline etc.

Now, I didn’t look at your code in great detail, but I opened it in a code editor. (my favorite is currently the free VS Code) One thing that popped right into my eyes where some typos. There is this thing called “syntax highlighting” in code editors that helps you to read code better, by making similar parts in the same color. You know what I mean… That way it was very easy to spot some of the typos, not because of my genius ähem :wink: - but because these parts are highlighted in red. I will show you what I mean:

image
So looking at this example, it’s relatively easy to see that there is a '=' character missing.

Another example I saw a couple of times is so called “commented out” code. I don’t know if you know what that is, so I will mention briefly, that you can write “notes” into code. These comments don’t get executed as code. You can just write plain English in between to make the document easier to read. (highlight sections, add to dos …) It is done by wrapping these comments in special characters. In CSS these are /* text of the comment */ and in HTML <!-- text of the comment -->. In the CSS file I saw a couple of these.

In VS Code they are green. E.g. this overflow statement will be ignored:
image

Given the name of the html file (error-error.html) I have a hunch that your teacher wants you to fix such little bugs?! Maybe the file is fine after that? I don’t know for sure… Anyhow, if you need more help you are welcome to come back, tell us what you have tried and update us on where you are stuck. The more specific a question, the better it is to answer … Don’t worry if you have multiple questions. We are happy to help.

Thanks so much for all your help!

I’ve made a start - I fixed the broken links and managed to fix some of the formatting in CSS. The first issue I’m stuck on is that I can’t understand how to get the grid to flow - I worked out how to get the first four boxes in the right places (I think!) but for some reason the fifth one goes to the sixth position and leaves the rest of the first column empty after the third item.

Any suggestions? I’ve attached another zip file with the updates that I’ve been through so far.attempt 1

Thanks so much!

Hey, congratulations on fixing the first issues.

Regarding the gradient boxes, the first box has an id assigned instead of a class as all the others.
image

That class contains how much space the images should take up in the grid. So without the class it uses up only a default width of 1 column, but if you make it a class it is also 4 columns wide as intended:

Before:

After:

Now the first 4 pictures are fine, but the layout breaks at the fifth picture. If we look carefully at the code, we see that the closing tag of the <fig> is missing:
image

If we add the closing tag </fig> it moves to the left, which is an improvement, but it is only 1 column wide, like the first image in the beginning:

So, maybe there is a similar problem? Maybe the class image-landscape is also not applied? Let’s check out what classes are actually applied in the dev tools. We find our element in the html code by using the select tool on the left and clicking on the actual element on the top:

This selects the <img> tag, but we are interested in the <fig> one level above. So let’s select that one and check out what css rules are applied to that in the box on the right:

Mhhh :thinking: no .image-landscape class applied. But we saw that it was applied on the left, or are we going crazy?! Let’s look again:

image

Duh! No dash. :smiley: So I guess this overexplaining is my complicated way of saying looking closely is crucial, dev tools are a great way to help you and yes all of this can be quite overwhelming and frustrating, but you are not alone with this experience. Nevertheless, there is hardly a way around keeping calm, breaking thing down and going through it step by tiny step.

So, to speed things up:
added the dash, first 6 images are fine:

image 7 - “/” missing in closing tag of <fig> (last in this screenshot)
image

Added the “/” now the first 9 images are fine, and on to image 10 …

Oh wait, markup for image 8 also looks somewhat off … adding two " characters around the class name for 8:
image

But now finally image 10. Checking the markup. We know that one already from above. Dash missing …
image

Grand fin, all appears to be good …

This is the code for that part:
(I hope without typos :wink: )

            <article class="grid-content">
                <header>
                    <h1>Project
                    <p>Praesent ornare, arcu ut ornare tristique, nulla ipsum porttitor turpis, facilisis bibendum mauris lectus id purus. Maecenas posuere pretium est sit amet ultrices. Pellentesque elementum ligula eget felis dapibus molestie a vitae ligula. In nisl lacus, placerat at mollis nec, convallis sed sapien. Aenean vitae lectus lacinia, elementum nunc ut, ornare libero.</p>
                </header>
                <fig class="image-landscape"><img src="images/grad-02.jpg"></fig>
                <fig class="image-landscape"><img src="images/grad-03.jpg"></fig>
                <fig class="image-landscape"><img src="images/grad-04.jpg"></fig>
                <fig class="image-landscape"><img src="images/grad-05.jpg"></fig>
                <fig class="image-landscape"><img src="images/grad-02.jpg"></fig>
                <fig class="image-landscape"><img src="images/grad-03.jpg"></fig>
                <fig class="image-landscape"><img src="images/grad-04.jpg"></fig>
                <fig class="image-landscape"><img src="images/grad-05.jpg"></fig>
                <fig class="image-landscape"><img src="images/grad-02.jpg"></fig>
                <fig class="image-landscape"><img src="images/grad-03.jpg"></fig>
                <fig class="image-landscape"><img src="images/grad-04.jpg"></fig>
                <fig class="image-landscape"><img src="images/grad-05.jpg"></fig>
            </article>

All the best!

Michael! You are an incredibly awesome human - thank you so much for all your help!!!