Responsive Web Design Projects-Don't understand

I don’t just get it.What am I making?How should I make it?

User Story #1: My tribute page should have an element with a corresponding id="main" , which contains all other elements.

User Story #2: I should see an element with a corresponding id="title" , which contains a string (i.e. text) that describes the subject of the tribute page (e.g. “Dr. Norman Borlaug”).

User Story #3: I should see a div element with a corresponding id="img-div" .

User Story #4: Within the img-div element, I should see an img element with a corresponding id="image" .

User Story #5: Within the img-div element, I should see an element with a corresponding id="img-caption" that contains textual content describing the image shown in img-div .

User Story #6: I should see an element with a corresponding id="tribute-info" , which contains textual content describing the subject of the tribute page.

User Story #7: I should see an a element with a corresponding id="tribute-link" , which links to an outside site that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of target and set it to _blank in order for your link to open in a new tab (i.e. target="_blank" ).

User Story #8: The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.

User Story #9: The img element should be centered within its parent element.

I don’t just get it.What am I making?How should I make it?

I don’t just get it.What am I making?

The project description is here and it provides a link to an example. You are making a “tribute page”. It can be about anyone/thing you want and doesn’t have to be exactly like the example.

How should I make it?

That’s an excellent question. When a web developer is giving a project, how do they know what they need to do to successfully complete the problem. One way to do that is with “user stories”. In other words, from the perspective of the user, what do they expect this page to do,. Now, these user stories are a little more technical than I’m used to, but this is all in the realm of the possible. So, the first one.

User Story #1: My tribute page should have an element with a corresponding id="main" , which contains all other elements.

Can you create a codepen page? (Or something similar?) Then, can you follow that user story and creates a div as described?

Just step through the user stories. At the end, your page will be tested against those user stories.

Yes, the transition into working on the projects is a difficult one. Nearly everyone goes through it. Just do what you can and let us know where you get stuck.

1 Like

Where should I put my code.Should I put it in Codepen?

That is one option, yes.

You can create a pen with your project and link to it to complete the project. You can put:

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> 

in your html pane to get access to the test scripts to confirm that you’ve completed the user stories.

Ok,So where should I put the id=“main”?What is user stories?Where can I find that please?

At the bottom of the project description is:

You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js .

Just do that. You can fork the existing pen or create your own and add the test script. Or you can do it somewhere else. Some people like to do it locally, but the advantage of something like codepen is that it is really easy to get help.

How can I get help in codepen?

That’s what I use in to make all my websites,but I prefer github because I can put my python codes there too.

Ok,So where should I put the id=“main”?

The user story says: My tribute page should have an element with a corresponding id="main" , which contains all other elements.

So, you need an “element” like a div, with an id of “main” that contains the rest of the htnl code.

What is user stories?Where can I find that please?

Please read the entire project description thoroughly. (This is an important skill for a developer.) There is a link to this page that explains what a user story is.

My advice is to just start building. Just read the user stories and meet them as best as you can, one by one. Don’t worry about being perfect, and be willing to make mistakes - just start building. If you get stuck, just provide a link to your pen and we can take a look and help you out.

Yes, this is a difficult transition in the curriculum. A LOT of people get confused when they start the first project. Just keep trying and it will start to click.

1 Like

Thanks very much,I will do that

I have already started but I am not able to direct traffic to my website.I used github to host my website but it looks like nobody is visiting and there are some mistakes

I use github too. But I did find codepen was an excellent way to learn the basics. But yes, I think you are allowed to build it locally. The problem is that to pass, you have to “Once you’re done, submit the URL to your working project with all its tests passing.” How will you provide a URL to a working project? It’s doable - you can create a GitHub Pages and host them there, or some other hosting services.

The advantage of something like github is that it solve all these problems and is a more gentle introduction to building a page. The disadvantage is that you don’t quite learn how to connect these different files up - you have to learn that later.

But whatever works.

I had a problem with screen resolution,but Github fixed it all.

Once you get something working, you should be able to post a link here and have us check if it works.

Github is a repo to store your code. But they do have a service called GitHub Pages where you can host a simple, static site, which could work well for something like this. You could just create a folder for each project and put your files in there and just provide a url to the index.html.

But I am not able to direct traffic to my website with github,how do I do that?

I don’t understand what you mean by “I am not able to direct traffic to my website with github”.

What is “your website”? Why do you want to “direct traffic”? All you need is a live version of the app. That can be on GitHub Pages or can be on a completely different page. Having a git repo for the code is nice too, but can be separate.

I already have Github Pages but I know other people are not seeing my website.

Can you provide a link?

Yes,I can do that right away