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.
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.
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
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.
Tags are used to mark up the start and end of an HTML element. The following are paragraph tags.
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>
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.">
Yes you can. The reference I pointed you to is basically the same.
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).
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
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
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
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.
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.
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).
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
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 and take summary on what you have learnt
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.