Stuck on Responsive Web Design Tribute project

I was all jazzed to move through the currriculum. Thought I had a solid understanding of everything I’d taken in and was very excited to jump into the Tribute project today. However, once I read over the instructions I was completely stomped. I didn’t know where to start or what to do. I began searching through the forums b/c I couldn’t possibly have been the only one, but all i found was completed projects. I’m going to take a break for the day, but if anyone knows of a topic/forum post or anything else that would be helpful to just wrapping my head around how to start this off that would be great! Yes, I did take a ton of notes and I looked back on them to get my grounding but it’s all so disconnected at this point.
–Disappointing Day in Code

1 Like

I always start a new project by sketching out on a piece of paper what I want the end result to look like. Read through the user stories for the project and use those to guide your sketch.

Once you have your sketch, start at the top and work your way down. Do the HTML first. Everything is a box and you just have to name the boxes and put stuff in them. Then do the CSS.

Hope this helps!

4 Likes

Hello. I just started this Project and I have a pretty decent understanding of the curriculum. But sometimes, it does seem like there are things they expect you to start figuring out. I saw on the page that showed the tribute itself: https://codepen.io/freeCodeCamp/full/zNqgVx, you can press a button at the top that says fork that shows you how the page itself is made with all the code (HTML/CSS/Javascript). If you understand like me you can basically take it from there. I think this CodePen thing is what is called a framework. I haven’t actually finished the project myself, but I didn’t know where to start till I started snooping. Snooping seems the way to go.

Ms-Blye,
The secret is start with the markup only. Infact I will present some steps here:

  1. HTML only - code the markup. example
    <h1> Your Title Here </h1>
    <img src=“yourImageSource” alt=“demo image”>
    <h2> Your Sub-Title</h2>
    <p>Your description</p>
  2. CSS
    now give your markup id’s and classes as stated in the user-stories so as you can pass the test.

Add your own id’s and classes to help you style as needed.

Use CSS to style as you see fit. You can copy the exact guide and later change it because you just might lack inspiration if you actually want to think of something entirely new.

I hope this helps.