CSS - My Arch enemy

HTML-CSS
1

I have lots of questions running through my mind.
Should I use float?
Should I use block or inline-block?
Should I use flexbox or Grid?
Should I go the bootstrap route?
Some articles advised not to use tables anymore.
How do I get better at CSS?
I get stuck all the time.
I don’t even know what I understand any more or front-end is not just for me.
Someone help! :confused: :worried:

2 Likes
2

Here is my rule of thumb.

  • Avoid floats. You can do pretty much anything without the use of floats. This is why we have grid and flexbox.
  • If you want an element that stretches entire row. Use block. If you want an element that stretches as much as its defined height and width, use inline-block.
  • For a single row or a column, use flexbox. For more complex layouts, use grid.
  • Not for now, understand how css works first then use bootstrap.
  • I think tables are still viable :slight_smile: But you can probably accomplish the same thing using grid.
  • Just practice. Visit sites you like and mock up.

Good luck :+1:

9 Likes
3

Thanks for the insights @shimphillip. I am currently working on my Responsive web design projects

1 Like
4

Agree with everything said.

I will say using floats for their intended purpose is still a valid use case.
https://codepen.io/anon/pen/ZNMZae

It might also be good to know just a bit about how they work just in case you need to work on some codebase that uses floats.

But in the end, you will be answering these questions yourself as you get more familiar with CSS. You will learn ways of making layouts and archiving your desired goal that uses different techniques, some you may like more than others.

2 Likes
5

If you are curious, it wouldn’t hurt to skip ahead to the Front End Libraries section and run through the Bootstrap challenges. They are really straightforward and to me it was encouraging to see how simple working with CSS can be once you understand the tools that are available!

6

I haven’t done that far, but I can understand you. Maybe you could try taking notes with xmind when learning challengs, and re-sort them after whole section. That may help you. Come on, bro. We are backing you!

1 Like
7

@motdde
Here is my opinion.

  • I suggest not using floats at all now that we have flexbox and grid.
  • Do not use Bootstrap until you know CSS well enough to build a responsive website on your own with basic HTML and CSS.
  • Tables are okay if you want to make a table for your data. Using tables for the layout is a horror show.
  • If you get stuck on something you have multiple options on how to get unstuck such as:
  1. Most important is to use the dev tools. Dev tools are your best friend in Web Development. Don’t code without them!! Watch a video on how to use them properly if you are unfamiliar with them.
  2. Books are invaluable. Reading one good book on CSS will take your code to the next level.
  3. The Freecodecamp forum is a great place to get help.
  4. Watch videos on specific techniques you would like to learn such as CSS animations, flexbox, gradients, etc.
  5. Make friends with developers in your area, that way you can help each other.
2 Likes
8

Saying you should never use floats seems strange to me. They work great for their intended purpose of floating text around an image/element. For page layout sure don’t use them unless for some reason you have to (like support for really really old browsers).

Also, if you don’t know how floats work at all then you are at a disadvantage. There are still sites using floats and if you can’t work on them because you don’t know how that’s not really great either.

Using Bootstrap instead of learning CSS is not a good idea, but there is nothing that says you can’t do both.

2 Likes