• Сайт-портфолио создан мной для личного использования (Сайт создан с нуля)
  • Это реальный проект и доступен для просмотра по ссылке выше
  • Сделан с использованием фреймворка Bootstrap, библиотеки animate и query
  • В верстке используются файлы HTML, Css, js, Sass , Pug и конечно Gulp
  • На сайте можно увидеть такие компоненты как табы, модальные окна, адаптивное меню,а также форма отправки данных на почту с помощью ajax
  • Сайт полностью адаптирован под любое разрешение экрана
  • Верстка прошла проверку на валидность и протестирована в браузерах Opera, Safari, Firefox, Microsoft Edge, Chrome
  • Ниже представлен Mockup выполненный в редакторе Фотошоп

Мой сайт на разных устройствах

home

Интересные моменты создания и разработки Web-сайта, описание сайта пример

Я думаю, что эта страница в первую очередь будет интересна начинающим верстальщикам и Web-разработчикам. Первое, что хочу отметить, это-то, что в верстке я использую самый популярный фреймворк Bootstrap 4, а точнее его сетку. Используя всего лишь два класса row и col можно легко манипулировать блоками и перестраивать их так, как нужно. Особенно это важно при дальнейшей адаптации сайта. Используя такие классы ,как col-md-,col-sm-,col-lg-,col-xl- - сайт легко адаптируется под любое разрешение экрана. Далее, что хотела бы я отметить-это то,что для верстки своего сайта я использую препроцессор Sass. Используя Sass-файлы, написание кода становиться гораздо проще и быстрее, так как такой код избавляет нас от лишнего синтаксиса. Отличие кода я изобразила на скриншоте:
css sass
Важно отметить то,что все Sass-файлы компилируются в один сжатый файл style.min.css-а это очень важно для Seo-оптимизации сайта.
Далее чтобы я хотела отметить. В Web-разработке я использую технологию БЭМ (блок,элемент,модификатор) На скриншоте пример секции:
html sass
С такой версткой очень легко работать и такой код удобен и легок в понимании и чтении, а самое главное его легко найти в редакторе среди сотен строк, особенно если сайт многостраничный.
Самое интересное для меня-это было написать адаптивное меню (гамбургер). Ведь в своей верстке я не использую меню Bootstrap, а делаю его с нуля. Увидеть его можно, соответственно, только в мобильной версии. При нажатии на кнопку оно выпадает слева. Здесь уже не обойтись одним кодом Css. Тут уже на помощь приходит скрипт Js. Смотрим скриншот:
html css js
С помощью языка Js сделано оповещение отправки данных из формы в разделе контакты Форма отправляется мне на почту методом ajax Скрипт реализации такого функционала смотрим на скрине:
scrin js
Еще один важный момент, который я хочу отметить - это то, что главный фон и фон в секции Диплом и сертификаты cделаны мной в ручную в программе фотошоп:
bg bg
Если что-то в этом разделе я не описала или не отметила, это не значит, что это не важно. Для меня на моем сайте играет роль каждая мелочь, каждый момент и этап. Если Вы заинтересовались чем-то или Вам просто интересна верстка, пишите мне в любое время и я обязательно Вам отвечу. А если Вы нашли ошибки на моем сайте, обязательно напишите мне и я их исправлю в ближайшее время!