Feeling completely lost on the Tribute Page project

1

I am about 2 weeks into the course. I have completed the sections above the tribute page project without a problem (HTML5, CSS, Bootstrap, jQuery). But I feel like I only did so successfully because those are extremely easy, and it’s just a matter of following some simple instructions and copying them. I don’t feel like I have grasped any concepts, or able to say, think about what kind of code to write in a specific kind of situation. This is why I feel lost when I got thrown into this Tribute Page project without any kind of guidance.

When I watched the introduction YouTube video, I saw that there was only a single CSS code written, but when I started thinking about what to do, CSS was the first thing that came to my mind. Yet, I am still at a lost.

  1. Is this normal?
  2. How can I continue with the project?
  3. Does my webpage have to look exactly similar to the example webpage?
  4. Is it ok if my code is not optimal (such as having a lot of extra ‘unnecessary code’ to achieve something)?

I am also thinking of getting some books to complement my study (I really want to switch my career), so if anyone also has any great books to recommend, I thank you in advance.

2

Hey there,

Don’t worry, it is completely normal. As they say: You have to get used to feeling uncomfortable when programming.
The YouTube video is just a guideline. There are two user stories that you need to adhere to, the rest is up to you. If you want to use more CSS then do so. You can make whatever you like, and make it as complicated or simple as you like. The project is meant as an introduction, to make you get a feel for what is needed to build a page and to prepare you for the next projects up ahead. Do try to get your code as clean as possible but as long as everything works as you intended than all is fine.

Don’t stress it to much, enjoy the process of learning and get used to looking things up and experimenting. Also, get ready for the portfolio page :slight_smile: Currently working on that one and it is a bit more work than the tribute page but you will learn heaps by doing everything by hand.
Grab a coffee/tea, put on some inspiring music and start coding. It might take a few days to get something passible but you will feel better once you have worked through it. You can always come back to the project to refine it after you have learned more skills.

Good luck and be sure to show of your results once you finished!

3

I don’t feel like I have grasped any concepts

But if you’ve got the building blocks, then that’s a step in the right direction.

This is why I feel lost when I got thrown into this Tribute Page project without any kind of guidance.

Yes, the training is a little spotty. You’re expected to do some side research. And as far as guidance, that’s what the forum is for.

I saw that there was only a single CSS code written, but when I started thinking about what to do,
CSS was the first thing that came to my mind.

Then do it with more CSS. My tribute page had 3 CSS entries. If I did it now, it would probably have more since I understand CSS better now. There’s more than one way to do it. It just depends on how much control you want on the styling or how much you want to rely on built in HTML formatting. And of course, he’s using bootstrap, which is CSS, just a preloaded one. If you want to do your own, then go for it. As my music theory teacher used to say about analysis - “There are several correct answers. There may be an infinite number of wrong answers, but there are definitely several correct ones too.”

  1. Is this normal?

Yup.

  1. How can I continue with the project?

See below.

  1. Does my webpage have to look exactly similar to the example webpage?

Nope, not at all. Just make if fit the user stories and look good and work well.

  1. Is it ok if my code is not optimal (such as having a lot of extra ‘unnecessary code’ to achieve something)?

No. If there is any extra code, then fCC is going to send Guido and Luigi over to your house to break your legs. :wink: It’s your first project. Don’t worry about it. Looking back, knowing what I know now, I’d have done some things differently. I intend to go back and spruce it up.

I am also thinking of getting some books to complement my study (I really want to switch my career),
so if anyone also has any great books to recommend, I thank you in advance.

There was good post about this - https://forum.freecodecamp.com/t/computer-guide-get-job-ready-with-1-fcc-cert-3-projects-2-courses-and-10-books/64027

People often get stumped on this first project. 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.

1) 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.

2) 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.

4

Yes, it is completely normal to feel a bit overwhelmed when switching from the challenges to the projects. My struggle with coding/programming is deciding how to best put the simple concepts I’ve learned together to achieve the results I want, and other posts to this forum lead me to believe that lots of people feel the same.

To continue with the project, the best advice I’ve received is to break the process down into simple to understand pieces. Use the example webpage to guide your decisions on what you want to include, but I wouldn’t get too worried about reproducing the exact look. I started by writing a very basic HTML page, then experimented with CSS and Bootstrap styling until I was happy with the result. I learned a lot as I did this, and the concepts I was unsure of after working through the challenges became clearer.

As for code that is not optimal… I know I don’t write the best code possible all of the time, partly because I know that I’m still learning and it’s difficult to judge what optimal code would look like without extensive experience.:grinning: I write a lot of code that I will never submit to my CodePen, just to see how things are working, and then I often find places where I can clean things up, which means I’ve learned something as I went along. Experiment, experiment, experiment! Don’t be afraid to make mistakes.

Finally, I find the W3 Schools website is very helpful to further explore concepts that I need clarification or a refresher on. The “Try It Yourself Examples” are great for quickly exploring a concept I’m not too sure on.

Keep at it and best of luck!:slight_smile:

5

  1. This is completely normal. When I got to the tribute page part of the FCC map (I’ve only been doing this for a month or so) my first thought was, “No! Wait! I’m not ready!” But the only way to get comfortable with writing code is to move past that “stage fright” and actually start, just like the only way to learn piano is to stumble through scales and basic chords until they come naturally to your fingers.

  2. As long as you include the “user stories” part of the instructions (the picture, the read-more link, etc.), you’ve completed the project as directed. Those bare-bones things are difficult enough at first, until you start to gain some confidence and practice. I would instead pick a subject for the page you really find interesting, lay down the text and links, and then think about how you want to style it in CSS (simple colors, fonts, the layout of the photo). Eventually you can start thinking about them both in tandem, but it might be easier to start with the textual part so you can at least look at it and feel like you have something there to work with.

  3. No, it just has to have those user-story requirements. Mine is pretty bare-bones because I’m still at a kindergarten-coding level, and I had to force myself to stop looking at other people’s pages and getting depressed because they looked better–when I know more, I can go back and make mine flashier, or do another one. For now you just want to be able to say, “I did this project with the required 3 or 4 elements in it.”

  4. This is pretty much inevitable. From everything I read (as mentioned, I’m also new to all this) writing “clean” code is something intuitive that only comes with time and a lot of practice, and I’m sure I’ll look back in a few months and find a lot to improve. But since you don’t even have a grasp yet on what’s necessary/unnecessary, it’s better to simply start. The forums here have been extremely helpful for me with specific newbie questions (“Why won’t my picture center properly?”, etc.).

Someone here recommended the Front End Developer Handbook, which you can download for free from here: https://www.gitbook.com/book/frontendmasters/front-end-handbook-2017/details

1 Like
6

I am pretty sure you are not required to avoid using any CSS. It did say to make it your own using whatever API and libraries you need. My CSS for the tribute page is 42 lines. See https://codepen.io/mleisy/pen/qrgPPV

So no, it doesn’t have to look exactly like the example, as long as it has the required user stories…

Starting out, it is expected that your code most likely won’t be optimal. This is something you learn over time through research, repeating tasks with different means (there’s really so many ways to achieve the same thing), and expanding your logic skill.

I usually say, if it works and runs smoothly then who cares what is under the hood making it run?