How should I tackle the tribute page and portfolio as a complete beginner?

I’m not a creative guy so these projects already have me in a rut.

Is it bad if I stick to what I learned in just FCC lessons? I know it wasn’t recommended but I took a quick peek at other codes for these projects (the “simpler” looking pages) and even those seem to use a lot of stuff that wasn’t touched upon in the prior FCC lessons.

Should I take a look at other online courses for more HTML and CSS stuff or should I just tackle the projects with just FCC knowledge and come back to it later?

And will the HTML and CSS stuff I’ve learned in FCC be enough for future projects or am I expected to be learning more CSS and HTML stuff outside of it?

Sorry if this was already asked before, I’m just feeling a bit overwhelmed.

3 Likes

Don’t worry,I was in the exact same position as you. I got to the tribute page and just drew a blank, then once I had cobbled something together for the tribute, the portfolio page sent me into meltdown!

I know there are a lot of resources on this board, but the one that I found most helpful was Colt Steele’s web developer boot camp on udemy (I’m on my phone so can’t link). I paid 15AUD for it using a discount code (there are plenty about, let me know if you need one), and his modules on html, css, and bootstrap pretty much cover off all of that content.

the other alternative would be to start googling about bootstrap, html elements, and CSS and begin trawling the documentation. personally, I struggle with this method, but it might work for you

3 Likes

I think it’s totally fine to copy exactly the style and look that the examples use. It is important to be able to copy something exactly, and that doesn’t require much creativity. And it still is very good practice to try to precisely copy something.

And yes, you will have to learn a lot of stuff outside of the tutorials on this site. Especially later on, they barely teach you things at all. But personally I prefer it that way and I think you will too, cus googling stuff and understanding documentation is extremely important as a programmer. I mean say you don’t know or don’t remember how to make something specific, pretend it’s a certain type of navigation menu. You could go through tutorials for an hour and still not learn how to do exactly what you are looking to do. Or you could know how to use the docs (the documentation) and learn exactly what you are looking for in 2 minutes.

I still get confused when I look around the MDN website (they have documentation on things like javascript) but the more you get familiar with and comfortable finding things and understanding things there, the better. In my experience, that is when you start feeling like an actual programmer, when you wean yourself off of tutorials.

5 Likes

That’s exactly where I am now. I am returning to the curriculum after a long absence, and after having redone the FCC challenges up through the tribute page, I have hit a wall with the portfolio page. So I have very nearly the same question as the OP.

I am wondering if I should just start reading code from the pages I like in order to learn, or try to beat my way through Bootstrap docs filled to overflowing with unfamiliar concepts and learn that way. I’m leaning toward reading code for understanding. It doesn’t help that the example page Quincy chose for the portfolio page challenge features tons of customized CSS and JavaScript. I’m simply not ready to go there.

I know this isn’t kind, but many of the portfolio pages I see are awful. Many are designed more to show off trickery than to convey information. Prospective employers aren’t going to want to mouseover or click a bunch of things to get the information about you. Keep it clean and simple.

The other option is to break down the task into it’s component parts. Looking at the example site, it looks like you’d need:

Navbar (http://getbootstrap.com/components/#navbar-default)
Div with image and text
Bootstrap Grid for Portfolio (http://getbootstrap.com/css/#grid)
Bootstrap Form for Contact (http://getbootstrap.com/css/#forms)
Bootstrap Buttons for Social (http://getbootstrap.com/css/#buttons)

Copying and pasting the sample code from the above and then experimenting with it helped me the most. As mentioned, most of that stuff is only touched upon in FCC, so I’ve used https://www.udemy.com/the-web-developer-bootcamp/learn/v4/overview to help fill in the blanks, as like yourself, I started then stopped and forgot most of the learning.

I’m pretty sure there’d be youtube tutorials for how to use Bootstrap etc if you didn’t want to go down the Udemy route.

8 Likes

Exactly what I was looking for. Thanks so much!

If you want to have a look at mine, it’s here

2 Likes

Cannot agree more with this advice. HIGHLY recommend. Instead of learning how to do a lot of stuff in one app that you slowly build in FCC, Colt Steele’s tutorials teach you a few concepts that you then apply to building a really simple webpage. Then you learn a few more things and build another simple page. Learning that way has made the Tribute Page challenge way less overwhelming for me now that I’ve come back to it.

Only 10 days old. Clean. Visually pleasing. All user stories fulfilled.

This is impressive. Thanks for sharing this! (because I am going to shamelessly read your code to see how you did it :slight_smile: )

Ha ha. Feel free to hack it to pieces.

Like everyone else’s portfolio page, it’s still a work in progress, but it will do for now!

Hi,

I would recommend also going through the udacity basic html/css
While I think that the course has its flaws, inherently linked to how you could teach html/css that require I think a direct feedback (unlike python for instance)
It gives you a good first understanding of how bootsrap works and more importantly about some best pratices in web design, which could help a lot.
I am green green in html (started about 2 - 3 weeks ago) and the course gave me some best practices that help a lot. Portfolio still in progress though. So I too need to read and learn a lot outside FCC

Especially the use of jQuery for this project for instance.

If you aren’t creative, look at similar projects to get a sense of what pages look like. Then draw on a paper the sections you want, and how they should be laid out: like columns, images… It helps to have a visual idea of the finished product before starting to code.
Also, watching a lot of tutorials may keep you in a state of “beginner”. I advise you to get started. You may know more than you think. As you practice, you will remember classes and basic CSS.
And you can always refine the pages as you learn more.
For my tribute page and portfolio, I played a lot with images. You can have a look here:


I have been refining them as I learn new things.

2 Likes

I understand how you feel. I get that when I draw. Blank usually sets in.

It heps with the process if you have some sort of inspiration to go by. Look around the web and see if you can replicate the layout using bootstrap.

Everyone studies thing differently, and I can’t offer you my routine because that involves a lot of coding, and experimentation.

The rule for me is. Do a project that is within your ability +50%. That way I will always be in the unknown. It pushes you to think about what you know and what you don’t know.

Use what you know and dive into tutorials and documentation for things you don’t. It is impossible to know everything in programming.

Take java api for example. It is more packages than there are lessons in FCC. If you need to know everything meant that you won’t have to do anything. :stuck_out_tongue:

However, as programmer, one should know fluently common structural programming and terminology. Things like variable, loops, parameters, return type, function calls, etc.

Knowing codes in depth will help reading the documentation a lot easier. And the more codes you know it gets easier and more relatable with other languages.

Back to the tribute page. My only suggestion is just dive in and experiment. Look at other tribute pages to get ideas, but more importantly, know what is doing in the other persons code.

I think the hardest thing is reading others code. Also you can ask around on FCC for help anytime. :smiley:

I have been working steadily on my tribute page for the past couple days. I’ve avoided looking at other people’s code specifically to challenge myself. My particular question: Near the end of the YouTube video explaining how to complete the challenge, it says it should be basically all HTML, but I’ve got quite a bit of CSS already loaded. Is that bad

In this case, with the demo in the video, that should translate to “there’s a ton of CSS, but Bootstrap is doing all of it for me, and I’m just adding the right classes in the HTML.” And no, I don’t think it would be bad for completion of this project to write your own CSS, just that you could lean on Bootstrap if you wanted. (Also, distinction: if you mean you have Bootstrap loaded into Codepen, great. That means Bootstrap is then providing rather extensive CSS. You could also write any additional CSS rules you wanted for personal customization.)

Also, you should know: freeCodeCamp is in the midst of a complete overhaul of the course of study. In the new curriculum, Bootstrap is taught way after this project, and there’s a lot more emphasis on how to do CSS yourself instead of relying on Bootstrap.

Personally, I would encourage you to look at other people’s code. If you see a site that you like or has a cool widget… etc. Inspect it to try to understand how the effect/widget is made. For me, it is one of the best ways to learn. Never feel ashamed to look at others code. Just don’t copy it, without attribution. OR even better, if you are going to duplicate an effect or snippet, always write it from scratch, never copy and paste.

Also, don’t be afraid of adding your own CSS. That is how you make any project yours. However, if you are using a CSS framework such as Bootstrap it is best not to reinvent the wheel. It is likely that Bootstrap already has some CSS for the element you are trying to style so only minimal CSS will be needed to tweak the elements to your liking.

I tried the tribute page, it’s not horrible but I plan to rework it. After that I decided to work on the algorithm challenges first, ands save my portfolio page as the last thing I do before finishing front end. I will be better prepared (links to other FCC projects instead of placeholders) and will have more of a body of knowledge on page design than I did when trying to cobble together a tribute page.

I would not even have the simple tribute page that I ended up with if it were not for reading the documentation at the bootstrap site. My biggest limiting factor was trying to find a picture of a subject that wasn’t going to unintentionally violate someone’s copyright by using it.