Верстка сайта с нуля. Верстка портфолио. Часть 3

Вы здесь: Главная — HTML — HTML 5 — Верстка сайта с нуля. Верстка портфолио. Часть 3

Продолжаем уроки по верстке сайта с нуля. На первом уроке мы верстали шапку сайта. На втором уроке — блок с большой картинкой. На этом уроке мы будем верстать галерею из анимированных иконок.

Выше галереи находится заголовок и текст, помещенные в контейнер.

<div>
<h3>Портфолио></h3>
<p>Много сплю и ем, но я гарантирую, что вы полюбите меня таким, какой я есть.</p>
</div>


со следующими стилевыми свойствами:

.container-well {   position: relative;
  -webkit-transition: all 1s ease; /*плавный переход между экшенами Chrome/Safari */
  -moz-transition: all 1s ease;/*переход между экшенами Firefox */
  -o-transition: all 1s ease; /*медленный переход между экшенами Opera */
  transition: all 1s ease;
}
.container-well h3{   color:#4d4d4d; /*цвет заголовка */
  font-size: 2em; /*размер заголовка */
  padding-bottom: 0.5em; /*поля под заголовком */
  text-align: center; /*выравнивание заголовка по центру */
}
.container-well p{   color:#444444; /*цвет текста */
  font-size: 1em; /*размер шрифта */
  padding-bottom: 1em; /*поле под абзацем */
  text-align: center; /*выравнивание текста по центру */
}


Под контейнером расположено меню, которое по умолчанию должно быть вертикальным:

<ul>
<li><span>Питание</span></li>
<li><span>Уход</span></li>
<li><span>Выгул</span></li>
<li><span>Здоровье/Страховка</span></li>
</ul>


Однако в макете дизайнер нарисовал горизонтальное меню, а не вертикальное, с помощью float, поставим ему свойство left и это переопределит выстраивание списков по горизонтали.

#valantin {
  width: 60%; /* ширина контейнера для всего блока меню */
  list-style: none; /* немаркированные списки */
  margin: 2% auto;
  padding: 0;
}
#valantin li {
  float:left;
  margin-left: 17px;
}
#valantin li span {
  background:#d0a5a5;
  padding: 15px 30px; /* поля обрамляющие текст */
  text-decoration: none; /* нет подчеркивания у названий меню */
  color: #fff; /*цвет текста меню */
  text-transform:uppercase; /*трансформация букв текста в заглавные */
  font-weight: 600; /*жирность текста */
  cursor: pointer; /*вид курсора */
}
#valantin li span:hover
{
  background:#a97b7b; /*фон при наведении меняет цвет */
}
#valantin li span.active {
  background:#a97b7b; /*цвет активного фона */
}


Наконец-то мы подошли к верстке анимированных иконок. При наведении курсора на иконку, появляется маленькая иконка лупы, текст, а так же меняется вид самой иконки.

Как это работает, вы можете увидеть на jsfiddle.

Ниже я приведу фрагмент кода только для одной иконки.

<div>
 <div data-cat="logo">
  <div>
   <a href="#">
    <ul>
    <li>
    <div>
    <div>
    <img src="web/images/zoom-white.png"/>
    <h4>Позирую</h4>
    <p><a href="#">перед камерой</a></p>
    </div>
    </div>
    </li>
    </ul>
   </a>
  </div>
 </div>
</div>


Далее стилевое оформление:

#portfoliolist .portfolio {
  -webkit-box-sizing: border-box; /* контейнер для галереи с иконками */
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  width: 19%;
  margin: 0% 3%;
  display: none;
  float: left;
}
.portfolio-wrapper {
  overflow:hidden;
  position: relative;
  cursor:pointer;
}
.portfolio img {
  max-width:100%;
  position: relative; /* позиционирование картинки с лупой */
  opacity: 5;
  transition: all 300ms;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
}


Теперь разберем, как происходит собственно анимация. Содержимое блока ниже, должно вывестись на экран только после наведения курсора. До этого, его не должно быть видно. Как же достичь такого эффекта?

<div>
<img src="web/images/zoom-white.png"/>

<h4>Позирую</h4>
<p><a href="#">перед камерой</a></p>
</div>

В стилях для класса ch-info, прописываем нулевую прозрачность, то есть делаем содержимое блока с данным классом – полностью невидимым.

.ch-info {
  opacity: 0; /* Полная прозрачность элемента */
}


Зато при наведении курсора на иконку невидимые элементы становятся видимыми и имеют те свойства, которые указаны в коде для псевдокласса :hover.

Посмотреть код целиком и проверить как работает данный эффект можно на jsfiddle

Продолжение следует..

• Создано 26.10.2017 12:12:02
• Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления

: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>
   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

HTML 5

В данной категории Вы сможете познакомиться с новым стандартом HTML — HTML 5, который не так давно появился в нашей жизни, и ещё очень многие про него ничего не знают, либо просто слышали. И данная категория позволит восполнить этот пробел в знаниях, ведь HTML 5 — это будущее Интернета, к которому надо быть готовым любому Web-мастеру.

В статьях этой категории содержится множество нововведений в HTML 5, которые необычайно важны и которые обязательно надо знать. Подробно расписаны новые элементы, а также подробно расписано их назначение.

Прочитав статьи по HTML 5, Вы узнаете:

1) Что нового появилось в HTML 5.

2) Какие элементы появились для создания структуры HTML-документа.

3) Какие появились новые блочные элементы в HTML 5.

4) Какие новые теги появились в HTML 5 для форматирования текста.

5) Какие элементы появились для работы с мультимедиа в HTML 5.

6) Какие HTML-теги появились для интерактивной работы с документом.

7) Почему не работает HTML5.

8) Об атрибуте download в HTML5.

9) Нужно ли сейчас использовать HTML5 и CSS3.

10) Новые атрибуты для полей форм, появившиеся в

HTML5.

11) Какие новые значения атрибута type появились в HTML5.

12) Зачем нужен атрибут data-* в HTML5.

13) Что такое canvas в HTML5.

14) Как использовать HTML5 Notifications API.

15) Новые атрибуты HTML5: reversed, contenteditable, hidden.

16) Что такое локальное хранилище(localStorage).

17) Что такое viewport.

18) Зачем нужен атрибут read only в HTML5.

19) Что такое HTML5 WebSockets.

20) Как работать с HTML5 Video.

21) Как работать с HTML5 Audio.

22) Как проверить поддержку HTML5 и CSS3

с помощью сервиса Can I Use.

23) Как сделать видео в качестве фона сайта на HTML5. Часть 1.

24) Как сделать видео в качестве фона сайта на HTML5. Часть 2.

25) Популярность браузеров на 2014 год.

26) Что такое адаптивная верстка.

27) Что такое гибкая сетка в адаптивной верстке?

28) Как сделать изображения адаптивными?

29) Как использовать секционные элементы в HTML5.

30) Как правильно использовать теги div, section и article в HTML5.

31) Как сделать 404 страницу.

32) Как сделать верстку сайта с нуля. Меню навигации. Часть 1.

33) Как сделать верстку сайта с нуля. Верстка портфолио. Часть 2.

34) Как сделать верстку сайта с нуля. Верстка портфолио. Часть 3.

35) Как сделать верстку сайта с нуля. Трехколоночный макет. Часть 4.

36) Как сделать верстку формы обратной связи. Часть 5.

37) Как верстать прозрачную форму входа.

38) Как сделать выпадающий список в HTML.

39) Как вставить видео на HTML сайт.

40) Как сделать HTML шаблон для портфолио.

41) Верстка кнопок на сайте.

42) Верстка сайта по PSD макету (часть 1).

43) Верстка сайта по PSD макету (часть 2).

44) Верстка сайта по PSD макету (часть 3).

45) Верстка сайта по PSD макету (часть 4).

46) Красивое оформление статьи на HTML.

47) Кроссбраузерность сайта.

48) Верстка по БЭМ методологии.

49) Как верстать сайт без макета.

50) Как сделать текст в HTML (топ 10 запросов)

51) Как вставить SVG иконку на сайт.

52) Как верстать по БЭМ на flexbox.

53) Флекс контейнер и элементы флекса (верстальщику).

54) Как сделать видео на сайте адаптивным.

55) Всплывающая подсказка в HTML.

56) HTML теги и атрибуты форм.

57) Типы полей ввода (HTML input).

58) Семантические теги.

60) Вставка видео в видеоплеер (HTML+CSS).

Все материалы по HTML 5

обучение верстке сайтов с нуля

От автора: привет, друзья! Как и люди, сайты имеют свой скелет, который можно увидеть в их коде. Обычный пользователь, «гуляя» по просторам Интернета, вряд ли будет заглядывать в HTML-код. Но только не верстальщики — им всегда интересно посмотреть на чужую работу. Создание аккуратного, сбалансированного и работающего во всех браузерах кода — это своего рода искусство. Сегодня мы поговорим с вами о том, как его постигнуть, или, иными словами, как быстро и эффективно научиться верстке веб-страниц.

С чего начинается верстка?

Верстка сайта — это описание программным кодом его визуальной составляющей. При этом сайт должен выглядеть и работать корректно на любом браузере (быть кросс-браузерным). Обучение верстке сайтов с нуля должно начинаться с самостоятельного создания PSD-макета, несмотря на то, что его, по идее, должен создавать веб-дизайнер.

Основная задача верстальщика — это обработка материала, который поступает к нему в виде текстов, изображений, каталогов и т. д., и превращение его в веб-страницы на основании утвержденного веб-дизайна.

Однако, представьте, что вы этакий верстальщик «2-в-одном», и вам по какой-то причине пришлось верстать макет вместо дизайнера, которому глубоко плевать на ваши проблемы.

Для того чтобы быстро научиться рисовать макеты, как бы банально это ни звучало, вам нужно просто много их рисовать. Вам также сильно поможет бесконечный просмотр чужих работ. При этом обращайте внимание на все мелкие детали, на то, какие используются цвета, градиенты, шрифты, отступы и т. д.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Со временем вы сами начнете чувствовать, что выглядит красиво, а что нет. В самом начале же вы можете просто брать и срисовывать, например, чужие элементы интерфейсов. Это заставит вас задуматься о том, как строятся эти самые элементы и из чего они состоят. И тогда красивые дизайны перестанут быть для вас чем-то мифическим, потому что вы будете знать, как создать что-то похожее.

Инструменты для создания макета сайта

Что касается инструментов, то многие веб-дизайнеры для создания интерфейсов используют Adobe Photoshop. С помощью этой программы можно сделать все, что угодно.

Есть люди, которые работают только с векторной графикой и используют для создания макетов Adobe Illustrator.
И еще один редактор, который я не пробовал, но который, по слухам, представляет вполне достойную альтернативу вышеперечисленным, — это Sketch, но он работает только под Mac OS.

Знакомимся — HTML

Следующим шагом после отрисовки макета является его верстка и создание HTML-шаблона. HTML — это язык, который используется для разметки документов в Интернете и интерпретируется браузерами для удобного отображения в виде документа.
С помощью HTML-разметки мы отмечаем, где на веб-странице будет показан текст, изображения, кнопки, и в каком порядке они будут следовать друг за другом. Основными понятиями в этом языке являются тэги, атрибуты, элементы и сущности.

Самый элементарный веб-ресурс — это не более чем набор HTML-страничек. Если сайт статический, то после верстки вы фактически получите его окончательную версию, а не просто шаблон. Сейчас такие сайты, естественно, являются большой редкостью. Все современные веб-странички генерируются динамически, при помощи некой серверной логики, которую вы либо напишете сами, либо будете использовать готовую с помощью какой-либо CMS (системы управления содержимым).

Без этой серверной логики были бы невозможны большинство онлайн-сервисов, которые мы используем каждый день и к которым так привыкли. Что касается HTML, то это совершенно несложный язык.

В Рунете существует огромное количество бесплатных и платных уроков по верстке сайтов, курсов по основам HTML и других материалов с достойной базой обучения. По моему мнению, выучить этот язык самостоятельно вообще не является проблемой.

Совершенствуемся — CSS

Как только вы освоите основы HTML, можете сразу приступать к изучению CSS (каскадных таблиц стилей), которые позволяют задавать шрифты, цвета, расположение отдельных блоков сайта.

По CSS я могу посоветовать неплохой курс онлайн-обучения верстке сайтов От нуля до профи, который поможет вам построить карьеру верстальщика даже в том случае, если вы вообще не обладаете базовыми знаниями по вопросам веб-дизайна и верстки.

Однако, хочу вас предупредить, что обучение на верстальщика сайтов — это не такая уж простая задача. В верстке есть множество тонкостей и нюансов. Вообще, для того чтобы вы могли взглянуть на макет и сразу представить себе иерархию его элементов, как именно их можно сверстать и при помощи каких свойств, — для всего этого нужно много практического опыта.

Обязательно ли учить все тэги, атрибуты и свойства HTML/CSS?

В HTML много разных тэгов и атрибутов, а в CSS — свойств, которые могут иметь различные значения. Поэтому многих новичков волнует вопрос: с чего начать верстку сайта и нужно ли заучивать наизусть все эти значения, тэги и свойства?

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Конечно, если вы обладаете уникальной фотографической памятью, то вам не составит труда выучить все это, а заодно, и три тома «Войны и мира», наизусть. В противном случае заучивать все эти слова не нужно.

Вначале, когда вы только будете знакомиться с CSS, то все равно будете смотреть, что делает каждое свойство и каждое значение этого свойства. Со временем к вам придет понимание, что можно творить с помощью каскадных таблиц стилей, и что-то из этих свойств/значений и так отложится у вас в голове. Ну если вы, конечно, не страдаете амнезией

То же самое касается любых языков, включая JavaScript, PHP и т. д. Все, что вы часто используете, запомнится само по себе. Все, что вы редко используете, вы сможете подсмотреть в справочнике, коих в сети великое множество. В этом нет ничего постыдного и, скажу вам по секрету, все веб-мастера это делают.

Упрощаем процесс верстки

Для тех случаев, когда вам нужно быстро создать какой-то интерфейс или прототип какого-либо сайта, существуют CSS-фреймворки, такие как Bootstrap. Он позволяет стать веб-мастером, веб-программистом и верстальщиком в одном лице без знания таблиц стилей, языков программирования и гипертекстовой разметки.

Когда вы хорошо освоите CSS и начнете верстать что-то свое, уникальное, вам может перестать хватать гибкости этого языка, и вы захотите использовать какой-нибудь CSS-препроцессор. Препроцессоры убирают из кода CSS весь мусор, делают его более чистым и логичным, увеличивают степень абстракции при помощи переменных и прочих «фишек». Наиболее популярными препроцессорами считаются LESS, Sass и Stylus.

Высший пилотаж — JavaScript

Изучая более серьезные уроки верстки сайтов, вы встретите включенные в HTML элементы JavaScript, которые делают веб-страницы интерактивными. Если вы планируете заниматься не только Back-end, но и Front-end разработкой, то JavaScript нужно знать на очень хорошем уровне.

Помимо самого языка, вам нужно знать всю инфраструктуру, которая существует вокруг него (библиотеки, фреймворки, браузерные интерфейсы и т. д). На освоение всех этих элементов у вас может уйти от одного года и до бесконечности (в зависимости от того, есть ли у вас личная жизнь ).

Подведем итоги

Итак, как вы уже, надеюсь, поняли, верстальщик — это очень важная и древняя Интернет-профессия, от которой зависит:

скорость загрузки сайта;

адекватность его отображения в различных браузерах;

адаптивность под различные пользовательские экраны;

соответствие HTML-стандартам и требованиям поисковиков.

Изучая и совершенствуя HTML, CSS, JavaScript, PHP, получая драгоценный опыт и пополняя наше Интернет-пространство качественными, красивыми и аккуратными с технической точки зрения сайтами, вы не только окажете обществу услугу, но и сможете достойно заработать. Подробнее на эту тему читайте в нашей статье Профессия верстальщик: как заработать на верстке сайтов.

Пока что все. Не забудьте подписаться на новости нашего блога, дабы не пропустить все самое интересное по обучению верстке сайтов с нуля.

До новых встреч, уважаемые коллеги и те, кто только вступает на эту нелегкую, но очень увлекательную тропу веб-разработки!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Основы верстки сайтов – принципы, которые нужно знать

От автора: вы скачиваете в сети какой-нибудь шаблон сайта с готовой версткой и открываете его в редакторе. Но там миллион строчек кода, так что один взгляд на экран нагоняет грусть. Начинать нужно с простого, поэтому в этой статье давайте постараемся разобраться с основами верстки сайтов.

Азы верстки

Если вы полный новичок в сайтостроении и мечтаете когда-то сверстать свой первый шаблон сайта, то начинать нужно строго с макетов на чистом HTML и CSS. Это наиболее простые веб-технологии, которые можно изучить. Основы верстки сайтов – это именно знание этих двух языков, без которого дальше продвигаться нет никакого смысла.

Изучив их, находите в сети бесплатные PSD-макеты и пытайтесь из них верстать сайт. Стоп. Что такое PSD-макет? Шаблон сайта, нарисованный дизайнером в фотошопе. Соответственно, вам понадобиться фотошоп или его бесплатный, но менее функциональный аналог – GIMP. В этой программе тоже можно работать с макетом. Вам нужны базовые знания работы со слоями. Их можно получить буквально за пару часов, посмотрев пару видеороликов о работе верстальщика с макетом. Их можно бесплатно найти на Youtube.

Рис. 1. Мастером фотошопа можешь ты не быть, но вырезать слои обязан.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

А где же получить основные знания по верстке? Правильно, на нашем сайте. Чем для вас это выгоднее? Во-первых, вся информация структурирована по разделам. Когда я начинал изучение HTML и CSS, мне приходилось бегать по десяткам сайтов и форумов. Не разумнее ли воспользоваться одним ресурсом, одним справочником и одним складом, где собрано все, что вам нужно для старта. А изучив основы вы определенно точно поймете, что вам нужно дальше и нужно ли, а также где это можно найти.

Изучение основ заключается в том, чтобы понять назначение основных тегов HTML, а также CSS-правил, позволяющих стилизовать и размещать эти элементы. Этого достаточно, чтобы сверстать свой первый макет или изменить что-то в исходном коде чужого шаблона.

Что нужно знать о верстке сайтов

Важно, чтобы вы не думали, будто верстка заключается в раскидывании нужных тегов и их дальнейшем оформлении в CSS. Это так, но есть много дополнительных оговорок. Далее мы посмотрим на некоторые моменты верстки сайтов.

Красивый код. Казалось бы, какая разница, как он там написан? Пусть хоть в одну строчку. Но если вам потом нужно будет что-то изменить, вы будете плеваться. Для редактирования гораздо лучше держать версии файлов, в которых код написан красиво и грамотно, нет горизонтальной прокрутки и непонятности в стилях, присутствуют комментарии и т.д. Представьте, что в таблице стилей вы низ сайта описываете в середине, а какие-то иконки, которые должны быть в шапке, описаны в самом конце. Хотя это не критично, здесь нет никакой логики.

Просмотрите руководства по правильному форматированию кода. Это займет у вас буквально 10-30 минут, зато вы поймете, как правильно писать и где ставить отступы. Код в одну строчку можно получить с помощью специальных сервисов, которые его сжимают. Такие файлы уместно использовать в рабочих проектах, где нужна максимальная скорость.

Рис. 2. Это правильно отформатированный код, который приятно читать и изменять. Если вам не нужно его редактировать, можно сжать все в одну строку.

Использование актуальных тегов. Если вы учили HTML 10 лет назад, то наверняка помните теги, которые сегодня практически не используются или вовсе более не поддерживаются. Ни в коем случае не стоит использовать их, потому что в новых браузерах будут возникать ошибки. Например, frame или object — старые неудачные эксперименты, которым давно есть более удачная альтернатива.

Также есть устаревшие CSS-правила. Если вы учите эти языки на новом сайте, то там наверняка не будет всего этого старья. В подробных справочниках по HTML и CSS вы можете найти описания старых свойств и тегов, а также их поддержку в различных спецификациях и браузерах. Обращайте на это внимание, чтобы не использовать то, что стало неактуальным.

Придерживаться стандартов Web 2.0. Это такая концепция, которая стремиться сделать веб-стандарты наиболее простыми, удобными и понятными. Так, она требует разделять содержимое, представление и поведение (HTML, CSS и JS) друг от друга. Это означает, что использование внутренних таблиц стилей приветствуется все меньше и меньше, встроенные в HTML скрипты и стили не поддерживаются концепцией Web 2.0, которая содержит в себе много других дополнительных моментов. Подробнее можно посмотреть на сайте W3C.

Кроссбраузерность, насколько это возможно. Как мы уже сказали, нужно использовать новые свойства и теги. Беда в том, что не все из них везде поддерживаются. Еще хуже, если они поддерживаются по-разному. Некоторые свойства поддерживает только Google Chrome, другие – Safari, третьи – Mozilla. Постарайтесь не использовать те из них, которые поддерживаются исключительно в одном браузере. Делать это можно, только если нет серьезного ущерба кроссбраузерности. Добавляйте вендорные префиксы или автоматизируйте этот процесс с помощью autoprefixer.

Меньше графики, если нацелены на большой трафик. Никто не против красивых графических фонов на всю страницу, но если вам нужен максимальный охват пользователей, придется отказываться от этого и использовать альтернативы. Максимально сжимать все изображения. Везде, где это возможно, использовать сплошной цвет или градиент. Иконки соединять в спрайты. С такой версткой страницы будут грузиться быстрее.

Если попытаться как-то обобщить стандарты верстки сайтов, то это можно сделать следующими словами: просто, понятно, удобно, красиво, современно, быстро, кроссбраузерно.

В верстке сайта от основ до конкретного результата можно дойти уже за месяц. Это вполне реальный срок, если уделять изучению примерно 1-2 часа в день. Под конкретным результатом здесь понимается верстка самостоятельно своего первого макета. На этом останавливаться не нужно. Чтобы стать профессионалом потребуется много лет практики.

В этой статье мы с вами посмотрели, как можно обучиться верстке и каких принципов нужно придерживаться при создании шаблонов, чтобы они максимально подходили под современные требования. Подписывайтесь на обновления блога, не пропустите ничего нового из мира сайтостроения.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

HTML что такое, CSS что такое, верстка определение. Уроки верстки с нуля.

Профессия веб-программист включает в себя навыки из разных областей создания сайтов.

Настоящий профессионал всегда идет ОТ ПРОСТОГО К СЛОЖНОМУ. Не существует единого правильного стандарта, и каждый человек выбирает и адаптирует свой собственный подход в обучении программированию.

 

 

Однако есть набор практик-шагов, помогающих создать ПРОЧНЫЙ БАЗОВЫЙ ФУНДАМЕНТ, и помогает в подавляющем большинстве случаев.

Узнайте подробнее о серии курсов “6 шагов к профессии веб-программист”

1. HTML/CSS верстка

Основные HTML-теги, CSS-стили. Работа в редакторе кода SublimeText. Адаптивная верстка сайтов под мобильные устройства. Создание верстки сайта и правильной HTML-разметки для SEO.

2. Верстка на HTML/CSS-фреймворке Bootstrap

Фреймворк — это по сути конструктор, с помощью которого, вы сможете создавать верстку любого веб-сайта в разы быстрее, чем в с помощью классического HTML/CSS. Навыки работы с Bootstrap — частое требование работодателей. Подробнее

3. Язык программирования PHP и база данных MySQL

Базовый фундамент для профессионального программиста. Понимание Объектно-Ориентированного Программирования. Построение архитектуры базы данных. Безопасность сайта. Подробнее

4. Терминал Linux /контроль версий кода GIT

Работа с терминалом Linux для настройки серверов ваших сайтов. Система контроля версий кода GIT для командной работы над проектами. Синхронизация кода вашего сайта с GIT-репозиторием.

5. Создание сайта на PHP-фреймворке CodeIgniter

Аккумулируете все полученные знания и сделаете код веб-сайта масштабируемым и понятным, используя архитектуру MVC (model — view — controller). MVC даёт дополнительную гибкость в терминах повторного использования кода и разделения дизайна и реализации.

6. Язык программирования Javascript и библиотека jQuery

Как сделать сайт более оживленным и быстрым. Интеграция кода JS для живости сайта. Работа с плагинами jQuery.

Ждать не нужно когда наберется группа или наступит дата начала курса — на beONmax.com вы приступаете к обучению сразу!

 

 

Научитесь верстать 

Азы веб-разработчика начинаются с верстки, чтобы научиться верстать вам необходимо освоить HTML и CSS.

 

 

Что такое HTML

HTML — это стандартизированный язык разметки (от англ. HyperText Markup Language), применяется для создания веб-страниц. Он обрабатывается браузером и отображается в виде документа в привычной для человека форме на экране монитора. Большинство веб-страниц содержит описание разметки на языке HTML.

Другими словами в начале работы, используя язык HTML вы РАЗМЕЧАЕТЕ, ГДЕ  будут размещены элементы: заголовок, картинки, меню, текст и т.д. Эту работу можно сравнить с созданием макета-чертежа, который понятен вашему компьютеру.

Проведем аналогию.

Если вам нужно создать плакат-визитку о себе НА ЛИСТЕ БУМАГИ, то сначала, вы представите — КАК это будет выглядеть в виде составляющих элементов:

• будет ли это только текст с заголовком
• или вы еще разместите свою фотографию
• или это будет только набор ваших фотографий
• или фотографий с надписями
• ваше фото будет в центре или в правом верхнем углу
• будет ли текст написан в 1, 2 или 3 колонки и т.д.

Для разметки бумаги вы используете — ручку, карандаш, для веб-версии вы используете язык разметки HTML.

 

Что такое CSS

CSS — каскадные таблицы стилей (от англ Cascading Style Sheets). Это язык описания внешнего вида документа, написанного с помощью HTML. CSS используется для задания шрифтов, цветов, отдельных блоков и т.д.

Когда вы разметили страницу — вам хочется УВИДЕТЬ в красках свой макет на экране монитора, именно здесь используется CSS. В ней уже собраны шрифты, цвета, отдельные блоки, которыми вы наполняете свою размеченную страницу. Внося изменения в код, вы подбираете подходящие цвета, шрифты, оформление блоков.

 

Продолжим наш пример-аналогию с плакатом-визиткой о себе.
Наметив расположение элементов, вы переходите к  ДЕТАЛЯМ: оформлением цветом, подбор шрифтов, рамочек, выбор фона и т.д.

Для работы на бумаге вы используете — цветные фломастеры, карандаши, мелки, краски, вырезанные картинки, готовые фотографии, для веб-версии вы используете каскадную таблицу стилей CSS.

 

Что же такое верстка?

Верстка сайта — это процесс создания визуальной части сайта, без функциональной составляющей сайта. Сверстанную страницу можно будет открыть в браузере, она будет выглядеть как сайт, но если вы нажмете например на кнопку, то ничего не произойдет.

 

Когда вы уверенно научитесь использовать этими базовыми инструментами, то легко сможете создавать простые веб-страницы, понимая как происходит размещение элементов, как можно их перемещать, изменять их внешний вид, используя язык HTML  и каскадную таблицу стилей CSS.

 

Подведем итоги

Обладая знаниями по вёрстке и обязательно потренировавшись, создав несколько шаблонов сайтов на разные тематики, применив разные стили, цвета, размещение элементов, можно начать работать верстальщиком или создавать шаблоны сайтов на заказ (фриланс). 

Для тех, кто уже сегодня задумывается о подработке или работе на себя — узнайте об особенности этого вида заработка: 

Фрилансер — кто это и как им стать? Фриланс для программиста

Умный старт в удаленной работе. Обзор бирж фриланса

 

Пройти полный курс HTML/CSS и освоить базовый фундамент по верстке вы можете на нашем сайте он-лайн в удобном для себя графике.

Как достичь результатов при создании своей карьеры, где взять силы и как с наибольшей эффективностью использовать свое время, читайте здесь: Сила цели или как включить свои ресурсы?

 

Мир открывает двери перед тем, кто знает, куда идет. 

Ральф Эмерсон

 

Включайтесь и открывайте свои возможности!

С верой в ваш потенциал, команда beONmax

Блочная верстка сайта — урок с примером

Раньше на просторах Интернета был широко распространён табличный тип вёрстки, которому посвящена отдельная статья. Однако со временем этот подход к созданию структуры сайта устарел, и на смену ему пришла блочная вёрстка.

Отличия блочной вёрстки от табличной

Если табличная вёрстка подразумевает, что содержимое страницы находятся внутри тега <table>, то концепция блочной вёрстки основана на активном использовании универсальных тегов <div>, внутрь которых помещается содержимое, включая другие теги.

Блочная вёрстка лишена недостатков табличной — поисковыми системами она индексируется лучше, её код не такой развесистый, да и блоки <div>, которые так любят называть «слоями», изначально задумывались универсальными, то есть «для всего», тогда как <table> — это таблица, которую нужно использовать для отображения табличных данных и не более того.

Единственный ощутимый минус блочной вёрстки — сделанные на ней сайты могут по-разному отображаться в обозревателях. Чтобы этого избежать, нужно делать вёрстку «кроссбраузерной», то есть одинаково отображаемой любым обозревателем.

Суть блочной вёрстки

В графическом редакторе создаётся макет сайта: размечается, где какая область страницы (шапка, низ, боковая панель, основной контент) будет находиться и сколько места занимать, готовятся картинки, фоны.

Каждая часть страницы помещается в свой блок <div>: верх сайта — в первый, меню — во второй, контент — в третий и т. д. Каждый блок наполняется содержимым средствами HTML, а также позиционируется и оформляется с помощью CSS-разметки.

Конечный HTML-документ представляет собой набор блоков <div> с контентом внутри. Оформление зачастую находится в отдельном CSS-файле, подключенном к странице тегом <link>, или как минимум в контейнере <style> секции <head>.

Принципы блочной вёрстки

Первый — конечно же, повсеместное использование тега <div>, который можно назвать базовым элементом блочной структуры, но об этом было сказано уже достаточно много.

Второе правило — принцип разделения кода, согласно которому содержимое от оформления нужно отделять. Говоря проще и ближе к нашему случаю: HTML — отдельно, CSS — отдельно (желательно в разные файлы). Такой подход делает структуру понятней. Программисту не нужно открывать CSS, дизайнеру — HTML. Все смотрят свой код и не мешают друг другу. Идеально.

Третий принцип — таблицы нужно использовать не везде, а по необходимости, при этом полностью отказываться от них так же странно, как и применять не к месту.

Пример блочной вёрстки

Но, сколько не теоретизируй, а понимать всё проще на примере.

Итак, у нас есть макет (рисунок ниже). Условный, конечно — просто разметка, ведь цель примера — как можно наглядней объяснить принцип создания блочной вёрстки. Зная базу, навести красоту и усложнить макет вы сможете и сами, а я лучше не буду перегружать пример.

Согласно макету, страница сайта будет содержать пять блоков: «шапку», навигационное меню, боковую панель, основной блок с контентом и «ноги».

Сначала создадим HTML-страницу: обозначим структуру, разметим её. HTML-код будет таким:

<!DOCTYPE html>
<html>
<head>
    <title>Блочная вёрстка</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
	<div>
	<h3>header (шапка сайта)</h3>
	</div>
		 
	<div>
	<h3>Блок навигации</h3>
	</div>
		 
	<div>
	<h3>Левая панель</h3>
	</div>
		 
	<div>
	<h3>Основной контент страницы</h3>
	</div>
		 
	<div>
		 
	</div>
							   
	<div>
	<h3>footer (низ сайта)</h3>
	</div>
</div>
</body>
</html>

Разберём некоторые моменты.

<div> — это блок-родитель, внутри которого расположились все остальные блоки. Как ячейки таблицы внутри <table>. Назначение дочерних контейнеров должно быть понятно, за исключением разве что блока <div>. Это вспомогательный слой, его смысл будет понятен, когда вы увидите код CSS.

Если открыть HTML-файл в браузере, не подключая таблицу стилей, страница будет выглядеть так.

Теперь добавим файл CSS, код которого приведён ниже.

body {
     background: #FFF;
     color: #000;
     font-family: Arial, sans-serif;
     font-size: 14px;
}

#header {
     background: #F5DEB3;
     width: 100%;
     height: 55px;
}
 
#container {
     background: #FFD700;
     margin: auto auto;
     text-align: center;
     width: 80%;
     height: 400px;
}
 
#navigation {
     background: #FE9798;
     width: 100%;
     height: 25px;
}
 
#sidebar {
     background: #40E0D0;
     float: left;
     width: 20%;
     height: 280px;
}

#content {
     background: #DCDCDC;
     float: right;
     width: 80%;
     height: 280px;
}
 
#clear {
     clear: both;
}
 
#footer {
    background: #00BFFF;
	width: 100%;
	height: 40px;
}

С помощью стилей мы последовательно оформляем содержимое тега <body> и всех находящихся внутри контейнеров с помощью ранее изученных правил.

#clear { clear:both; } запрещает обтекание элемента слева и справа. Если убрать это правило, вёрстка «поедет» и низ сайта перестанет корректно отображаться.

CSS творит чудеса, и с ним наша HTML-страница примет уже совсем другой вид.

Вот и весь смысл блочной структуры. Дальше можно только наполнять сайт содержимым и усложнять оформление, но делаться это будет всё равно по изложенному выше принципу. Также посмотрите статью про вёрстку сайта из PSD макета, там эти принципы показаны более наглядно.

Полезные ссылки:

Руководство по макету

CSS, шаг за шагом

Создание макетов — одна из самых сложных частей фронтенд-разработки для многих людей.

Вы можете потратить часов , пробуя случайные свойства CSS, копируя и вставляя из Stack Overflow, и надеясь наткнуться на волшебную комбинацию , которая создаст нужный макет.

Если ваша обычная стратегия состоит в том, чтобы подходить к компоновке постатейно — поместите A над здесь , и теперь, когда A находится на своем месте, я хочу поставить B над там … ну, это гарантированный маршрут к разочарованию.CSS не работает как Sketch, Figma или Photoshop.

В этом посте я хочу показать вам целостный подход к макетам как к единой проблеме, которую необходимо решить.

Мы рассмотрим небольшой пример, от начала до конца, и я объясню весь CSS по пути — так что даже если вы не знаете или не помните, как позиция и отображают , работают, или вы можете ‘ Расскажите своему align-items от вашего justify-content , вы получите что-то из этого.

Мы также будем использовать здесь простой HTML и CSS, поэтому вам не нужно ничего знать о React / Vue / Angular / CSS-in-JS или даже JavaScript. Точно такие же методы будут работать и в выбранной вами структуре, потому что простой HTML и CSS являются основными технологиями, на которых базируется все остальное.

Хороший звук? Давайте займемся этим.

Пример небольшого макета

В этой публикации мы воспроизведем что-то похожее на твит:

Начинаете ли вы с наброска, подобного этому, или с макета с идеальной точностью до пикселя, неплохо было бы иметь , что-то .

Макет

CSS работает более гладко, если вы не пытаетесь скомпоновать его в браузере, одновременно создавая его в уме. Вы абсолютно можете добраться до этого уровня! Но если вы читаете это, я предполагаю, что вас там нет , а 🙂

Первый шаг: определите детали

Прежде чем писать HTML или CSS, мы выделим отдельные части этого макета:

При компоновке объектов с помощью CSS я считаю полезным думать в терминах строк и столбцов.Таким образом, у вас есть либо элементы, идущие на вниз по странице один за другим, либо ряд элементов, расположенных слева направо. Мышление в терминах строк и столбцов прекрасно соответствует двум методам компоновки, которые дает нам CSS: Flexbox и Grid.

Однако этот макет не похож на строки и столбцы. Есть изображение слева, а справа от него беспорядок.

Второй шаг: рисовать коробки вокруг вещей

Давайте нарисуем несколько рамок вокруг элементов и посмотрим, сможем ли мы превратить их в некоторое подобие строк и столбцов.Мы поместим рамки вокруг частей, которые движутся в одном направлении.

Каждый элемент, который вы размещаете на странице с HTML, представляет собой , по сути, прямоугольник. Конечно, иногда у них есть закругленные углы, или они представляют собой круги, или причудливые формы SVG … Часто вы на самом деле не видите на странице как набор прямоугольников. Но вы всегда можете нарисовать ограничительную рамку вокруг объекта. Так что это помогает представить все в виде прямоугольника.

Я упоминаю прямоугольники, потому что, если у вас есть набор элементов, которые необходимо выровнять — например, первая строка с именем / @ handle / Time или последняя строка с иконками — вы всегда можете обернуть их в рамку для стилизации целей, чтобы упростить их организацию.

Если бы мы остановились на этом и закодировали это в HTML, у нас было бы что-то вроде этого:

  <статья>
  
  

     @handle 
     Имя 
     3 ч. назад 
  
  

    Некоторое проницательное сообщение.
  
  

    
Ответить 
    
Ретвитнуть 
    
 Like 
    
 <кнопка>...