I really don’r have a sense of best practices, I am scrambling just to find what works. Any suggestions on alternative approaches? http://codepen.io/MikeNDavis/pen/BzVjkG
A pretty good first project, you’ve demonstrated a decent grasp of the basics.
The only major thing I’d change is the quality of the image you’re using. Obviously you can only use the pictures you’ve got, but sourcing the highest quality images appropriate for your target device sizes is important for professional looking sites.
Since you’re loading Bootstrap in order to use the container-fluid and the text-center classes, you could also start to make use of its row and col classes to have a more responsive layout across all device sizes.
I made a fork of your pen so you can see how I made a couple of changes to include a little more bootstrap: http://codepen.io/Malgalin/pen/kXpkga
You’ll notice that I changed container-fluid to container and added some columns.
Play around with the values I’ve set until you get the look you’re happiest with. You can find more info on bootstrap layouts here: http://getbootstrap.com/css/#grid
Thank you for looking over the code and giving suggestions. Intuitively it seems that sticking to a particular approach (Bootstrap, or CSS, or JQuery?) would make maintenance/change easier as it would focus on a single language/tool.
It can help to minimise the tools you use, especially for simple projects.
Bootstrap is CSS. You use their predetermined classes and it hooks into their bootstrap style sheet. If you don’t know much CSS, bootstrap seems like magic. But if you are familiar with CSS you can actually view the BS source code and see exactly what is going on - it’s a lot of media queries and consistent formatting rules, so it’s actually an interesting read if you want to see some professional CSS coding conventions.
Similarly, jQuery is JavaScript, it’s simply a library that allows you to do JavaScript things more easily and with better cross browser support. Actually, Bootstrap really helps with cross browser support, too.
What might start to get funky is if you used multiple CSS frameworks, like Bootstrap + Foundation, since then your relying on two tools that are trying to do the same thing.
It’s common practice when using bootstrap to have your own CSS file run after bootstrap so you can apply specific styles to things Bootstrap doesn’t cover.
This clarifies things - it does seem that understanding the order in which styles take effect, or override other styles, is a big part of the process.