Подсел на Bootstrap просмотрев несколько видео-уроков Sorax'a на youtube. Пример: http://youtu.be/qIIvIBc7-_M
Дальше http://bootstrap-ru.com/
Вот еще 3 статьи на Хабре в довесок
http://habrahabr.ru/post/154687/
http://habrahabr.ru/post/187184/
http://habrahabr.ru/post/198346/
<script src="/my/script.js?v=1"></script>
flexbox, grid layout- это css из современных стандартов. Что бы знать, когда применять - вы должны знать версии старых браузеров, которые необходимо поддерживать на вашем проекте, и соответствующую поддержку этих стилей. Например, формировать элементы на flexbox на порядок удобнее, чем на float, но в IE9 вы уже использовать flexbox не можете.
gulp, webpack и пр.- это инструменты, которые созданы для облегчения рутинных задач.
препроцессоры- представьте, что вам чего-либо не хватает в html и css.
пакетные менеджеры- это удобный способ скачать конкретные библиотеки, и переносить их из проекта в проект. Статья про npm тут
<html></html><head></head>
<body></body>1 В начале сотворил Бог небо и землю.
2 Земля же была безвидна и пуста, и тьма над бездною, и Дух Божий носился над водою.
3 И сказал Бог: да будет свет. И стал свет.
4 И увидел Бог свет, что он хорош, и отделил Бог свет от тьмы.
5 И назвал Бог свет днем, а тьму ночью. И был вечер, и было утро: день один.
<html>
<head>
<style>
</style>
</head>
<body></body>
</html><html>
<head>
<style>
* {
word-wrap: break-word;
margin: 0px;
padding: 0px;
}
html, body{
width: 100%;
height: 100%;
margin:0;
padding:0;
}
body {
position: fixed;
background: linear-gradient(top, #418ac7 0%, #fafeff 100%);
background: -moz-linear-gradient(top, #418ac7 0%, #fafeff 100%);
background: -o-linear-gradient(top, #418ac7 0%, #fafeff 100%);
background: -ms-linear-gradient(top, #418ac7 0%, #fafeff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#418ac7), color-stop(100%,#fafeff));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#418ac7), to(#fafeff));
background: -webkit-linear-gradient(top, #418ac7 0%, #fafeff 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#418ac7', endColorstr='#fafeff');
}
</style>
</head>
<body></body>
</html>body {
background: #635328 url('http://img.urodaizdrowie.pl/wp-content/uploads/2013/03/globe.jpg') fixed top center no-repeat;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-khtml-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
}p {
color: white;
text-shadow: 0 0 2px #000;
}
var dict = {}; //загруженный словарь
function lang(key) {
var str = dict[key] || '';
var args = new Array(arguments.length);
for(var i = arguments.length; i--;) args[i] = arguments[i];
return str.replace(/\$\d+/g, function(matched) {
return args[matched.slice(1)] || matched;
};
}<p data-lang="key"></p>document.addEventListiner('DOMContentLoaded', function() {
var elems = document.querySelectorAll('[data-lang]');
for(var i = elems.length; i--;) {
elems[i].innerText = lang(elems[i].getAttribute('data-lang'));
}
}, false);