So, as the title says, I just started the personal portfolio project and holy shit! It seems like such an epic jump from the tribute page! Upon first glance it seems like I recognize almost nothing in the example codepen.
But, as I’m sure I’m not the first one to feel this way or make this kind of post, does anyone have any tips for how to start sectioning this beast off? I’m terrified of it, but also pretty excited to be able to replicate it in the near future. 
Thanks!
Break it down to its simplest version and get that working. Make it ugly and boring and use plenty of placeholders. Keep adding features and styling little by little and focus on not breaking what you already have.
You’ve done the tribute page. How can you adapt that to make a basic skeleton of your profile?
Save incremental versions (now is a great time to learn Git) and be patient with yourself.
A ton of people here have done the profile project, so if you get stuck on something, search for it in the forums (for example, putting ‘navbar’ in the forum search will get you a ton of helpful threads).
Mostly:
I would start with a nav
Then for each section have a container (or container-fluid)
Then start adding things to each section.
Note the version of Bootstrap you are using as codepen now adds 4 alpha by default so you need to change this if you are using 3.3.7 or similar.
Ok, cool, that makes me feel a little better. I was feeling pretty good about myself after finishing the tribute page and was even thinking geez, they assume you’ll take 50 hours to do this? I must be killin it! And then I opened the example for the profile project… And oh sweet, sweet reality, what a cruel mistress you are, lol.
Yes, doing your first portfolio page can be a little bit overwhelming at first. A course that really helped me was on udacity.com was their Intro to HTML and CSS course. Not only do they go over the mechanic of making a website, but they also have some great tips on planning the design, such as drawing out what you want your website to look like and then dividing it into boxes. They also have an entire section devoted to Bootstrap.
Oh, and don’t feel like you have to use Bootstrap. I decided not to use it in making mine.
Good idea with the nav bar, gotta start somewhere I suppose. And I found out about codepen bumping me up to 4 by accident yesterday when I couldn’t figure why my offset columns weren’t doing anything. Would’ve been nice if they gave you a bit of a heads up.
My unpopular opinion is to do your portfolio last since you’ll end up revising it so much once you’ve learned from the other projects.
This is also around the time where you’ll want to find and study outside resources. If you’ve just breeze through the CSS section of the course I recommend looking through it again. No shame in going back to previous lessons.
Everyone’s journey is different but some basic things I think are important are:
The many differences between position absolute and position relative beyond just "absolute doesn’t move around"
What CSS em is and how it works in conjunction with other sizing units
CSS vh, vw, vmax, vmin
Differences between display types (inline-block, inline, block)
If you don’t understand why a div is acting a certain way, give it a loud background color to see what’s going on behind the scenes
Margin is what happens outside. Padding is what happens inside.
The different text-aligns
Floats and clearfix
and whether using bootstrap is helping or hurting your alignments
CSS rule priorities and why spamming ‘!important’ is bad practice
Here’s some advice I gave recently:
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. If they’re still too unsurmountable, break it down further.
Let’s look through the user stories.
1) User Story: I can access all of the portfolio webpage’s content just by scrolling.
Great! Just one page! This should just be a simple page with different sections stacked one on top of each other, different sections like about, portfolio, and contact. Do you know how to create a page? And place items on it? Can you create different sections? Work on and test each problem individually. Don’t move on until you can do them all.
2) I can click different buttons that will take me to the portfolio creator’s different social media pages.
OK. Can you create a button? Can you link that button to a web site? Test it out and make sure you can. Don’t move on until you can.
3) I can see thumbnail images of different projects the portfolio creator has built (if you haven’t built any websites before, use placeholders.)
You can get dummy images that represent your fake pages. Can you show an image on your page? Can you arrange them in a grid? Don’t move on until you can.
4) I navigate to different sections of the webpage by clicking buttons in the navigation.
We already know how to create buttons. Do you know how to have them jump to different parts of the 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 have a button link to a spot in the 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 it’s good enough for now.
Haha! It definitely looks tougher than it is, the first time around.
Good luck! +1:
Wow, I REALLY appreciate your reply! After sitting with the project for most of the day now, I’m starting to break it down a little and not worry about how much time it takes me. I’ve started with the navbar, laying out a little template and will go from there.
I feel like your advice of breaking everything down by user stories or whatever the equivalent may be will be an effective way to approach all of my future coding projects.
But just I can’t get over the super helpful attitude of the FCC community so far, you guys/gals are fantastic! Which unfortunately seems to be a bit of rarity online, but is an awfully refreshing experience here!
And you feel like all of the things you listed I should be comfortable with before moving to the next section? Cuz I got some serious work to do if that’s the case…
They’re not nearly as intimidating as they sound and they’ll save you a lot of headache-inducing questions like
“Why isn’t my paragraph aligned across the page even though I used text-align” - because the element it’s in only takes a fraction of the page (inline/inline-block) instead of going all the way across it (block)
“Why isn’t margin doing anything?” - because the position is set to absolute
“What if I want an element to choose between the bigger value between height or width of the screen” - use vmax
“Why aren’t the styles defined in my class being applied?” - because it’s being overwritten by a rule set in ID, or a rule set by bootstrap
“Why aren’t the styles defined in my ID being applied?” - because there’s a conflicting rule defined in class with an ‘!important’ property
Of course the best way to learn is to trudge along, make mistakes, and actually see the problems being fixed in action. Theory only goes so far until you have to put it in practice.
So in short, keep moving forward, but keep these things in mind.
Did you ever use to watch the British kids’ TV show “Art Attack”? Presenter Neil Buchanan, the smug git, always produced these amazing crafty projects and whenever I tried to follow along at home my version always looked like crap in comparison.
The sample projects are Neil Buchanan’s lifelike crocodile-shaped paper mache pencil pots, and your “minimum viable product” version is a lumpy pile of green with googly eyes stuck on and a hole in the top for pencils.
But that’s OK. You’re still learning. One day you’ll be crafting glittering, sequin-studded masterpieces and you’ll realize that your lumpy green mess was the first step on your journey of transformation.
I had exactly the same thought a week ago, and I can completely agree with all the advice you’ve been given. Break it down to smaller bits to work on, get them right and move on. And don’t expect it to look like the example! Remember the person who made that has been doing this for longer than we have.
It took me a few days to actually get going on the project, many starts and plans later and I decided to just take my time and use it as a way of really learning all the stuff I’ve read so far. It’s the best way to make it stick for me! I’m still working on it but it’s looking better and better.
Good luck!
I came across this recently and thought it was a great roadmap. Have fun
Eric how’s it coming along? This was posted a few days ago. Would love to see your progress so far, if you’re open to sharing it. Let me know if you need some more help!
I felt the exact same and have actually put FCC on hold for a bit and am doing Codecademy to get some more practice. One thing I did notice is that when you open the code of the example page it is “uncompiled”. If you click the little arrow and change it to compiled it looks much more like what we’ve learned and not so scary Good luck!
FCC doesn’t feed you the answers and expects you you to do your own research after showing you some of the basics. While this is great and prepares you for the real world, I really wish they would include recommended resources in the curriculum to lead you in the right direction.
However, I think they circumvent that by pointing you to the forums and Gitter early on.
I too have had to take a break from the FCC curriculum to do some more in depth learning, but am really pleased with what I’ve seen so far and really love the community. 
Eric, I go through the same right now, I was pretty scared at the beginning.
But I divided all page into small tasks: first of course sketched what I want it to looks like and now I am doing section by section: content at html and than I add a little css and bootstrap. When you concentrate only on one small part at the time, you will keep going on 
