Confused with Courses/expectations ,Brand new to Coding

I am 100% sure someone else has been in this situation, probably even wrote a request for help also. I searched and wasnt able to quite find this same thought that I am having.

Let me apologise first if this seems like a rant, I am just disappointed at the moment.

I finished the first curriculum. I get to the first project, and its like I opened up something I never even looked at before. The first curriculum is roughly 190 courses, with what feels like just Copy/Paste directions to move on to the next course. Then the project (tribute) asks you to use these User stories, that are phrased in ways that the courses didnt even phrase them as. Example : * User Story #4: Within the img-div element, I should see an img element with a corresponding id="image" .

The only time I ever even saw Div in the course was on course 25 " Nest Many Elements within a Single div Element". That course Just simply said, Div is used often. Then this project is like use div this and that and here and there, and the course gave me 0 idea how to properly use this code, and use it often.

That is just one example, but its the same with ID tagging, Image resizing, and such. The course just went over it 1 time, it had me just copy/paste the pre written code to a pre determined spot. Then tells me to create this project expecting me to fully understand how to…

Would it be more wise to just focuse on more courses before even attempting a project?

Again, sorry for the rant. Did this course for a full week, roughly 2-4 hours after work each day and a full Saturday, just to get to the project and be side swipped by statements that make only 2% sense.

I think it may be a good idea to take a course beforehand. The course you choose can be something as simple as a youtube search, such as: “build an X with HTML/CSS”, where X is anything you think you’d like to build. This way, you’re learning HTML, as well as how to apply it. After just one of such courses, though maybe two, or three, you’ll come back to FCC, and be familiar with just about all of the HTML on there, as you’ve seen them applied in the real world.

You’ll also understand the user stories much better. Also, don’t make the mistake of just using freeCodeCamp. While it’s fantastic, you’ll need to make use of other resources. So, when you’re on a lesson for div, for example, open up a new tab and do some further research into what div actually is; likewise for any lesson you feel is lacking content.

“As a “pure” container, the <div> element does not inherently represent anything. Instead, it’s used to group content so it can be easily styled using the class or id attributes”

Keep in mind it is a struggle when first starting out. It’s unfamiliar. Just about everyone has felt the way you’re feeling.

Thank you, I was telling my girlfriend that what this site lacks is an Index. You learn a term/sign/tag/element, and then its used 1 time and is expected to remember. While I searched Div, I just got a standard definition, but that site you linked makes so much more sense. Here is it in use with HTML, Here is how its applied to CSS, here is what it looks like. Simple!

1 Like

If you dont mind, can I pick your brain for some other information?

When building the portfolio, that was the first time I have seen a Box for HTML code, and a box for CSS code. When you are building a page, do you just layout all the HTML code first, then once you have that completed, go back into the HTML side, add the CSS needed tags/ids then create the CSS code?

Is this also true in general for building anything when using multiple codes? Build with one, go back through add what is needed to build with the other?

While I’m sure everyone does things differently, I have a preferred way to do things.

Before actually writing anything, it’s best to draw a picture of how you want everything to look, and then go from there. For instance, if the first thing on my picture is a navigation bar, then I’ll start writing the code for that, including the CSS, targeting the the tags/ids/classes(which I usually come up with before writing the CSS). Once that’s complete, and looks how I’d like it to, I’ll move onto the next section of the picture. To keep things simple, we’ll say it’s an introduction, with an <h1>Title</h1>, and some text describing the site: <p>Qui eligendi, error consequatur voluptates officia vero vel deleniti, placeat quaerat eius facilis commodi cumque, explicabo possimus mollitia aliquid. Doloribus, quos optio?</p>

Simple, eh? Well, let’s add this introduction in a <div></div>, so that we may specify this sections styling.

<div class="introduction">
  <h1>Title</h1>
  <p>
    Qui eligendi, error consequatur voluptates officia vero vel deleniti, placeat quaerat eius facilis commodi cumque, explicabo possimus mollitia aliquid. Doloribus, quos optio?
  </p>
</div>

Here, I predefined the class="introduction", because I was aware beforehand what it was going to be. And now in styles.css, we can target the elements within the introduction class:

.introduction { 
  font-size: 1em;
  font-family: sans-serif;
  ...
  color: #333;
}

So, being aware of what you’re doing, with your picture being a sort of predefined template, makes things much easier, as you’re aware you need an introduction, create the <div></div> with a class of introduction, and so on.

This is my preference. Some people recommend writing out all of your HTML before even touching CSS, but I like to write out all of the code for each specific section, and style that, before moving on. It may be considered bad practice.

I’m definitely not an HTML/CSS genius, by any means, but I hope this answered your question, and then some! Feel free to reach out with any other questions, you can message me, if you’d prefer.

Thanks for that response. It did answer at what I was getting at. The way you do it is just a different version of what I was getting at. Ultimately I was trying to figure out if you should focus on X before Y, or Mix in doing X and Y at same time but in segments. Your route is Mixing X and Y, and doing it in segments. Which makes sense to me as well.

2nd question this has lead me to =
Does it matter in what order your CSS code is inputted? For example, you finish the Intro of your doc with the HTML done. Then you move to the next segment being the body. In the CSS, side you wrote the body css code first, then afterwards wrote the Intro css code.

I hope this makes sense. What I am trying to figure out, I believe, is formatting of the CSS code. HTML makes more sense formatting wise because you start at A and end at Z. But CSS isnt that simple since you can format Heading/Body/Font/Image/Links/Spacing and such.

Ok, so if I’m understanding you correctly, you’re asking whether or not it matters if you target body after you target something like .introduction, correct? If that’s the case, then it will not matter in regards to having a functioning site, it will still look/function the same, but in terms of readability, I don’t think it would be appropriate.

You generally want to target elements that appear first in your HTML, i.e. body. If the first thing within your <body></body> tags is a class .introduction, then you’d want to target that next, and so on. It does get complex when you have 1,000 lines of HTML, and need to add a new feature, including styling, but can be made easier with the proper sectioning, and class/id names.

Example:

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <div class="introduction">
        <h1>Example</h1>
        <p>Hello, world</p>
   </div>
  <div> 
   <!-- Some more stuff -->
  </div>
  <div> 
   <!-- Yet some more stuff -->
  </div>
  <footer>
  <!-- bottom of page -->
     <p>&copy; Company Name</p>
  </footer>
</body>
</html>
/* style.css */
body {
    color: gray;
    background-color: white;
    font-family: sans-serif;
}
.introduction {
    color: green;
    background-color: purple;
}
/* other div styling */
...
/* end other div styling */
footer {
/* last element on page */
    text-align: center;
    background-color: black;
    color: white;
}

I apologize for writing so much! Hopefully that’s what you meant, and this cleared things up. Also, some people add their CSS rules in alphabetical order, but it’s not necessary:

footer {
    background-color: black;
    border-top: 1px solid red;
    color: white;
    text-align: center;
}

This might be worth looking at as well: https://github.com/airbnb/css. It’s a “styling guide” for producing clean, readable CSS.

1 Like

Thanks again, you did answer what I was getting at. Basically, while it may not affect the outcome of the Document itself, it affects the status quo of readability.

I appreciate the input, I realize now that I just didnt understand the Formatting once it was all put together. The first project was vauge in description, then the link it referenced used code that, while proper, wasnt what I had seen in all 190 courses.

Simply put, the project expected the user to be able to put all the courses (minus the assisted reading type coding) together as one, without having seen any “this is what it will look like completed” type courses first. After talking about it here, going to that link you provided, doing a search for just HTML learning at https://www.tutorialspoint.com/html/html_overview.htm , im learning a little bit better.