I've read several HTML/CSS books and gone through half a dozen courses. I'm comfortable with your basic HTML/CSS page, have a basic handle on Javascript (assuming I'm not doing anything more complicated than using getElementById to change some attributes on a click), and I can use jQuery/Bootstrap when I need to.
Right now the biggest hump for me is figuring out how to make mobile-friendly sites WITHOUT resorting to a framework. I feel like the vast majority of books or e-courses right now will go the following route:
1) Teach basic HTML/CSS for barebones basic and legacy pages
2) Introduce HTML5 syntax
3) Briefly show how to do a "pure" mobile-friendly page using
viewports, flexbox, and media queries.
4) Spend fifteen minutes on the above, and then say, "But that's too much work. So now we're gonna use Bootstrap and never do Step #3 again!"
That above has happened consistently, and it disappoints me. I can do Bootstrap, but frankly I hate writing it. I feel like I have to go five or six div's in deep before I'm actually writing any text that's going to be visible to the end-user.
I'd really like to find more resources on making a mobile-friendly webpage that doesn't rely on Javascript to resize itself. In particular, I've got a few webpages that I built as past projects or coding exercises that I otherwise think look fine, and I'd like to figure out how to easily retro-fit them so that, say, the images don't stretch more than 100% of the screen width without having to rewrite the entire page using jQuery.
Anyone have any suggested resources for building mobile-friendly pure HTML/CSS sites?
Keep your layouts flexible:
* Avoid specifying widths and especially heights of individual elements unless really necessary. Allow the content to determine dimensions.
* Set percentage based widths on overall containers (columns / grids). Allow these to constrain the dimensions of elements within. (Simplify your page structure as much as possible and don't overuse these.)
* Use max-width to prevent elements from exceeding the dimensions of their containers:
img {max-width: 100%;}
It's not just about media queries... one also needs to understand the concept of "fluid layouts" -- that is, declaring your widths in percentages instead of pixels. Media queries can help tweak a design to change/respond to different screen widths, but the first step is making sure your widths are fluid and flexible (otherwise you'd basically need separate media queries for every single pixel from 300 to 1000).
I've read several HTML/CSS books and gone through half a dozen courses. I'm comfortable with your basic HTML/CSS page, have a basic handle on Javascript (assuming I'm not doing anything more complicated than using getElementById to change some attributes on a click), and I can use jQuery/Bootstrap when I need to.
Right now the biggest hump for me is figuring out how to make mobile-friendly sites WITHOUT resorting to a framework. I feel like the vast majority of books or e-courses right now will go the following route:
1) Teach basic HTML/CSS for barebones basic and legacy pages
2) Introduce HTML5 syntax
3) Briefly show how to do a "pure" mobile-friendly page using viewports, flexbox, and media queries.
4) Spend fifteen minutes on the above, and then say, "But that's too much work. So now we're gonna use Bootstrap and never do Step #3 again!"
That above has happened consistently, and it disappoints me. I can do Bootstrap, but frankly I hate writing it. I feel like I have to go five or six div's in deep before I'm actually writing any text that's going to be visible to the end-user.
I'd really like to find more resources on making a mobile-friendly webpage that doesn't rely on Javascript to resize itself. In particular, I've got a few webpages that I built as past projects or coding exercises that I otherwise think look fine, and I'd like to figure out how to easily retro-fit them so that, say, the images don't stretch more than 100% of the screen width without having to rewrite the entire page using jQuery.
Anyone have any suggested resources for building mobile-friendly pure HTML/CSS sites?