New at starting from scratch

New at starting from scratch
0.0 0


I have just started coding, and the first major test is to create a profile from scratch in CodePen. I am not sure exactly how to begin a profile from scratch and how to get the buttons to go to specific locations, or how to create those locations separately, on the page. Can anyone point me in the right direction? I don’t recall learning what they want me to do in any of the previous lessons. Perhaps I’m not noticing correctly? Thank you in advance for your help!


Two quick questions: Are you using the BETA? It will teach you what you need to know. Also, are you trying to use Bootstrap? The production site led me to try to use bootstrap, and it was a bad idea. Don’t fear wasting time redoing the challenges. The more you type, the more it becomes second nature.


As a clarification, codepen isn’t really “from scratch” in that it is an environment that will help you build your app, but codepen (imho) is a good place to learn. And you can export the result into “correct” html, css, and js files to see what they look like.

So first step: Can you build a simple page in codepen? Just put some divs and h1s in there?

Second step: To have your page jump to specific locations, if you element has an id:

<div id="contact">

You can use and anchor tag to target it:

<a href="#contact">Contact</a>

That #contact tells that anchor (link) what id to target.

Here is a sample pen I wrote for someone facing a similar problem.

Most of all, sit back, take a deep breath, and relax. Most people feel a little shocked at this point. FCC has given you a lot of the building blocks, but hasn’t really shown you how to put it together yet. What you’re feeling is completely normal. Just relax and break the problem into little problems.

This is such a common question that I have a standard response:

People often get stumped on this first project. Relax. It’s completely normal. This is my standard advice:

I think one of the great lessons from the movie The Martian is that when you are confronted with a problem to large to comprehend, break it into smaller pieces and work those problems. Don’t think that you need to visualize the entire problem all at once – that’s for the pros. Just take on one little problem at a time. Keep breaking things up into smaller problems until you get down to a problem small enough to handle.

Let’s look through the user stories.

User Story: I can view a tribute page with an image and text.
OK, can you create a web page in codepen? Do you know how to add text? Don’t move on until you can. Can you add an image? Don’t move on until you can. Do you know how to manipulate and format these? Don’t move on until you can. Seriously, don’t move on until you can do any of these steps.

User Story: I can click on a link that will take me to an external website with further information on the topic.
Do you know how to put a link into a web page?

My advice is to break things into small problems and test them. Don’t get too complicated too fast. Don’t make 10 changes at once until you’re a good enough coder to do that. Make one change and test. Make another change and test. Etc. And don’t get too complicated if you don’t need to.

Research those small problems and test them. Read-search-ask - it’s a great motto. If you get to the point where you are stumped, then ask the forum, but be specific. Don’t say “I’m stumped on this build.” Say, “I can’t figure out how to put a link into a page.” Ask for small, specific problems and you’ll get better results. (And you could probably google that first and get 1000 results.)

Lastly, see what others have done. Yes, you can look at other people’s pages. Obviously try for yourself first, but if you’re stuck, see how someone else did it. As long as you understand what they did, you’re still learning.

Just keep it simple. You can go back and spruce it up later. This is what I did. I fully intend to go back and clean it up and improve it later, but its good enough for now.

Relax. Go back to basics. Ask specific questions.

So, relax, give it a try, and come back and ask questions when you get stuck. That’s why we’re here.

And please let us know if this doesn’t help you get going.


Thank you for your response vipatron. I will def have to redo some, so that I can do it more second nature. And yeah, I am doing the same, as that is what it told me to do about using bootstrap.


Also, thank you for your reply too kevinSmith! I shall have to break down into smaller bits. It is definitely very daunting being shown small things, and then outta nowhere it says “DO THIS” but I felt it didn’t prepare me for such a large undertaking outta the blue. I shall definitely take it step by step. I appreciate all responses on here! Thank you again!