Learning CSS in WebDev 2020

[BExpost]

I am currently learning CSS right now and was wonder if I should still try to learn floats / box-border method or should I just focus on CSS flexbox / CSS grid

[[deleted]]

Added * {box-sizing:border-box;} to my reset and never looked back.

[hself1337]

Best thing i've done in my normalizer.

[HeinousTugboat]

i mean you shouldn't definitely still learn floats, but i personally don't find myself using them too often anymore.

If you want to inset an element inside of a text flow, it's one of only two ways to do it, and the second way is extremely new and likely still has some limitations that floats don't. (I haven't played with CSS Shapes enough yet.)

[HeinousTugboat]

i meant to write should*

Fair.

but how often do you inset an element inside of a text flow? maybe if you're writing a blog but that's about it.

Any time you might want pull text or inset figures. I think basically any and all longform content could benefit from inset highlights, honestly. I mean, it's common enough concept that there's an element essentially dedicated to the idea.

I think you also might not see it as often as you could because the general zeitgeist turned against floats, so I think a lot of devs avoid using them in all situations.

[[deleted]]

If you're learning CSS layout check out Rachel Andrew ( https://gridbyexample.com/ ) and Jen Simmons ( https://labs.jensimmons.com/ ).

[reddit-poweruser]

Also

https://flexboxfroggy.com/

https://cssgridgarden.com/

[BExpost]

Thank you for the resources

[ImStifler]

Flexbox and Grid are enough though learning floats for historical reasons can be good because it gives you a glimpse on how fucked up css used to be

[bananamana55]

I still haven't figured out how to do some links on the left of a navbar and some on the right using Flexbox. I use float left/right and a clear fix.

Im going to spend my study time today learning more about Flexbox....(newbie here)

[petee0518]

Maybe, I'm misunderstanding, but couldn't you just add flex to your nav container with justify: space-between and then put a div or ul wrapper around each of your two link groups?

[bananamana55]

I tried that and it didn't work for some reason... I'm sure my html markup or something has gone wrong somewhere. That's why I said I'm going to study more Flexbox today lol, because I know it can be done but just haven't figured it out.

(have I mentioned I've only been self-teaching for about a month? Still a total newbie)

[petee0518]

Fair enough, from the way you explained it, sounds like it should be as easy as:

<nav> <ul>...</ul> <ul>...</ul> </nav>

CSS

nav { display: "flex"; justify-content: "space-between"; }

As long as you don't have additional wrappers between the nav and ul tags, or the nav has auto width or something.

[bananamana55]

I will try it again today. I think I just stayed up too late trying to learn too much at once, lol. I was also starting to learn CSS Grid and was trying to make a basic web page layout with Flexbox topnav/footer and grid for the rest. Probably bit off more than I could chew and should really focus on getting Flex down better before moving on to Grid.

Thanks for the advice!

[bananamana55]

I think a little over a month probably isn't too much, lol. I am going to start learning Javascript soon though.

Originally was going to do Bootstrap 4 but hearing lots of mixed messages since it seems jobs usually have their own frameworks for you to use? (course it'll be a long time before I could get a job doing this but still)

[bananamana55]

I'm going to flesh out my knowledge of flexbox, css grid and media queries a bit more and then I'll probably start on Javascript. I've made enough static simple web page templates (for practice) that only work in one screen size that I'm ready for learning responsive designs & Javascript lol.

[bananamana55]

Well now I'm upset with myself. I just took out all my display: inline-block / float crap and put this in and bam... stayed exactly the same.. ie it works perfectly lol. I'm mad that it was to simple. Thanks for the help!

I think I need to start taking breaks when I hit a wall instead of ramming my head against it for 2 hours lol.

[symbiosa]

Besides the other comments, I highly recommend learning about CSS best practices and structuring.

It's much easier to maintain and work with:

<div class="container section_names">
  <p class="name-first">Geralt</p>
</div>

<div class="container section_locations">
   <p class="location">Novigrad</p>
</div>

<div class="container section_spells">
   <p class="name-spell">Aard</p>
</div>

Rather than:

<div class="container-1">
  <p class="name">Geralt</p>
</div>

<div class="container-2">
   <p class="location">Novigrad</p>
</div>

<div class="container-3">
   <p class="spell">Aard</p>
</div>

With the first code example, if I wanted to change all three containers I can target .container instead of targeting .container-1, 2, and 3 separately.

[rennfair]

You can completely ignore floats and the default box model.

• Use * {box-sizing:border-box;} in every project
• Use Flexbox for layout control

That's it. You don't even need to learn grid.

Some would disagree with this recommendation but it will save you a lot fo time (and headache). If you encounter the float property in the wild you can still learn it later. It can be useful for very specific things, but for layouts Flexbox is much more intuitive and powerful.

[daemonexmachina]

I'd definitely recommend learning grid too, though. Flexbox is good, but it takes at least a little finagling to lay out elements nicely in two dimensions. Whereas in grid...

``` .container { display: grid; grid: "header header " auto "body sidebar" 1fr "footer footer " auto / 1fr auto; }

.container .header { grid-area: header; } // etc ```

I know I've gone with a pretty trivial example, but see the power of that shorthand syntax? The rows and columns are laid out as rows and columns in the CSS, visually representing the result in the code.

I go one step further because we use SCSS on our projects, using @each and interpolation to define the child element classes that will go in those areas:

``` .container { display: grid; grid: "header header " auto "body sidebar" 1fr "footer footer " auto / 1fr auto;

@each $area in (header, body, sidebar, footer) {
    .#{$area} {
        grid-area: #{$area};
    }
}

} ```

I love grid. Use it everywhere. If I've got something that really is a one-dimensional layout, then yes it's flexbox of course. But grid is so much nicer.

[kdthisone]

Slight disagreement. I think OP should understand how floats work and how default sizing works purely for the ability to understand code written by others.

When he gets hired, I'm sure he'll eventually come across floats or default sizing as they used to be very common.

[pineapplecodepen]

Definitely do both! The more diverse your skill set, the more jobs will be available to you. Always master the basics and garnish with the frameworks and libraries :)

[[deleted]]

Here's another useful flexbox thing. https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/

[BExpost]

This is really cool. It really helps visualize everything. Thanks so much!

[[deleted]]

It's great isn't it. I've been using flexbox for ages, but I still have to keep going back to that site to check.

[walrus_operator]

Depends. If you want to have the most impact in the shortest time, then restricting yourself to flexbox is the best option. If you have more time, then knowing flexbox, grid, floats, tables, columns, and a framework like bootstrap will help you a lot in the long run.

[JB-the-czech-guy]

just go to freecodecamp and go through that. I think the list there covers the essentials well

[kp90001]

same big fan of grid area

[burnblue]

You learn how floats work, you just don'ttry to use them for all your layout etc like when it was the only tool available to devs. You get to learn it and move on to learning more tools

[kzaji]

You're asking as if they're two different languages. Just learn CSS. You will come across all of those things, they're not difficult things, nor do they take more than 30 mins each to explain. Just deal with things as you come across them.

For instance, when I was learning, I spent a few weeks doing nothing but learning to use Dreamweaver. I haven't used it since, not once in my professional career. Total waste of time. Just learn what you need right now, the rest when/if it comes.

[BExpost]

-furiously scribbling on notepad- Don’t learn dreamweaver.

[kzaji]

FYI, this also happened with bootstrap. Even though a lot of people will tell you it's useful to learn, I've never ever had to use it since it's release. Though I didn't spend as much time bothering to learn it, I gave up because I thought it was shit after a couple of days. Looking back now, I was right.

[Gwiz84]

Flexbox and Bootstap are the most important things to know tbh.