Создаем адаптивный сайт с нуля | Bootstrap уроки и верстка сайта для начинающих

Автор Elena Batratskaya
Создаем адаптивный сайт с нуля | Bootstrap уроки и верстка сайта для начинающих

друзья.

Привет Ты сегодня в течение 10 минут мы научимся с вами делать современные сайты без знания программирования данные сайты будут поддерживать bootstrap то есть — это набор свободных инструментов которые поддерживают и HTML разметку и CSS стили и с помощью этих технологий. Сейчас вы не пугайтесь, что — это сложные слова на самом деле на деле всё просто с помощью этих технологий вы сделаете современные сайты с адаптивной версткой. Давайте Вот например зайдём сейчас на мой блог.

Стас Быков true-ip виде сейчас у меня верстка сформировалась.

Вот именно вот — это расширение браузера сейчас мы обсуждаем окно браузера веке правая колонка пропала ещё сузили сформировалась в более узкий столбец и там скрылось меню то есть такие штуки и сможете делать самое интересное, что они уже сделаны по технологии bootstrap и вам просто нужно их взять и применить хостинг мы будем использовать конечно же Mac OS Mac OS там я уже сотрудник любое года здесь находятся мои проекты. И вам тоже здесь советую тем более сейчас по промокоду. Стас Быков ссылка будет в описании 3 месяца бесплатного использования по тарифу mac-10 сможете разместить 5 сайтов и 3 месяца бесплатно вы также можете зарабатывать создавая сайты другим. У меня есть отдельный видеоролик как зарабатывать на сайтах как разработать тоже посмотрите если вам — это интересно и вы ищите дополнительный заработок также по этому тарифу вы сможете сделать 5 полноценных сайта с пятью базами данных на сегодня у нас тема такая bootstrap верстка нам даже база данных не надо мы просто возьмём готовые инструменты готовы внесём туда свои данные разместим на хостинге — это всё делается в течение 10 минут. Сейчас вы сами увидите. И обязательно. Мы будем размещать на этом хостинге. Потому, что лучше хостинг макхост реально вам рекомендую. Попробуйте 3 месяца бесплатно. Иван Если что-то не понравится ли вам. Нет можете отказаться и так давайте. Заходим в. Яндекс пишем bootstrap шаблоны нажимаете найти здесь вылазит очень много сайтов с бесплатными шаблонами Free 30 бесплатных 50 бесплатных 50 лучших шаблонов. Ну давайте я переведу на первый попавшийся мне сейчас мы здесь попробуем скачать какой-нибудь шаблон так посмотрим также есть смотрите шаблоны блогов шаблоны магазинов портфолио. Премиум шаблоны. А мы находимся в разделе энергии. Так сейчас мы возьмём какой-нибудь Learning который мне нравится его нравится я посмотрю там было возможно ещё и до большая форма чтобы показать вам сама как — это будет всё адаптироваться под браузер, что мне по дизайну не очень здесь нравится. Ну вот. Давайте возьмём. Вот — это лайнер для барбершопа сейчас открываем эту страницу здесь. Можете почитать более подробную информацию. Да можете не читать просто нажимайте. Дима сейчас откроется DM этого шаблона если он вас устраивает мы его конечно же скачиваемые. Так давай открывай сейчас мы на тебя. Посмотрим сейчас увидите сайт как он есть как он будет выглядеть у вас видеть здесь меню здесь логотип — это картинки слайд-шоу здесь кого-то слоган — это всё можно вам применить. Смотри дальше листай вниз кстати очень очень смотрится и очень крутой шаблон вот взяли шаблон сделали продали какого-нибудь барбершопу. Почему нет в нашей жизни нужно всегда шевелится. При всём хостинг вас будет и 3 месяца бесплатно в — это время можете много чего сделать так. Ладно давайте переходим теперь обратно на страницу и здесь нажимаем скачать бесплатно у нас скачивается вот этот файл сейчас его покажу давайте я сейчас на рабочий стол. Перенесу чтобы было более наглядно вот этот файл делаем разархивировать с помощью винрара виза в эту папку здесь будет находиться сами файлы уже готова. Ленинград представляете ничего делать не надо. Всё уже есть всё готовы вот эта папка здесь есть индексные файлы которые как раз вот — это и есть главная переносим его браузер и на. Шлеменко открылся у вас всё здесь есть, что нам дальше интересно вот здесь вот в разделе CSS — это стиле, но вряд ли вам понадобится что-то менять, но в случае если например вот этот свет в зале темно зеленый поменять на какой-то другой, но явно не рекомендую меня заставлять лучше всего как здесь шрифты Font здесь ммг то есть в этой папке находятся картинки здесь видите уже все шаблоны подготовлен вам просто нужно вставить уже свои картинки есть чтобы он и здесь. Можете посмотреть там уже не скачивается с готовыми картинками здесь конечно же удобнее для программиста для дизайнера, что можно свои картинки вставить. Они здесь уже появятся переносите — это Photoshop и там просто. Добавляйте уже свои Java скрипт скрипты здесь ничего менять вам не нужно. Ну вот этот файл только меняем смотрите, что мы делаем открываем notepad-plus-plus дали переносим ID File notepad. Вот — это видео верстку структура документа в HTML формате и так, что у нас здесь интересует например. Мы хотим. Вот — это слова переименовать нажимаем копировать здесь мы его ищем и здесь пишем. Мой первый салон далее нажимаем здесь обновляем и, что мы видим. Мой первый. Салон Всё появилось ветер и также точно просто меня и мы даже ничего не программируем мы просто меняем слова которые есть здесь мы меняем в этом документе notepad Plus через notepad-plus-plus он меняется этот индексный файл в HTML формате после того как вы сделали вот — это вот — это нам нужно загрузить на хостинг открывая файл. ЗИЛа вводим имя хостинга имя пользователя и пароль и они вас будет после того как вы нажмете зарегистрироваться на хостинге по ссылке в описании и вы сможете быть в личном кабинете в так же в письме вам придут все эти данные данные и постинга имя пользователя и пароль я вот уже вошел здесь. Смотри, что я нахожусь в своём личном кабинете по FTP имею в виду его здесь. Папка http Docs.

0 комментариев
0

Читайте также