HTML/CSS problems with formatting my pages

HTML/CSS problems with formatting my pages
0.0 0

#1

So, for some reason I’m having serious trouble with formatting my pages to get the elements where I want them to be reliably, and my button won’t click on this page. I would really appreciate help/advice on positioning elements, this is getting to be the biggest problem I have and it seems like I should have this down by now.
Thanks so much!
-Descadora


#2

Hi descadora,
Your issue could use a bit more explanation but I’ll try to give you some tips that I use when I design page layouts.

  1. Try to stay away from very general css such as div { … }
  • Reason: Your page will contain many div’s and if every single one has those default values you might run into issues that will be hard to debug.
  • Solution: Be very specific with classes. Consider every element you add and make sure you format it they way you want it before continuing.
  1. Work your way from Outside -> In
  • Reason: Always start by styling the outermost element first then its child, and then that element’s child, and so on and so forth.
  1. Consider reading through MDN’s CSS documentation (or other resources)
  1. Learn a framework! (Like Bootstrap)
  • Download some free Bootstrap themes and look at the html code. Reference Bootstrap’s great documentation and try to understand exactly whats going on
  • If you really want a great understanding of CSS go ahead and crack open Bootstrap’s css code and see what properties they are using in their classes.

I hope this helps you out!

  • Ethan A

#3

Hey Ethan,
Thanks for the quick response, and it absolutely does help. I started out trying to use mostly the stuff from the exercises, but eventually found that I like Flex-Box better. Unfortunately, that is giving me just as many problems as it fixes, though I’m making progress faster than I was before I started using it.

Mostly, it’s just getting things positioned. The only page I’ve made so far that looks exactly like I want it to is the tribute page, and that happened just a few days ago. The overall impression I’m getting is that there are core concepts that I am not grasping yet.

If that clarifies and you have more suggestions, I’d love to hear them. Otherwise, thanks so much and I will check out the resources you posted.

Thanks!
Descadora


#4

Hi again!
I totally get where you are coming from. I struggled with css for a long time until discovering flex-box.
I learned how to use flexbox from this site: http://cssreference.io/flexbox/
Another tip to learn flexbox css is go make a code pen and just mess around. see what happens with all the different flexbox related properties. I did this once and wound up with a fun little animated 4x4 grid: https://codepen.io/ethan-arrowood/pen/EZaNdJ

Keep up the good work,
Ethan


#5

The tutorial that really helped me understand HTML and CSS is the one from shay Howe at http://learn.shayhowe.com/html-css/
You build a site on your desktop for an imaginary conference, but the info is top notch. Even has you code your own CSS grid, which makes understanding the bootstrap grid system easier.
The section on relative and absolute positioning helps make sense of getting content to go where you want it to go, and the semantic HTML makes each page much more readable than an endless sea of div statements.
He offers downloadable files, but you learn much more by typing out the code. Site looks good when done, and you can see his reference site to compare at each step… this is exactly what I needed, too bad he doesn’t have one for incorporating JS…


#6

Thank you both for the great resources you suggested, I will be using those extensively, I think. Finally got my quote machine to look the way I think it should, with the help of cssreference.io. Here is the link again: http://codepen.io/descadora/pen/VPpVjj

Ethan, I agree with the approach of playing around. I’m studying Java alongside this course, and because I don’t see it as being a near-term source of income, I have found that I not only enjoy it more but I get a lot more inspiration while reading the book. There’s something to be said for not taking things so seriously!

hypersoniq, that tutorial sounds great and I will definitely be making some time for it.

Thanks guys, and happy coding.
Descadora