Front-end projects why i felt hard to build them?

1

After Solving Simple HTML, CSS, jQuery Challenges i went through two front-end Projects Tribute page & Portfolio page.
Seeing Sample Examples of what i had to build I felt like its very hard to make these projects.
After Struggling a lot i saw the code of those examples and figured out that most of the classes used were those which i never heard of . Some how i managed to make the tribute page but than i saw portfolio page example (use of nva-bar, scrolling etc) which was very difficult .

my question is - Is this normal or i have made some mistakes while learning html,css and jQuery . what i have done through challenges and what i have been given as projects are totally different. please suggest me what should i do? I Should reverse engineer what is given as example projects, or just make projects according to basic requirements with different style than the one given in Examples?

1 Like
2

If those projects were your first attempt to build something on your own, without any guidelines about what to search and how to build, you are on the right track. It is hard, it becomes less hard with time. Some things even become easy. I remember a few years ago I couldn’t even wrap my head around AJAX calls, now I use them for everything. If the community can help you with anything, just ask, we will be happy to help you if you wish to continue on this path.

The thing is, before the projects you had only built smaller pieces of code, that way you learnt how to write the language of your choice, you learnt how to search for things you didn’t know and how to apply your knowledge to new documentation, which is the most important thing in programming.

For my front-end projects I started by doing the app with the basic requirements. It is up to you whether or not you want to add additional things to the project or just skim thru’ it.

Hope it was helpful!

3 Likes
3

Thanks for the advise , surely if i am in correct path than i will continue to be in this path.

1 Like
4

Piggy-backing on what @lorepieri said, which is completely correct. You are going to struggle. Believe it or not this is the biggest benefit of Free Code Camp. It will take you through most of the basics concepts and syntax then it forces you out of your comfort zone to create something you’ve never created before. On your own. There is no hand holding. It requires you to think and apply the Read-Research-Ask method. This is what many programmers do on a daily basis. So if you are struggling right now, youre actually right where you should be lol. I am in the same position and am almost done with my portfolio page. Ironically the ‘struggle’ has helped me retain and apply a lot of new information. Keep on going and I hope this was helpful as well!

2 Likes
5

I understood one thing from freecodecamp Struggle gives you better Knowledge Than Comfort.

1 Like
6

my question is - Is this normal or i have made some mistakes while learning html,css and jQuery . what i have done through challenges and what i have been given as projects are totally different.

Completely normal. Don’t sweat it. There is a gap between what fCC teaches you in the training and then what you need to know to put it all together. Most of the pieces are there, it just isn’t clear yet how they fit together. Your confusion is completely normal.

I think the key (especially in the beginning) is to break it up into small task. If you try to look at the big picture, you will get drowned in indecision. Just focus on little tasks. This is the standard advice I give to people struggling with the first builds:

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.

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

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

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

If you go back through the training, you’ll see that all of those things are addressed, more or less - just that it’s not immediately obvious how to connect them together. Just keep it simple and go step by step.

2 Likes
7

good question i wanted to ask the same thing
i thought i accidentally jumped to the last lesson on the map
10 q for the question