I'm going to make the first project for Responsive Web Design certification, but I forgot nearly all of the important HTML and CSS tags for the project. Help?

Question in title, that’s all

You can just look it up in FCC or Google(I suggest W3) and copy paste the tags. I think most programmers do that in their real job too that is search copy and paste. You just have to know in the back of your mind that such a element like that exists then go ahead and search for that and copy and paste. Like for example how would you create forms. You should know there is a tag for form out there then go ahead and search for it. Navigation bar at the top? Same process.

2 Likes

Google is your best friend. I did endless Google searches like “html tag for forms”, “html tag for headings”, “html tag for bold words”. You’ll memorize a lot of the common tags as you start using them more, but it’s fine to not remember them. W3 Schools and Stackoverflow are great. You’ll see lots of Google results from them.

3 Likes

In the projects, you are not allowed to copy the code from anywhere. You can ask questions here, or search Google. When I think I’m not ready for the projects, I revise the courses

I’m trying to make my own code for the projects. About the tags, I can search them on Google, but then there’s too many tags I forget (I can’t remember anything about CSS, except for some tags which are not needed for the project), and I don’t understand the requirements/User Stories (like WTF is I should see a div element with id="img-div?)

It’s always good to have a reference. One you can bookmark is devdocs.io.

This is pretty straightforward. It’s nomenclature you learned in the lessons. Maybe this will help.

HTML tags vs elements vs attributes

HTML tags

Tags are used to mark up the start and end of an HTML element. The following are paragraph tags.
<p></p>

HTML elements

An element in HTML represents some kind of structure or semantics and generally consists of a start tag, content, and an end tag. The following is a paragraph element:
<p>This is the content of the paragraph element.</p>

HTML attributes

An attribute defines a property for an element. It consists of an attribute/value pair and appears within the element’s start tag. An element’s start tag may contain any number of space separated attribute/value pairs.
The most popular misuse of the term “tag” is referring to alt attributes as “alt tags”. There is no such thing in HTML. alt is an attribute, not a tag.
<img src="foobar.gif" alt="A foo can be balanced on a bar by placing its fubar on the bar's foobar.">

2 Likes

can I just use a cheatsheet with all of the tags? (like this or this)

Yes you can. The reference I pointed you to is basically the same.

Here’s a good reference for Flexbox and a good reference for Grid.

One thing I will say is when you do your projects use external styling. Do not use internal or in-line styling. (Your first this has examples of all three).

1 Like

Hi AltFantasy.
For Google you have just research let’s say H1 or headings tags like HTML Headings or MDN HTML h1 something like that.

Let’s look at that specific project:

One important aspect to remember with HTML is Element vs Attribute.
You can reread about that here Learn Basic HTML and HTML5: Introduction to HTML5 Elements | freeCodeCamp.org its like the 5th or 6th part of the HTML section.

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

You have to pick out what is important here. For example “My tribute page” probably refers to the body tag.

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”).

Here an ID of title is probably referring to a heading tag.

User Story #3: I should see a div element with a corresponding id="img-div" .
This one is relatively clear stating you need a div element.

User Story #4: Within the img-div element, I should see an img element with a corresponding id="image" .
Right here is where you should really start your journey googling how to do an image element.

The rest of them are not exactly easy for someone starting out. But to grow you need to stretch and try crazy hard and getting some things. Its okay not to know what they are asking. But you have to be able to “google it” if you don’t.
I will leave the rest to you.

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.

That is the main point of the projects. No one can remember all of the information they have been given in the format of challenges. You have to start using it to build stuff. The more you use the information the more it will stick.

It’s like learning about all the ingredients that go into baking a cake and then being asked to bake a cake. The two are related but you are very unlikely to be able to bake a cake just because you know about the ingredients in a cake. Your first cake is likely not going to be all that great. It takes time and practice to get good at anything, be it baking a cake or coding a website.

Also, learning how to obtain the information needed is a vital skill to learn. Getting good at searching and reading docs are super important skills.

2 Likes

This is actually perfect! From what I understand so far you’re not supposed to remember everything but instead have a vague understanding about the parts behind the styling and the markup of web pages after going through the lessons.

The projects are meant for us to actually draw upon what we understood and to make us go back to the lesson on topic we didn’t understand.

Think of lessons as messing around with tools (e.g. hammers, nails, screwdrivers etc.). It’s super helpful to get comfortable with tools before building anything.

The projects are just opportunities to actually design, make mistakes, relearn concepts, and essentially learn how to build cool things you envisioned in your head (no matter how small).

Goodluck :blush:

1 Like

Can I use the example for references?

Also, what do you mean by using external styling? Is it by doing something like <style></style>, or linking the CSS code to HTML with <link href="">?

no, don’t look at the code, and don’t copy it, make your own page with your own style

Watch freeCodeCamps HTML and CSS YOUTUBE tutorial just go through the video till the end in sha Allah you will learn a lot and you will be able to make a rerresponsive website
also write notes :ledger:and take summary on what you have learnt

Happy Coding!

No. You shouldn’t refer to the sample projects. They show one way the projects can be completed. The hardest part of coding is looking at a problem and coming up with a plan to solve that problem. Starting out by looking at someone else’s code completely bypasses that step.

Your references should be the user stories. Start by meeting each one, one at a time. When you do that you’ll have an HTML page that is not going to look very pretty and that’s when you start with CSS. Styling it to give it your own personal style.

Refer to the “cheatsheet” you and I both were talking about.
Also, this is a question you should look up. FCC says to use the Read Search Ask method.
You’ve read through the lessons. You have references that you linked and that I linked so you can read through those.
Search for things. As a developer you will spend a lot of time searching/researching. You won’t be able to turn to the person next to you and ask for an answer. You’ll be expected to know how to search and find the answer for yourself.
After you’ve come up with something that may not be exactly what you want then you can ask for help. Guidance for how to get that extra little tweak.

I don’t know, I looked at the user stories and it seems too complex to understand for me, so I decided to look at the example code to understand what does the user stories mean, it’s better to look at the sample code, then make one with your own style that fits the requirement IMO

I hope you’re joking, cause I don’t understand the user stories, and the sample code helps with understand what to do more than if I’m just looking at user stories, and ofc I’m going to make my own style, I’m just looking at the code to understand what do the user stories mean

Why ask for advice if you’re going to ignore it?

What was “too complex”? Throughout this whole topic there was advice given on how to interpret the user stories.

As I said earlier, the hardest part of coding is looking at a problem and coming up with a plan to solve that problem. Starting out by looking at someone else’s code completely bypasses that step.
The projects are not just another challenge. Each one is meant to be a significant step in your progress. Every project you do will require research, planning, trial and error, and strengthening your skills beyond what you gain from the incremental challenges.

I looked at the code for my first one too. If you’re using that strategy as a tool to understand how to approach this very first project, I don’t think that’s a huge deal. But looking at someone else’s code in order to understand how to solve a problem cannot be the norm. Since you’ve already been using the code in the example on this first project, go ahead and finish using that strategy. But on the next project, hold yourself accountable for NOT looking at the code and figuring it out yourself. In the end, if you look at the code for every project, you’ll cheat yourself out of the learning opportunity to develop problem solving skills as a developer. This is important, because employers/clients will expect you to be able to solve the problems they give you. It really does get easier to do this the more time you spend doing it.