Hey guys,
So I just started this challenge and I tried to tackle it writing my HTML and adding the classes as I go along. This has resulted in me getting totally lost and confused and wondering why I am having to use some of the classes I am being suggested. Is it easier to write out all your basic HTML before adding classes to style it? How do you guys start out on a challenge like this?
Thanks!
For me, I write the Javascript first with minimal html just to see the results (not applicable here since you don’t have any JS), then I build the structure of my page out with HTML, then I add the CSS to make it look pretty. Sometimes I might go section by section but still follow the “HTML then CSS” idea. As you get better, you can be a little more free with the order of things.
But I think it’s important to have a plan. Like the old saying goes, “weeks of programming can save you hours of planning.” Either or on paper or in your head, sketch out what you think the page should look like. Then write the HTML to get things arranged in the top-down way that you need. Then add CSS to make it look pretty. I think as you get better, you can plan a little more on the fly and know when you need strict planning and when you can just code in a Kerouacian stream of consciousness, but in the beginning, err on the side of planning.
Don’t let a fear of making mistakes paralyze you with fear. On more than a few of these projects I’ve gotten halfway into it and had to start over. Every mistake is a chance to learn. If you aren’t making mistakes, then you’re too much in your comfort zone. You’ll learn more from making a couple failed attempts before succeeding than from timidly working your way to a solution.
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.
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.
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.
Thanks alot man, appreciate the detail!
Im currently planning it out on paper and taking it step by step.Hopefully second attempt goes a bit smoother than the first.
I think the main problem im having with this challenge was that it is set out as only using bootstrap classes on my HTML. My first thought when planning this page out was to use alot of my own CSS.
But I suppose thats the point of this challenge.
I don’t think you must use Bootstrap. According to the challenge:
Fulfill the below user stories. Use whichever libraries you need. Give it your own personal style.
Maybe people do use Bootstrap. It’s especially useful if you want to have any kind of a grid. I used it to put some columns in it (so I could have images side-by-side) but also used a little CSS.
The example given and the video mentions that he used stock Bootstrap and no custom CSS, but that doesn’t mean that you must. I think he was just trying to emphasize how simple it could be. Just use what you want. You just need to meet the user stories:
User Story: I can view a tribute page with an image and text.
User Story: I can click on a link that will take me to an external website with further information on the topic.
As long as you meet those requirements, and looks good, and is original work, you’re golden. I’ve seen some tribute pages that use extensive CSS and even some using JavaScript.
But I say keep it simple. Just make a simple page that looks good and meets the user stories. That’s all you need.
I made my Tribute page using semantic-ui - If that’s wrong, I don’t want to be right 
That’s what the dinosaurs said when someone suggested putting on a sweater. 
Don’t mind me, just reply stalking/book marking helpful tips. 
@marchibald92 Thanks for posting this topic. I’m just starting my tribute page, and I know exactly how you feel. But @kevinSmith your response was perfect–and I needed it. Thanks to you as well.