Understanding <div></div> tags

Hi. so I am going through my CSS flexbox and grid lessons. I am completing all the challenges but really not underrstanding the big picture, if you will. I don’t know how to create the elements that I’m creating a grid for! I think it has something to do with div tags. Like would I just create some boxes and move them around for kicks? I really don’t get it. I have never coded before. I understand that website layouts are organized but after these exercises I wouldn’t know the first thing about how to apply my newfound knowledge.

1 Like

First of all, this is confusing stuff, go easy on yourself. And the “I don’t see how this all fits together” feeling is normal in the beginning. I don’t think things really started to sink in until I started doing the challenges. More accurately, after my first failed attempts at the challenges. And really, there were “things I didn’t understand” that kept going for sometime. Some still do. Don’t worry if there are things that haven’t sunk in yet, just keep learning.

For your specific question, do you have a code sample and an explanation of what it is doing that you don’t want it to do or what it is not doing that you want it to do? The more specific the question is, the better the answer will be.

I don’t deal with it much (as a mobile developer) but one potential gotcha of div is that if is a block level element so it can have some unexpected behavior until you understand them.

1 Like

Kevin,
Thanks for emailing me. I noticed in the forum that I can’t use these<> things…it seems to just erase the whole element! So I’m working on my tribute project. Here is the linkTribute page. I would like to put a nice gray box under the body to separate the pink font from the darkness but I’m not sure how. I believe that I may have learned how but I’m not sure that I learned how to put boxes behind text or make text stand out.
Thanks!

Also, there is more that I’m confused about but I’m going to get back to you.

https://codepen.io/meowww/pen/vYZNNjR

Right, the forum interprets them as code. If you want to show them, there are a few ways. you can put three backticks (the upper left on the keyboard, usually) on the like before and three on the line after.

```
<h1>howdy</h1>
```

If you want inline code, you can add do it with a single backtick before and after, like this:

I use the `<p>` element a lot.

I hope that helps.

I see your pen. What is it doing that you don’t want or what is it not doing that you want.

Thank you so much for your time:
Like I was thinking of adding a background to the image of Steve Jobs. So I created a class .silver-color{ background-color: silver;}
Then , when I added the class to my tag, nothing happened.

It is adding a silver background. The problem is that the background for that img is the exact same size of and is covered by the image. You can “reveal it” a little by adding padding: 10px to the .silver-color class. Now it will be 10px wider on each side.

Or did you mean the background within the image? That’s not my specialty, but I would expect that to need editing the image offline to add transparency or some really fancy work with things like filter.

1 Like

Another forum member recommended to me some resources on CSS to check out, one of which was Kevin Powell on YouTube. I looked him up yesterday and was watching his videos on creating flexbox, and it was really helpful! I was able to at least create a couple of flexboxes for my survey form project. I need to revisit his video as well as my code to play with how it looks, but I found his instructions to be more in-depth than the few lessons in this coursework.

Micha.ella,
Thank you so much! I will check him out.

I agree with micha.ella - Kevin Powell has excellent videos. Flexbox is relatively easy except for positioning - that can be a little confusing. Grid is harder but not impossibly hard. I think Kevin Powell recommended 3 YouTube channels for learning Grid:

  1. Rachel Andrew → Rachel Andrew - YouTube
  2. Layout Land by Jen Simmons → https://www.youtube.com/c/LayoutLand
  3. Wes Bos → https://www.youtube.com/c/WesBos

Kevin’s channel is https://www.youtube.com/kepowob

I use this website for flexbox: Flex Cheatsheet
And this one for grid: Grid Cheatsheet

1 Like

Jim,
Thank you for your help. I will check these out. There’s numerous free coding modules or videos online. I do believe that I can learn everything for free. How are you doing with coding and so forth?

Starting to understand JS but there is so much that you need to learn - it’s overwhelming at times.

I haven’t even started to learn JS.

Don’t worry about it. You’ll get there when you get there.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.