BEGINNER HERE! HELP. Where do I start? Checklist anyone?

Tell us what’s happening:
I am really overwhelmed, and maybe haven’t taken enough notes. I can’t even figure where to start with the tribute challenge. I have opened code pen, entered in some starting HTML. I would love to know if there is a way to learn what comes first, any help appreciated. Or should I just go back through all of the resources for CSS and HTML? My code so far is quite sad. I don’t even know what I am doing. Did anyone else get super overwhelmed with all the information when they started out?

Your code so far

Tribute Page

Tributes

information about the tributes here

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.135 Safari/537.36.

Challenge: Build a Tribute Page

Link to the challenge:

Hello and welcome to the freeCodeCamp community~!

Starting your own project from scratch and seeing the blank screen can be daunting, for sure. Thankfully, the challenge gives you some “User Stories” to follow - these are essentially the requirements your project needs to meet.

Let’s look at the first one:
User Story #1: My tribute page should have an element with a corresponding id="main" , which contains all other elements.

So, we need to create an element. We can do that, right? How about giving it an id attribute, with the value "main"? The story says it needs to contain all other elements, so what kind of element should we create? What would be best for holding all of our other code?

User Story #2: I should see an element with a corresponding id="title" , which contains a string (i.e. text) that describes the subject of the tribute page (e.g. “Dr. Norman Borlaug”).

Here we need to create another element and give it another id. This time the id will be "title". This element needs to contain a string (text) that describes the subject of the page. Don’t worry too much if you haven’t figured out your subject yet. It’s perfectly fine to build out the code using placeholder text like “Lorem Ipsum” or “Pikachu” or “ZZZZZZ”.

Continue taking this approach for each of the stories, working your way down the list, and you should end up with a decent bit of code to work with. Then all you have left is the content and the styling. :slight_smile:

Thank you, so I started…

<main id="main">
      <h1 id="title">Tributes</h1>
      <p>information about the tributes here</p>
    </main>

Something like this? I think I am on the right track. Yes you are right, it is very daunting. I just have to push through! Its exciting but also threw me off a bit. Did I actually take anything in?!

This is a great start! It looks to me like you are already passing the first two user stories. Nice work!

I freely admit that I spend a lot of time searching Google. You are not expected to memorise everything, and should not stress too much about it. Focus on understanding the core concepts, and look up the syntax when you need to. The MDN documentation is a great resource for checking things related to HTML, CSS, and JavaScript.


As a side note...

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Thanks again! Appreciate the help & no judgement. I think I am understanding the task a bit better.

I have gotten to this the final two user stories #8 and #9. I am now thinking this is where I begin to add CSS? This challenge is to play around a bit with what the layout looks like? Or once I have completed all of the user stories I should submit without any CSS.

Thanks again!

you need some CSS to complete all user stories

you can spend as little or as much time as you want on it, but consider if you want to say proubly “this is what I did” or just forget about it

you can return at it even after submitting, if you want to improve it later.