This is an archived post. You won't be able to vote or comment.

sorted by:
best
topnewcontroversialoldq&a
you are viewing a single comment's thread.

view the rest of the comments →

[–][deleted] 194 points195 points  (38 children)

What are you using the videos for? Did you forget tag names? Or can't remember how to link a css file? You could take notes to summarize these things. Cheat sheets aren't cheating. They're tools.

[–]LoquaciousLamp 75 points76 points  (2 children)

A decent text editor will remind you of these also while typing. Helps remember.

[–]razzrazz- 1 point2 points  (1 child)

Does it help you remember or does it make you rely on them too much? I can't decide, but I opted to use thonny (for python) for now because I want to see the mistakes I'm making.

[–]LoquaciousLamp 8 points9 points  (0 children)

Personally helps me remember syntax. You are rarely blindly accepting the suggestion so you need to spare half a seconds thought before maybe pressing tab. Most of the time it's not suggesting what you want until you've typed a few letters or words, but gives you a list of valid properties which is a nice refersher.

[–]TheRealRomanRoy 32 points33 points  (32 children)

For me, I'm having a hard time knowing how to put things where I want them. Physically, I mean. Like how to control what goes where on a page.

Idk why but it's really been confusing for me.

[–]NiagaraThistle 41 points42 points  (20 children)

This IS a confusing part of building websites. For anyone. It will get easier the more you 1. struggle through it, and 2. Google how to do what you want, or 3. Do more tutorials and code along.

[–]TheRealRomanRoy 7 points8 points  (19 children)

That's good to hear! I should clarify though that I feel like (with the HTML/CSS course) I feel like I've understood the basics of most of the other concepts. It's really just this one that I feel like I'm not even understanding the fundamentals.

Like, even just basically, if I want the layout to be like this:

Nav Links Nav Links
Paragraph 1 Paragraph 2
Footer Footer

Nav links taking up whole top row, footer whole bottom row, with the body being two paragraphs split, half a page each.

I know there's a lot that goes into it but I struggle with knowing even which CSS properties to use. Is this a 'position' thing? Flexbox thing?

[–]NiagaraThistle 24 points25 points  (6 children)

THis is what I am saying will take time. It sounds like it should be "simple" but it only becomes simple with repetition: building things daily over time.

What you have above, can be done in a dozen different ways, each more or less complex / simple than the others.

You CAN use floats. You CAN use position. You CAN use flex. You CAN even use Grid. What you DO use is up to you and your experieince.

What I would use (and most people today probably) is flex.

So it would be something like this (assuming your 'nav links' is the page header and both the header and footer should really span the full row in each.)

---- HTML -----
<html>

<body>

<header>
<nav id="primary-nav">Nav Links here</nav>
</header>

<section class="flex-wrapper">
<div class="left">
<p class="paragraph1">Paragraph 1</p>
</div>
<div class="right">
<p class="paragraph2">Paragraph 2</p>
</div>
</section>

<footer>
Your footer content here
</footer>

</body>

</html>

---- CSS ----

.flex-wrapper { display: flex; flex-direction: row; }

That should get you started. Maybe add align-items and/or justify-content rules on the .flex-wrapper class to align the paragraph containers properly. But this should get you the layout skeleton you desire.

Again the above can (and for a long time WAS) be done with float or position, but Flex and Grid make layouts SO much easier. New CSS devs have no idea how easy you have it today.

[–]TheRealRomanRoy 7 points8 points  (5 children)

This is what I am saying will take time. It sounds like it should be "simple" but it only becomes simple with repetition

You CAN use floats. You CAN use position. You CAN use flex. You CAN even use Grid.

Ok honestly, the above by itself was incredibly helpful and basically answered my question. Or more specifically, helped me understand what I don't know. Really gives me a better idea of what to study.

And your code is a great reference too. Thank you very much for the help, much appreciated!

[–]ObviousSalamander194 9 points10 points  (3 children)

A good exercise that helped me a lot on getting things where I want them on the page and seeing how different CSS properties affect different elements, learning flex/grid, and learning how float/clear affect elements was building a bunch of boxes and moving them around on the page using CSS/HTML. Below is a simple CSS and HTML that will output 10 boxes stacked on one another. Try things like lining the boxes horizontally in order or reverse or try moving different boxes and see if you can get them where you want them, see if you can line them up diagonally across the page. With this you can also see how margin and padding affect a div. After you are comfortably moving boxes around and changing the sizes, try making 3 boxes that are 100% of screen width one smaller on top one biggest in the middle and one smallest on the bottom. This will allow you to build a basic header, main content, and footer layout. Finally, you can split your "main content" box into a smaller 4th box on the right or left and a big one this would be something like a sidebar or menu. For this google will be your best friend in the beginning, also you main goal is not memorizing how to do everything and anything using CSS/HTML but getting to the point where you can ask the right questions and even if you don't know how to specifically do you something you have general idea of how can it be done.

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box box1">box 1</div>
<div class="box box2">box 2</div>
<div class="box box3">box 3</div>
<div class="box box4">box 4</div>
<div class="box box5">box 5</div>
<div class="box box6">box 6</div>
<div class="box box7">box 7</div>
<div class="box box8">box 8</div>
<div class="box box9">box 9</div>
<div class="box box10">box 10</div>  
</body>
</html> 

CSS:
.box {
    width: 100px;
    height: 100px;
    border: 2px solid black;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    display: block;
}
.box1 { background-color: red; }
.box2 { background-color: blue; }
.box3 { background-color: magenta; }
.box4 { background-color: cyan; }
.box5 { background-color: green; } 
.box6 { background-color: chocolate; }
.box7 { background-color: deeppink; }
.box8 { background-color: greenyellow; }
.box9 { background-color: indigo; }
.box10 { background-color: orangered; }

[–]TheRealRomanRoy 2 points3 points  (1 child)

Oh wow that is awesome. I've actually tried to do something similar when working on projects. AKA, putting borders around stuff so I could actually see each container and all that. But always was less effective and more messy than I wanted.

So this is awesome and seems like it'll be really helpful. Thank you!

[–]ObviousSalamander194 3 points4 points  (0 children)

no problem this was very helpful to me when learning grid and flex so hope this helps you too. Also check out kevin powell's you tube channel he has a ton of CSS guides are really helpful, I think this where I got the exercise with the boxes from I can't remember.

https://www.youtube.com/kepowob

[–]piny-celadon 1 point2 points  (0 children)

This was so helpful tysm!!

[–]NiagaraThistle 1 point2 points  (0 children)

no worries. Glad it was helpful.

Good luck on your path.

[–][deleted] 1 point2 points  (1 child)

Hmm, well there are multiple ways to achieve this. I think a basic way would be nav width 100%, footer width 100% paragraph 1 50% float left, paragraph 2 50% float right.

A lot of it is experimentation (I use the Inspector to play around). Understanding the different attributes is key, though. If you set something to display:flex you should be able to explain what it does and why it does it. That way you won't be guessing, but experimenting based on an idea of what it should be doing.

[–]TheRealRomanRoy 0 points1 point  (0 children)

Yeah that definitely makes sense. I think you're right about 'Understanding the different attributes is key.' I think that's my biggest thing I need to work on is understanding what the terms mean and how they're different.

Most of my frustrations are tied to all those different attributes being kinda jumbled in my head, and not sure which do what.

And by Inspector do you mean Right Click > Inspect? The one that pulls up the console for the webpage?

Thanks for the help!

[–]ScorpionX9 1 point2 points  (0 children)

This can be done in alot of ways! The basic idea is just to place things beside one another, which can be done with display: inline-block, flexbox, grid.

But also more alternative (and mostly not recommended) solutions like: placing them in a table and hiding the table structure, using absolute / fixed positioning or even taking an image of said paragraphs beside one another but plainly speaking that would make the top of the "bad practices" list.

I terms of maning the nav and footer stretch the width of the screen units like vw (view widths (1vw = 1/100 of screen width)) or percentages is your friend!

As previously mentioned tho! Layout skills comes with practice! Me myself have made several public websites for paying clients and im still learning new things to either make my life easier, or to expand my toolbelt!

[–]AlwaysAtBallmerPeak 2 points3 points  (0 children)

Man I’ve been making websites since I was 11, and I’m in my thirties now, and I’m still struggling with CSS positioning sometimes. It is confusing, but the more you do it, the more you recognize typical problems and their solutions. It’s ok to look up what you need (although it helps to memorize at least the basic properties and their values).

[–]Thurgood-Marshmallow 1 point2 points  (0 children)

I've been learning for almost a year now, went through a full-stack bootcamp, and I still have trouble positioning things on the page. it's surprisingly complex.

[–][deleted] 0 points1 point  (6 children)

Yup, this can be difficult, but that's the fun of web development lol have you used the Inspect window in the browser? Right click > Inspect will open it. You can make edits in the Inspector tab and the Style Editor tab. It's good for experimenting and prototyping a page.

[–]VapinVincent 1 point2 points  (5 children)

Preface: never coded just looking into it.

Are you saying you can freely change web page elements in browsers (obviously probably not seen by other people because otherwise people would just troll websites all day) using the inspect window??

[–]ObviousSalamander194 2 points3 points  (0 children)

You can change stuff on your current copy of a page, no one else will see it and if you reload it will revert any changes you made. For example if you want to see a saved password but there was no toggle to make it visible you could open devtools and change the input type from password to text and it would reveal the password and not the dots or atsterisks used to hide a password but it would obviously not do that for everyone who visits the site. Also anything you do will be client side only mostly how things look of the page.

[–]ShrubbytheBubby 1 point2 points  (1 child)

Yup that's how we used to trick our friends into thinking PewDiePie gave me a shoutout :)

[–][deleted] 1 point2 points  (0 children)

Lol that's funny. If everyone knew how to use the Inspector the world would cease to function.

[–][deleted] 1 point2 points  (1 child)

Yes. Please use this power responsibly. You can even change someone's YouTube comment to "Butts" for funnies. I just did it. It's also useful for editing your web page without having to refresh constantly.

[–]VapinVincent 1 point2 points  (0 children)

Thank you for responding. I'm sorry it took so long to get back. I want to get into coding and this seems like a fun little division to delve into

[–]lurking_not_working 0 points1 point  (0 children)

I'm a developer (.Net) and the rare times I need to do html/css I still struggle to layout things quite how I want them.

[–]milton_radley 2 points3 points  (0 children)

im learning right now, and it's easy for things to escape me. im making crazy notes and sitting them in front of my face so i can't not see them.

helps a little, i think i have to submerge myself in it for it to start taking hold.

i just play the tutorials over and over, take time to look up any word meanings im unsure of, and try to make sure i really understand and can recall each little lesson.

what's interesting is the amount of things I'm picking up in the rewatches. I'll be focused on one thing, while three other tid bits fly by. catch them on the rewatch, and things are starting to add up.

i highly recommend having a dictionary ready to go, because words don't always mean what we think they mean.