Responsive web design projects general question

Hello, I’d like to ask a question, concerning responsive web design projects. Is a person concidered to be ready to fulfill all the 5 projects right after finishing all the tasks that precede them? These projects look quite frightening.
Is it okay to look through the whole code of the example (which is suggested to be forked) first, and only after that trying to write your project leaning heavily on the example code and googling all the unclear moments? (This was the only way I managed to find out how to write a tribute page). Were the projects meant to be done this way?

TL:DR Is it okay to look through the finished suggested project’s code first and to base your own project on that code?

Thank you!

Edit: No finished projects are suggested to be forked, sorry, my mistake!

You have some grave misunderstanding here, and do not try to fork example project.
Re-read assignment page again, you are supposed to fork empty project with just testing script and nothing else. That script is just there to help you see if you met technical requirements of the page.

As for if person is ready, I would say yes and no. They are ready in terms of technical knowledge, but they are not ready because of lack of practical experience of using that knowledge to actually build their own pages.
But that is exactly what those projects are supposed to give you, practical experience to help you stop “following instructions” and start “using your knowledge on your own”.

I do not know how those projects are meant to be completed, but I think that looking on example is bad idea and I would advice against it. I did same mistake and looked on example of tribute project, and my tribute page ended up looking extremely similar as a result.
Later I switched to doing projects while trying not to look on examples, and I would recommend to pretend there is no example at all, only list of requirements, I think it will help you to be more creative.

In my opinion if you will start of by trying to base your project on example, you will have trouble of learning on how to do things yourself and from scratch, which is skill you supposed to obtain at this stage I suppose.

I would start by first following step-by-step all requirements and creating page that fully passes test without any kind of content or looking good.
Once you have technical pass, take note of what things are must have in this project, close that page and try to create project focusing on design and content now. Do not worry about it passing technical test and focus on design on this second iteration, and make it look the way you want without care for requirements.
Once you are satisfied with how it looks, come back to first project were you met technical requirements and work on making it look same way as your second project, without breaking core elements required for technical pass.
I think this workflow will be best suited for someone trying to learn.

And if you are unsure of where to start, just go look on tutorials from before. It also helps to have “top-down” approach, starting from bigger picture and moving to lesser details gradually.
For example, start by thinking about how page would look in general in terms of sections, and give sections different colors. Like if you are doing it in grid layout, just make something like this:


and here is same thing but after some iterations;

Basically work on general page layout and positioning first. And after you got that part the way you want, move down and work on components inside of bigger containers.
Once you moved down to level where there is nothing to move down anymore, fill containers with actual text and content to see how it all fits and work on how it is located. Keep all the crazy different colors for containers to see how it all works with each other. I see people starting to design their work from start and then wonder where it goes wrong and why something does not fit because they cant see it clearly, since they already started to design it and that hides some information about your containers.

And once you are satisfied with location of containers and layout, work on actual design and colors.
So:

  1. Work on general page layout and make it look easy to understand by giving your containers background colors;
  2. Make sure that general layout is responsive and add @media rules at this stage
  3. Move down and work on layouts inside of those containers in same way;
  4. Fill it with content and work on positioning content and sizes;
  5. Remove placeholder colors and start designing
    It can seem silly to start from colored boxes like in tutorial, but it will help you to start and do proper layout tremendously.

Well, anyway, take my advice with grain of salt, since I am coding person, not design one, my approach to it is somewhat technical I guess.
In any case, I would advice against looking on example before you tried your hand in doing it.

3 Likes

It is wonderful to get such a broad and detailed response, thank you so much! And I like your technical approach.

I don’t think there is anything wrong with looking at the code as long as you understand what is going on, what the use of this or that is. Now, if you start to, say, copy chunks of code without knowing what the reasoning behind it is, then I believe that you should definitely rethink things. Also, there is nothing wrong with googling things, it is well known that even the most experienced coders have to google things occasionally. You obviously can use external sources to complement what you learn here on freeCodeCamp, why couldn’t you? Just do whatever you consider necessary to get there, but make sure that you understand it all! by the way, I’m just a newbie.

1 Like

There is nothing wrong with studying the code of the example to gain a better understanding of the project.
As to being ready just by completing the preceding coding challenges I would say no. This is just my opinion but I see the coding exercises to be more of a learning path that presents the foundations rather than a complete education. I think that in order to fully grasp the material you need to do further research into that topic. Read some articles watch a video or two on that topic and then move on to the next topic.

To second what arigoru said it really helps to build up your design. It can be a bit overwhelming at first but bit by bit you can refine a project to a final product. Focus on the code first worry about style second. code your html run the test, once it passes all test then start on your css.
I find it helpful to use very bright colors to see what all my elements are doing, and to make sure everything lines up like you want it.
Take this as an example:


here my goal is to get the general layout solved. Each component is given different colors and it is easy to see how they fit inside each other.
Once satisfied then I move on to the actuall styling for a final product

Last don’t be afraid to search codepen itself to see what other projects have been built. You can learn alot and gain inspiration by looking at others work.

Remember the hardest line of code to write is the first one.

2 Likes

The FCC community is awesome, thank you so much for the answers, it motivates me a lot to keep trying. Thank you!