It might seams that we did nothing so far. Learn what HTML, CSS and maybe Java script is for, and prepared the design concept. But that is a lot, and yet not enough.
The speed of light is bit too much for a human to handle, and so lets pause a bit and recap what we have done so far.
HTML – html is the core of the website. The whole website can be just bare HTML and it will work. Thanks to HTML we can define containers which wraps the content and help us to fight the space and make the connection between pages via links.
CSS – is really only a make-up tool. It changes the color, define fonts, give space to HTML objects. CSS without HTML is like hairdresser without clients head. On the other hand, HTML without CSS looks like bald head.
Bootstrap – is not a language but it is a tool box where you can find all the previous tools shaped up in to the perfect form for the website builders work.
What to learn and how?
What I recommend is to learn CSS (W3schools) straight.
If you go through the CSS class you’ll learn the HTML naturally on the way.
The most useful of all is the margin and padding. Make sure you understand that. Once you know how that works you can align things on the website and that is what you need in intelligible design foremost.
Spend some time on float. Float helps you to move whole object with its inner content from side to side.
As all the current website are full of stretched images filling the space from corner to corner in various dimensions the bare image is simply not sufficient enough. The background give us plenty ways how to work with images as like with layers in photo editor with all the clipping possibility, stretching behavior plus the simple and powerful ability to change background to a color, super powerful.
Before you start to code your design ask your self if the Bootstrap cannot help you anyhow.
And sure it can.
If nothing else if helps you to divide the website into logical parts where you can add some content inside and if need be divide that again in to parts and so on and so on.. do not over do it though :]
Example / gallery
Say we need the gallery of our works. They’ll be laid out in a grid with four columns no matter how many rows it’ll have in the end.
<div class="container"> <div class="row"> <div class="col-md-3"> <img src="" alt=""> </div> <div class="col-md-3"> <img src="" alt=""> </div> <div class="col-md-3"> <img src="" alt=""> </div> <div class="col-md-3"> <img src="" alt=""> </div> <div class="col-md-3"> <img src="" alt=""> </div> <div class="col-md-3"> <img src="" alt=""> </div> <div class="col-md-3"> <img src="" alt=""> </div> <div class="col-md-3"> <img src="" alt=""> </div> </div> </div>
There is nothing easier than that.
Create container, inside of it add row and inside of that add columns of defined width.
Whatever you put inside is up to you. Doesn’t matter how many objects in columns you’ll have. There will be always 4 in a row as 12/3 = 4 (class .col-md-3). If there will be more than 4 they simply fall down under the fourth above and so on and so forth.
If you want two contents in a row use col-md-6 (12/2=6)…
Why the hell it is divided into 12 and not 10? “Ask french” why they forced us to use the decimal instead of dozenal system.. decimalisation .. as in previous time the 12 was the most prevalent counting system for a good reason.
The number 12 is much easier divisible into whole parts. Time is divided by 12, the Octave has 12 tones and there are dozen other uses of dozenal counting until today.
Anyway.. the case simple explanation is that if you decide to use grid divided by 10 you can’t divide it into 3 pieces, because the result will be something like 33.3333333..% which is hell to work with and bla bla bla.
Plus there the division of 12 is closer to the golden ratio and that makes us to build pleasant golden ration based grids without even noticing. The number 12 gives us more freedom over the subdivisioning of the content.
I know, I know.. lets go back to Bootstrap.
Say you need menu that is flying over the content sticked on the top, or not sticked whatever you want. Wouldn’t it be easier to have it all predefined and just use it? Sure it would.
And bootstrap has that, .navbar.
What If I want to stick menu or whatever I want to the bottom of the page?
How would you do it? It takes you life to figure this out. Guess what Bootstrap has the .navbar-bottom that does just that.
I know it says navbar-.. but think about it, what it really does. It holds the content on the bottom of the page, that is what it does, and whatever you put inside it is up to you.. get it?
Knowledge is not cheap
Knowledge is not cheap. If it would everybody will do everything and nobody will pay to anybody for anything…. yes not even you.
And so don’t think you’ll understand it be observing from time to time what we do in class, or how things look on surface. You have to study and try these any thing dozen times before they become your nature and you start to use them the proper way and maybe one day come up with something extra that hasn’t been done yet.