How to do Responsive Web Design Projects properly?

Hello guys, I just started the first Responsive Web Design project “Tribute Page”: https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-tribute-page. While I had to search for almost everything online but I ran into one dilemma.

Maybe it is a wrong approach but I tried to replicate the design of the sample page for the project, here is the link to the sample page: https://codepen.io/freeCodeCamp/full/zNqgVx

As a result, I could not resist the urge to use “inspect element” function to look up the HTML and CSS code on the sample website. I am only copying some elements and mainly use it to understand how the code is structured. Is this approach acceptable when doing a project or should I refrain from doing it?

Maybe it is a wrong approach but I tried to replicate the design of the sample page…

It’s not “wrong” per se, but it is unnecessary. You can do your own thing, it just has to do the same thing, be the basic idea. You just need to pick someone or something and do a tribute page, and meet all the user stories.

I am only copying some elements and mainly use it to understand how the code is structured. I am only copying some elements and mainly use it to understand how the code is structured.

Well … that would … uh … be … cheating, right? If you’re taking a test in school and you get caught, you don’t get to say, “Oh, well, I was just looking at it to get an idea of the best way to answer, how to structure my essay.”

That being said, you’re probably not the first. But I think you’d learn a lot more by doing some research and or asking the forum. It’s true that all coders “borrow” code. But it’s a little different on a test, where the whole point is to establish that you understand this and can do it. I think looking at the sample project should be something you avoid like the plague.

3 Likes

HI @SaulWD!

Welcome to the forum!

IMO that is the real lesson behind these projects.

If you ask any of the pros on the forum, their whole job is to solve problems all day long. They are constantly looking up things online to help them solve their problems.

stackoverflow image

These projects are designed to stretch you.

For the future responsive design projects take it one step at a time.

The next project is the survey form.

Forget about the design for a minute and just work on the html.

Go thorugh each user story one by one. If you get stuck, you can review previous FCC lessons, research online (mdn docs, w3schools, youtube, etc) and ask questions on the forum.

Once you finish the html then you can slowly tackle the design.

It doesn’t need to be perfect.

That is not the goal.

The goal is to learn. Just come up with a simple design that is yours.

Hope that helps!

3 Likes

Thank you! I feel much better now, design was exactly the part where I got stuck, CSS is really hard for me. I will try to go over more of CSS in MDN and come back to the project design part, for now I did only HTML for it.

Thank you, it was hard for me to draw the line between learning and cheating as I am still completely new when it comes to web development. Here is an example of why I ended up checking sample code in the first place:

In the project instructions it said: " User Story #5: Within the img-div element, I should see an element with a corresponding id="img-caption" that contains textual content describing the image shown in img-div ."

I got confused, because I learned that we use and for images and here it seemed to say to use

instead (it only referred to id=“img-div” but still got me mixed up). I didn’t know if I can use within a
or what I was supposed to do, so I ended up looking it up in the sample code…

After checking the sample code I realized that they actually used . Either way, you are right, I should stay away from sample code and try to figure it out using forums and internet search. After watching a video on someone doing FCC Tribute Page project it was clear that there is far more freedom in how I could design the page and there was no need to fit in exact frame of the sample page.

Yeah, I’m not trying to come down on you. I get it. And the first project is a big leap from what you were doing before. And again, it probably happens a lot. But you’re just of course hurting yourself. I would say that taking a peak at what others have done on a different non-fcc-tribute-page project would be fair game - that’s very common in the coding world - but I would avoid looking at any of the same project.

In any case, have fun on the next project.

1 Like

No problem, what you wrote is right. I will try to redo the project from scratch for better learning experience, thank you!