Html сайт с нуля: Как создать сайт с нуля при помощи HTML

Содержание

Создание сайта с нуля html

Он придумал для нас HTML

Зарождение языка гипертекстовой разметки неразрывно связано с одним-единственным именем – Тим Бернерс-Ли. Он является ни больше-ни меньше, как изобретателем Всемирной паутины, которой сегодня – без преувеличения – пользуется 9/10 населения Земли. А в 1980 году молодой (всего 25 лет) ученый и помыслить не мог, что его проект по гипертексту даст жизнь такому явлению, как интернет.

От имен перейдем к организациям и здесь не обойтись без упоминания ЦЕРН – Европейской лаборатории, занимавшейся ядерными исследованиями. Именно она стала альма-матер для зарождавшейся сети. Ученым было необходимо быстро обмениваться информацией, отображенной в универсальном формате. Вот тогда-то и стал востребован разработчик и его проект. В 1989 году новшество было реализовано, а сам Бернерс-Ли в дальнейшем вспоминал, что ему потребовалось лишь идею HTML совместить с системой доменных имен и протоколом управления передачей данных. Спустя два года (6 августа 1991) в интернете появился первый сайт, рассказывающий о спецификации языка разметки страниц, а ученый сосредоточился на развитии сети – HTML, HTTP, URL.

Примечательно, что пара слешей (“//”), ставших обязательным атрибутом адресов веб-страниц, создатель системы впоследствии не считал непременным условием. По воспоминаниям самого Бернерс-Ли, можно было обойтись и без них. Но в то время это почему-то показалось ему хорошей идеей, которая так и осталась в практике интернета.

Развитие HTML

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

  • В 1995 и 1997 году появились, соответственно, 2 и 3 версии. В них реализовались новые возможности оформления контента на веб-сайтах – таблицы, карты изображений, формы отправки информации.
  • В конце 1997 года вышла 4-я версия, которая положила конец анархии своих предшественников и стала попыткой привести структуру к общим для всех правилам.

Здесь нужно сделать отступление в ещё одно понятие, которое в интернете осталось под названием «браузерные войны». Пользуясь своим доминирующим положением в сети, разработчики некоторых программ для просмотра сайтов (браузеров) ударились в самодеятельность. Они изобретали новые теги и продвигали их в создании веб-страниц. Не нужно говорить, что подобная практика приводила к неприятным последствиям – сайты по-разному отображались в продуктах разработчиков. Выход HTML 4 навсегда прекратил эту вакханалию. Нужно сказать, что в качестве основной версии он продержался на рынке долгие 17 лет.

  • В 2014 году W3C (Консорциум Всемирной паутины) рекомендовал разработчикам переходить на 5-ю версию HTML, в которой они работают и по сегодняшний день.

Здесь обратимся к ещё одному явлению – опыту пользователей. За прошедшие два десятилетия компьютер и интернет из разряда игрушек для богатых стали непременным атрибутом почти в каждом доме и во всех офисах. Если создание первых сайтов было уделом немногих профессионалов и воспринималось как нечто особенное – сегодня эта аура исчезла, а сами веб-ресурсы стали обязательным элементом не только для бизнеса, но и в целях личного применения. Создание сайтов тоже претерпело трансформацию. Об этом в следующей статье.

Как написать сайт на html

Приветствую! Если вы ещё не знаете о том, кто я, представлюсь: меня зовут Андрей Зенков. Блог Start-Luck — это способ поделиться с читателями полезной информацией по веб-дизайну. Сегодня хотелось бы поговорить о том, как написать сайт на html. Пошаговая инструкция ответит на вопросы, которые чаще всего возникают у новичков.

Не разобравшись в основах, вы никогда не заработаете на своём первом сайте! Выбор доменного имени и регистрация аккаунта на хостинге — лишь один из этапов: ещё предстоит создать привлекательный дизайн, который вызовет желание задержаться на странице как можно дольше. Для этого всего лишь нужно знать основные теги, из которых по «кирпичикам» можно сложить шедевр веб-дизайна.

Рассмотрим программы, которые используются для написания кода.

Устанавливаем ПО

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

  • предоставляется на бесплатной основе;
  • не зависает даже при загруженности плагинами;
  • позволяет редактировать несколько файлов одновременно.

Вот так выглядит интерфейс Notepad:

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

Единственным преимуществом можно считать тот факт, что Блокнот установлен на ваш ПК по умолчанию. Вам не придётся искать источник для бесплатного скачивания программы.

Самый отчаянный шаг — воспользоваться Вордом. Мне кажется, он совсем не подходит для создания сайта, но вы всегда можете рискнуть. Впрочем, если не хотите тратить время на авантюры и воспользоваться другими программами, настоятельно советую ознакомиться с теми утилитами для вёрстки, о которых я писал ранее.

Создаём свою первую веб-страницу

В голове созрело решение сделать сайт самому? Поздравляю: вы стоите на пороге нового хобби, которое принесёт неплохую прибыль, если всё делать правильно. Однако, не будем заглядывать в будущее. Поговорим о ключевых тегах и структуре веб-страницы.

Создание сайта начинается с основных элементов. Рассмотрим каждый из них по отдельности.

DOCTYPE и <html>

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

<head> и <title>

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

<body>

Всё, что вы видите в данный момент на моём блоге, находится в пределах парного тега. Изображения, текст, ссылки — эти элементы сайта отображаются благодаря <body>, который должен закрываться в конце html-документа.

Наполняем веб-страницу содержимым

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

Вставим в «тело» страницы изображение при помощи тега <img>. Не забудьте предварительно залить картинку на любой хостинг, чтобы получить ссылку:

Укажем в свойствах изображения его ширину и высоту параметрами width и height соответственно:

Нажмите File — Save As… (Файл — Сохранить как). Задаём имя — index — и выпадающем списке «Тип файла» выбираем пункт Hyper Text Markup Language file:

Теперь осталось открыть страницу в браузере! Для этого кликните правой кнопкой мыши на файле и в меню «Открыть с помощью…» выберите любой из установленных браузеров. Написанный код конвертируется в простую веб-страницу с изображением, взятым из моего блога:

Поздравляю! Первая ступень на пути к личному сайту преодолена.

Ищем больше материала по HTML

Могу порекомендовать пару отличных курсов. Начнём с Михаила Русакова и его бесплатного 2-х часового видеокурса по созданию сайта, посвящённого основам HTML-вёрстки. На мой взгляд, это отличная бесплатная альтернатива занятиям в компьютерной академии, где сперва будут учить тому же.

Тем, кто хочет знать больше, подойдёт курс по основам HTML от Евгения Попова. Вы получаете наглядные уроки, по которым можно легко освоить создание сайтов даже заядлому чайнику. Не волнуйтесь и не забывайте верить в себя! Однажды я тоже был на вашем месте и не знал значения таких слов, как фреймы, метатеги, атрибуты и пр. Главное — начать, а всё остальное пойдёт как по маслу!

На этой позитивной ноте я прощаюсь с вами, дорогие друзья! Подпишитесь на обновления блога Start-Luck, чтобы не упустить из виду ни одной полезной статьи. Не забывайте и о группе ВКонтакте, где можно найти много интересного.

Желаю удачи!

Как создать сайт с нуля?

Хотите увеличить свое присутствие в Интернете и привлечь больше клиентов в 2021 году? Нет лучшего способа сделать это, чем создать собственный сайт. 

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

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

Шаг 1. Выбираем хостинг и домен 

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

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

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

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

* При заказе хостинга на год и более в Hostpro вы получите домен com.ua на 1 год в подарок. 

Детальными гайдами по выбору и регистрации доменного имени с радостью делимся с вами в нашем блоге. А пока коротко о самом главном: 

– Идеальное доменное имя должно быть коротким и легко запоминаться. Лучше не использовать в названии дефисы и точки – в дальнейшем потенциальные клиенты такие названия пишут с ошибками и в результате попадают на сайты конкурентов.

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

– Исследуйте, не использовали ли другие компании или частные лица созвучные вашему доменные имена, чтобы избежать конфликтов и путаницы. 

– Проверьте историю домена, не находится ли он случайно в черном списке Google после использования прошлым владельцем. Для этого мир придумал кучу сервисов, самый популярный – Web.archive.org. 

Узнать предварительную тематику домена не менее важно, ведь если она сильно отличается от запланированной вами, поисковики обновят рейтинг ранжирования и появится риск того, что ваши позиции снизятся до начального уровня. Без регистрации и смс 😄 узнать, чем сайт занимался до вас, можно с помощью бесплатного аналитического сайта https://www.cy-pr.com.

Позиции и рейтинг доменного имени можно проверить с помощью анализатора SEO Tester Online. Ресурс бесплатно сделает детальный разбор всех основных аспектов вашего нового домена. 

Шаг 2: Выберите свой путь самурая создания сайта 

Существует три основных способа создания сайта. 

Решение для начинающего

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

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

На конкретном примере конструктора Site.pro рассмотрим, как создать сайт за максимально короткий промежуток времени. Для этого уже готово следующее видео на странице «Конструктор сайта» и статья: Site.pro, как начать работу?

Решение для тех, кто шарит

Если вы хотя бы немного разбираетесь в веб-технологиях, вы можете использовать WordPress или другие системы управления контентом (CMS), такие как Drupal, Joomla, PrestaShop и другие. 

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

Почти треть всех сайтов в Интернете созданы на платформе WordPress, а также такие крупные компании, как CNN и eBay, используют именно эту CMS. Есть и бесплатные, и платные версии этого программного обеспечения. 

Подробнее о хостинге для WordPress читайте в нашей статье.

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

Использование WordPress для создания сайта по своему процессу схоже с использованием конструктора. 

Большинство хостинг-планов включают в себя легкий доступ к WordPress – установку программного обеспечения одним щелчком мыши или, что еще лучше, как в Hostpro, уже предустановленный WordPress. В большинстве случаев вы можете просто войти в панель управления хостингом и найти опцию для установки платформы WP. Если у вашего хостинга нет такой возможности, вы можете найти инструкции по ручной установке на сайте  WordPress.

Уровень advanced, как говорится 

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

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

Для написания HTML-тегов вам понадобится высококачественный текстовый редактор. Notepad ++ – хороший вариант для пользователей Microsoft, а TextMate идеально подходит для пользователей Mac. Кроссплатформенные текстовые редакторы включают Atom и Sublime Text.

Веб-сайты могут быть построены с использованием HTML, который переводится в текстовые файлы с расширением .html. Главная страница вашего сайта обычно называется index.html. Создайте этот файл и сохраните его, а затем заполните его базовой информации о вашем HTML-сайта. Это будет иметь примерно такой вид: 

1 <!doctype html>
2 <html lang=”en”>
3    <head>
4       <meta charset=”UTF–8”>
5       <title>Document</title>
6     </head>
7     <body>
8 
9     </body>
10   </html>
11

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

При создании сайта необходимо организовать файлы в папки в соответствии с той структурой, в которой вы хотите видеть свой сайт. Например, вы можете создать папку для страницы «О нас», в которой будет находиться основной файл about.html, а также все связанные с ним CSS и другие HTML-файлы, которые поддерживают этот контент. При добавлении ссылок на страницы вашего сайта вы будете ссылаться на их расположение в каталоге, в котором хранятся ваши файлы.

Контент пишется в разделе каждого файла .html (то есть каждой страницы) вашего сайта. А теперь немного информации о важнейших тегах, которые необходимо знать при создании сайта: 

  • doctype – используется для указания версии HTML, которую использует документ. 
  • <html> – является контейнером для всех остальных элементов HTML, за исключением тега <! DOCTYPE html>, который располагается перед открывающим тегом <html>. Все остальные элементы HTML вложенные между тегами <html> и </ html>. 
  • <body> – отображает основной раздел содержания HTML-документа. 
  • <section> – определяет разделы документов, такие как главы, заголовки, колонтитулы или любые другие разделы. 
  • <article> – это семантический элемент, который придает смысл содержания веб-страницы. Обычно он содержит контент, который, как правило, является основным содержанием или фрагментом основного содержания веб-страницы. 

Заполненная этими тегами основная структура вашей страницы будет выглядеть следующим образом: 

1 <!doctype html>
2 <html lang=”en”>
3      <head>
4          <meta charset=”UTF–8”>
5          <title>Document</title>
6        </head>
7        <body>
8          <section>
9             <article>
10            </article>
11          </section>
12        </body>
13      </html>
14
15

После этого вам нужно добавить основную навигационную панель для своего сайта. Это обеспечит легкий доступ к его основным страницам. 

<body>
  <section>
    <nav>
      <ul>
        <li><a href=”page1.html”>Page 1</a></li>
        <li><a href=”page1.html”>Page 2</a></li>
        <li><a href=”page1.html”>Page 3</a></li>
       </ul>
      </nav>
   </section>

И вуаля! Теперь посетители вашего сайта могут легко перейти к блогу, страницам товаров, просмотреть отзывы и снова вернуться на главную страницу! 

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

Фух, с этим разобрались. Что дальше?

Шаг 3: Оптимизируем контент 

Чтобы ваши посетители чувствовали себя на вашем сайте, как дома, продумайте иерархию контента: как правило, наиболее привлекательный и важный контент располагают выше «линии сгиба» (то есть, в области, которая видна на вашем сайте без необходимости скролла). 

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

Шаг 4: Ещё немного внимания для SEO 

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

Необходимый минимум по SEO, который поможет улучшить ваши позиции в рейтинге: 

 — обязательно выберите и зарегистрируйте доменное имя, 

 — создайте заголовки и описания для всех ваших страниц и пропишите title и alt-ы для ваших изображений, 

 — и не забудьте о ключевых словах в контенте.

Выводы

Как видите, создать сайт самостоятельно не так уж и трудно. Главное – действовать шаг за шагом и иметь за спиной надежного хостинг-провайдера с квалифицированным технической поддержкой. 

Дошли до логического завершения? Время заручиться помощью друзей. Когда все элементы будут готовы, попросите людей, которым вы доверяете, высказать свое мнение о вашем сайте. Так, они смогут вычитать текст, проверить все кнопки и ссылки и сказать вам, есть ли послание бренда понятным и последовательным. 

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

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

Создание сайта блога с нуля с помощью Jekyll | Программа инженерного образования (EngEd)

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

Вместо этого вы можете пойти по пути Jamstack. В этой статье мы рассмотрим, как создать и развернуть сайт Jekyll.

Введение

Jekyll — это генератор статических веб-сайтов Jamstack.Jamstack — это концепция создания веб-сайтов, не зависящих от веб-серверов и баз данных .

Jekyll был выпущен еще в 2008 году и был одним из самых удобных способов создания всех типов сайтов. Он написан на Ruby и использует шаблонизатор Liquid для отображения веб-страниц.

Предварительные требования

Для выполнения этого руководства вам потребуется:

  • Редактор кода. Не стесняйтесь использовать предпочитаемый вами редактор кода. Вы можете скачать VS Code здесь.
  • Некоторые базовые навыки в HTML и CSS.

К концу этого руководства вы сможете создать блог Jekyll с нуля.

Шаг 1. Установите Ruby

.

Поскольку Jekyll написан на Ruby, вам потребуется установка Ruby на вашем компьютере для запуска Jekyll. В Linux вы можете установить его с помощью диспетчера пакетов Snap или Apt.

  1. Установить с помощью диспетчера пакетов apt .

Сначала обновите репозитории apt, чтобы найти последнюю версию Ruby.

Затем установите Ruby.

  $ sudo apt-get install ruby-full
  
  1. Установить с помощью диспетчера пакетов Snap .
  $ sudo snap install ruby ​​--classic
  

Если вы используете macOS, вы можете установить Ruby с помощью Homebrew.

Если вы работаете в Windows, установите Ruby с помощью установщика Ruby. Установите последнюю версию установщика Ruby с комплектом разработчика отсюда. Чтобы подтвердить установку Ruby, запустите в терминале команду ruby ​​-v .Результат должен быть аналогичным, но может отличаться от приведенного ниже.

  рубин 2.7.0p0 (25.12.2019 ревизия 647ee6f091)
  

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

  экспорт GEM_HOME = "$ HOME / gems"
export PATH = "$ HOME / gems / bin: $ PATH"
  

Вы можете использовать команду echo , чтобы добавить указанные выше строки в конец строки .bashrc файл.

  $ echo 'export GEM_HOME = "$ HOME / gems"' >> ~ / .bashrc
  
  $ echo 'export PATH = "$ HOME / gems / bin: $ PATH"' >> ~ / .bashrc
  

Затем запустите файл .bashrc .

Шаг 2 — Установите Jekyll

Jekyll поставляется как Ruby Gem и может быть установлен в любой системе, на которой работает Ruby. Выполните приведенную ниже команду в терминале, чтобы установить Jekyll.

  $ gem install jekyll bundler
  

Шаг 3. Создайте новый сайт Jekyll

Создайте новый сайт Jekyll, используя команду ниже.

  $ jekyll новый блог
$ cd blog
  

blog — это имя сайта. Не стесняйтесь менять название сайта. Команда создает файлы со следующей структурой папок.

  ├── 404.html
├── о. Уценка
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.markdown
├── _посты
│ └── 2020-09-14-добро пожаловать-jekyll.markdown
└── _сайт
  

Мы более подробно рассмотрим эту структуру позже. Давай запустим сайт сейчас. Выполните следующую команду в терминале.

  $ комплект exec jekyll serve
  

Команда создает ваш сайт, и вы можете получить к нему доступ по адресу http://127.0.0.1:4000 по умолчанию. Вы можете запустить сайт, используя флаг --livereload , чтобы автоматически перезагрузить сайт после внесения изменений.

  $ комплект exec jekyll serve --livereload
  

Если вы обнаружите: Невозможно загрузить расширение EventMachine C; Чтобы использовать реактор на чистом рубине, требуется ошибка em / pure_ruby, переустановите машину событий.

  $ gem удалить eventmachine
$ gem install eventmachine --platform ruby
$ bundle exec jekyll serve --livereload
  

Понимание структуры папки

Теперь давайте посмотрим на структуру сайта. Есть две основные папки: _site и _posts . Папка _posts содержит сообщения блога, а _site содержит созданный сайт. Вы не должны редактировать содержимое папки _site . Файл _config.yml — это файл YAML, в котором хранятся настройки сайта и редко изменяемых переменных. Продолжайте и отредактируйте некоторые свойства сайта, доступные в этом файле. Например, имя, описание и т. Д.

Следующий важный файл — это Gemfile . Здесь определяются зависимости сайта. Существует также файл Gemfile.lock , который является более подробной версией файла Gemfile . Конкретные версии установленных в настоящее время зависимостей , определенных в Gemfile, записываются в этот файл.

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

Подробнее о структуре папок можно узнать здесь.

Шаг 4. Добавьте сообщения в блог

постов и страниц блога Jekyll написаны на Markdown. Markdown — это язык разметки, использующий синтаксис форматирования простого текста. Например, заголовки в уценке формируются набором перед знаком (ами) # . Ниже приведен HTML-эквивалент h4 в уценке.

  ### Это заголовок третьего уровня
  

Здесь вы можете изучить общий синтаксис уценки.

Откройте основную папку в вашем любимом редакторе кода и перейдите в папку _posts .

Есть приветственный пост в уценке. Имена файлов сообщений в блоге соответствуют соглашению об именах date-slug.md . Дата должна иметь следующий формат: ГГГГ-ММ-ДД . Слаг — это часть URL-адреса, идентифицирующая конкретное сообщение.

Чтобы создать новое сообщение, создайте файл уценки и назовите его 2020-09-14-my-new-site.мкр . Не стесняйтесь менять дату и метку. Если вы перезагрузите свой сайт, вы увидите, что у вас есть новое сообщение. Если щелкнуть его в этом месте, откроется пустая страница.

Добавьте следующий контент в новый файл уценки поста.

  ---
макет: сообщение
title: "Добро пожаловать на мой новый сайт!"
дата: 2020-09-14 14:37:43 +0300
категории: технологии
---
  

Приведенный выше контент называется вводным и использует синтаксис YAML. Он находится вверху страницы и используется для хранения метаданных страницы.Давайте посмотрим на главный вопрос.

  ---
layout: # указывает макет, который будет использоваться для этого файла
title: # название сообщения
date: # дата публикации поста
Categories: # категории этого поста. Вы можете разделить несколько категорий с помощью одного пробела
---
  

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

Шаг 5 — Применение пользовательского макета

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

Создайте папку _layouts в базовом каталоге и создайте внутри файл post.html . Этот файл отменяет стандартный макет post , предоставленный Jekyll. Поместите в него следующий контент.

  {% if page.title%}
 

{{page.title}}

{% еще %}

Сообщение без названия

{% endif%} {{page.date | date: "% b% d,% Y"}} {{ содержание }}

Перезагрузите страницу, чтобы увидеть изменения.

Jekyll использует шаблонизатор Liquid для создания файлов HTML. Вы можете узнать больше о тегах и фильтрах Liquid здесь.

Шаг 6 — Добавление изображений в сообщения

Чтобы использовать изображения в своих сообщениях, создайте папку assets в своем базовом каталоге. Создайте папку изображений внутри ресурсов и другую папку приветствия внутри изображений . Мы собираемся добавить изображение героя и другое изображение в ваш пост.

  $ mkdir -p assets / images / добро пожаловать
  

Скопируйте 2 изображения в этот каталог и назовите одного героя .jpg и другие new-site.jpg . Вы можете скачать бесплатные стоковые фотографии с Unsplash. Структура папок выглядит так:

  ├── активы
│ └── изображения
│ └── добро пожаловать
│ └── hero.jpg
| └── new-site.jpg
  

Давайте добавим изображение главного героя в один из ваших файлов уценки в папке _posts . Добавьте свойство hero в конце заголовка в файле уценки поста.

  герой: / assets / images / welcome / hero.jpg
  

Добавьте изображение new-site.jpg в конец файла.

 ! [Демонстрационное изображение] (/ engineering-education / assets / images / welcome / new-site.jpg)
  

В файле макета публикации добавьте изображение главного героя вверху.

  {% if page.hero%}

{% endif%}
  

Сохраните и перезагрузите страницу. Изображение главного героя отображается вверху, а другое изображение — внизу.

Шаг 7. Добавьте навигацию к своим сообщениям

До этого этапа у сообщения нет панели навигации или нижнего колонтитула.Эти части являются неотъемлемой частью любого сайта и должны быть на каждой странице.

Создайте папку _includes в вашем базовом каталоге и создайте внутри файл navbar.html . Поместите в него следующий контент.

  <стиль>
ul {
  тип-стиль-список: нет;
  дисплей: гибкий;
}
li {
 маржа: 5 пикселей;
}



  

А затем включите панель навигации в верхнюю часть файла макета сообщения.

  {% include navbar.html%}
  

Сохраните файлы и перезагрузите страницу, чтобы увидеть изменения. Простая панель навигации в файле navbar.html теперь будет отображаться в каждом файле, который принимает макет публикации. Таким же образом можно добавить нижний колонтитул.

Шаг 8 — Добавление индивидуального стиля в ваш блог

До этого этапа вы использовали тему по умолчанию minima , предоставленную Jekyll. Чтобы стилизовать сайт с нуля, удалите свойство темы в файле _config.yml .

Если вы перезагрузите свой сайт, он, вероятно, сейчас выглядит сломанным. Давайте продолжим и исправим это. Создайте следующие файлы в _layouts .

  • default.html
  • page.html
  • home.html

Поместите в файлы следующее содержимое.

  




    
     {{page.title}} 


{% include navbar.html%}
    {{ содержание }} 

  
  

---
макет: по умолчанию
---
{{содержание}}
  
  

---
макет: по умолчанию
---


 

О компании

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

Jekyll использует таблицы стилей Sass. Вы можете изучить основы Sass здесь.

Создайте папку _sass в вашем базовом каталоге и создайте в ней файл main.scss . Также создайте папку css внутри папки assets и создайте файл styles.scss . Поместите в файлы следующий контент.

  // стили.scss

---
---

@import "основной";
  
  // main.scss

тело {
  цвет фона: rgb (20, 20, 20);
  цвет: #fff;
}
a {
    цвет: rgb (2, 170, 38);
    текстовое оформление: нет;
}
  

Пустая обложка в main.css сообщает Jekyll, что файл должен быть обработан. Теперь вам нужно импортировать таблицу стилей в default.html . Поместите следующую строку между тегами head в default.html .

  
  

Обратите внимание, что импортированная таблица стилей представляет собой файл css , а не scss . Это потому, что большинство браузеров не поддерживают sass. Поэтому Jekyll преобразует таблицу стилей sass в файл CSS, совместимый со всеми браузерами. Импортированный файл находится по адресу _site / assets / css / style.css . Перезагрузите страницу, чтобы увидеть таблицу стилей в действии.

Заключение

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

Проверьте некоторые из этих навыков и начните с создания простого статического сайта Jekyll.

Дополнительные ресурсы

Дополнительные важные концепции и практики Jekyll можно найти ниже.


Вклад экспертной оценки: Луиза Финдли

Создайте сайт электронной коммерции с нуля

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

По оценкам, только в 2021 году более 2,14 миллиарда человек будут делать покупки в Интернете, а к 2025 году предполагается, что 95% всех покупок будут совершаться в Интернете. От кустарного мыла до посуды с ручной росписью - найдется рынок для любого онлайн-бизнеса.

Библиотека закодированных компонентов пользовательского интерфейса Building Blocks

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

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

Наша тройка лучших веб-конструкторов

02. HostGator: простой в использовании и выгодный
Нужно быстро получить базовый веб-сайт в Интернете? Hostgator - отличный и доступный выбор. Предлагая редактор перетаскивания и 150 шаблонов на выбор, его легко настроить - не требуется кодирование или технические знания.Просмотр сделки

03. Squarespace: лучший вариант для профессионалов
Squarespace делает упор на красиво оформленные шаблоны, которые сделают ваше портфолио великолепным, что делает его идеальным для творческих профессионалов. Кроме того, он прост в использовании, есть отличные инструменты для SEO, и вы также можете добавить интернет-магазин. Просмотр сделки

01. Создание веб-сайта электронной коммерции: начало работы

Строительные блоки не определяют, как ваш сайт должен выглядеть

Первый нам нужно создать среду для создания сайта.Для этого урока вам нужно сначала загрузить node.js. После его установки вы захотите установить Foundation CLI с помощью команды npm install -g foundation-cli .

Теперь, когда в вашей системе установлен Foundation, давайте запустим новый проект Foundation с помощью команды foundation new ecommerce-site. В следующем списке выберите первый вариант «Веб-сайт (Foundation для сайтов)», введите название нашего проекта «ecommerce-site», а затем выберите «Шаблон ZURB».Это запустит шаблон Foundation и сервер разработки, чтобы мы могли легко приступить к созданию нашего веб-сайта. Запустите npm start в терминале, чтобы запустить проект.

Теперь давайте заглянем в код нашего нового проекта, открыв его в текстовом редакторе. Здесь вы найдете образец страницы в src / pages / index.html, содержащий некоторый материал шаблона по умолчанию. Мы собираемся удалить весь код здесь.

02. Веб-сайт электронной коммерции: установка комплекта

Прежде чем мы напишем какой-либо код, мы собираемся использовать комплект электронной коммерции Foundation с интерфейсом командной строки Foundation.Направляйтесь к своему терминалу и используйте комплекты command foundation kits install ecommerce.

Если эта команда не работает, еще раз проверьте, обновлен ли ваш Foundation CLI до версии 2.2.3. Чтобы проверить, какая у вас версия, запустите в терминале foundation -v . Если вам нужно обновить, просто удалите CLI с помощью npm uninstall -g foundation-cli и переустановите его с помощью npm install -g foundation-cli .

Это только что загрузило все строительные блоки в нашем комплекте электронной коммерции! Каждый раз, когда вы устанавливаете Building Block, он появляется в src / partials / building-blocks .Вы узнаете, что ваш комплект установлен правильно, если все стандартные блоки были автоматически импортированы в файл app.scss .

Некоторые из этих строительных блоков содержат значки из Font Awesome, поэтому вы захотите либо установить их вручную, либо добавить их CDN в вашего сайта. Для этого перейдите к src / layouts / default.html и добавьте между тегами .

03. Веб-сайт электронной коммерции: создание основы для сайта

Комбинируйте блоки для достижения идеального макета электронной коммерции

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

В этом уроке первые два блока, с которых мы начнем, - это заголовок и промо-герой. Для этого мы собираемся использовать частичный механизм Handlebars. В пустой файл index.html добавим партиалы {{> ecommerce-header}} и {{> ecommerce-promo-hero}} . С этими двумя строительными блоками наша целевая страница электронной коммерции уже выглядит наполовину готовой.

Затем мы добавим несколько карточек продуктов под нашим разделом героев. Чтобы использовать строительный блок карточки продукта, мы будем использовать сетку блоков Foundation, чтобы карточки располагались равномерно внутри сетки.Это также упростит изменение макета этих карточек позже.

Начнем с

. Внутри этого div добавьте десять столбцов с карточкой продукта внутри каждого столбца
{{> ecommerce-product-card}}
.

Мы хотим дать нашим клиентам возможность получить доступ к большему количеству наших продуктов, поэтому давайте добавим кнопку выноски под нашими карточками продуктов. Сначала нам нужно создать наш

, чтобы наша кнопка была по центру страницы.Затем мы будем использовать компонент кнопки Foundation для создания нашего выноски. Добавьте внутри .row.column .

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

, чтобы содержать наш заголовок

Newest Arrivals

.

Большинство домашних страниц электронной коммерции содержат больше рекламного контента под их продуктами.Давайте воспользуемся Building Block {{> ecommerce-hero-slider-small}} здесь. Чтобы ползунок не перекрывал ширину страницы, мы обернем его вокруг

.

Поскольку сайты электронной коммерции обычно состоят из множества страниц, большинству из них потребуется мегафутер с большим количеством ссылок, чтобы справиться с объемом страниц. В нашем комплекте электронной коммерции есть нижний колонтитул для этого конкретного варианта использования. Чтобы завершить эту схему, давайте добавим {{> ecommerce-footer}} в самый конец нашего HTML.

04. Веб-сайт электронной коммерции: проверьте его на отзывчивость

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

Следуя нашему девизу «сначала мобильные», Building Blocks от Foundation созданы с учетом естественного реагирования. Быстрая проверка на меньшем экране показывает, что наш сайт по-прежнему выглядит неплохо.

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

Если вы заглянете в файл ecommerce-header.html, вы заметите, что в этот заголовок встроен не холст. Итак, почему это не сработало? Когда мы щелкнули по гамбургер-меню, единственное, что было «вытолкнуто», - это заголовок.Остальная часть страницы оставалась на виду, вызывая какое-то странное перекрытие.

Это связано с тем, что этот заголовок был создан для самостоятельной работы, но на самом деле он должен работать со всей страницей. Другими словами, ему нужно подтолкнуть весь контент на странице, когда запускается меню вне холста, а не только меню заголовка. Этот заголовок электронной коммерции был написан таким образом, потому что для настройки вне холста необходимо погрузиться в страницу src / layouts / default.html , которая находится за пределами досягаемости Building Block.

Это то, что мы сейчас видим, потому что вне холста еще не подключено

Чтобы исправить это, все, что нам нужно сделать, это взять все внутри

и переместить его в src / layouts / default.html . Затем мы собираемся обернуть {{> body}} нашего сайта в
. Это подтолкнет тело нашего сайта при запуске вне холста.

Теперь, когда мы нажимаем на наш гамбургер, весь сайт перемещается в меню вне холста! Тело нашего default.html страница должна выглядеть так:

  
  <данные div-off-canvas>



{{> body}}

Мы показали вам, как быстро запустить ваш сайт электронной коммерции с помощью Foundation eCommerce Kit, но не останавливайтесь на достигнутом! Существует более 100 строительных блоков, которые можно использовать для улучшения ваших страниц. За считанные минуты мы создали статический сайт электронной коммерции с помощью Building Blocks. Это сэкономит вам много времени, которое теперь вы можете использовать для наложения визуальных элементов и стилизации сайта в соответствии с вашим брендом.

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

Эта статья впервые появилась в журнале net magazine , выпуск 266.

Статьи по теме:

Создайте свой собственный сайт-портфолио с нуля: Введение в HTML и CSS | Расшифровка стенограммы Alexa S

1. Введение + настройка: Привет, ребята, меня зовут Алекса.Я дизайнер и разработчик, и сегодня я собираюсь научить вас создавать простую веб-страницу с использованием HTML и CSS. Итак, это страница, которую мы собираемся создать. Я сделал его похожим на страницу портфолио. Итак, у нас есть раздел для вашего имени, небольшое описание и немного о себе, а также этот небольшой раздел, где вы можете как бы перечислить свои навыки. И затем у нас есть сетка проекта, которая в конечном итоге будет строить эти маленькие отдельные страницы проекта, и мы будем ссылаться на них из сетки проекта.Так что я очень рад показать вам, как все это построить. И я также хочу, чтобы вы, ребята, загрузили свои конечные результаты в галерею продуктов. И я надеюсь, вы как бы потренируетесь немного конструировать. Может быть, использовать свои собственные изображения. Я бы хотел увидеть то, что у вас тоже есть на моей странице. Обязательно нажмите «Follow», чтобы получать уведомления о новых классах. Я загружаю, потому что я определенно хочу продолжить этот проект, возможно, добавлю к нему некоторый сценарий задания, немного больше функциональности и, возможно, в будущем, сделав его немного более модульным.У меня есть этот набросок Moxon, и я, гм, также свяжу этот документ. Если вы хотите скачать скетч, у них есть бесплатная пробная версия. Думаю, на месяц. И тогда вы можете войти сюда и действительно увидеть все, что находится здесь на высоте, чем я и собираюсь заниматься, пока мы создаем наш сайт, вы также можете выбрать что-нибудь и нажать кнопку . И тогда вы получите количество пикселей между разными элементами. Так что это действительно полезно. Гм, когда вы разрабатываете, чтобы получить все до пикселя.Так что, если вы хотите загрузить бесплатный пробный эскиз, вы можете открыть его здесь. В противном случае я также прикреплю их только в формате pdf, чтобы вы могли их визуально рассмотреть. Итак, теперь я собираюсь кодировать вспомогательный текст. Так что, если вы хотите скачать этот редактор кода, мне он очень понравится. Гм, это действительно просто. Я думаю, что да. Вы можете увидеть на их веб-сайте, какие функции он имеет. Но на самом деле, функция, которая мне нравится, заключается в том, что она вроде как автоматически завершается, когда вы вводите разные вещи.Итак, это редактор кода, который я собираюсь использовать, чтобы вы могли предоставить его. Я пишу и скачиваю. Это бесплатно. Он будет спрашивать вас, наверное, несколько раз, например, вы бы хотели заплатить за полную версию? Но у меня были прекрасные тесты вот уже четыре года, и я просто продолжаю говорить «нет». И это нормально. Итак, вы также можете использовать Адама. Я знаю, что некоторым людям очень нравится этот редактор кода, гм, код Visual Studio - еще один популярный. Так что, если вы не стесняетесь использовать то пальто, которое, очевидно, хотите, но не то, на ком я собираюсь использовать, так что я также хочу показать вам, как мы собираемся все настроить.Итак, у меня есть свои издевательства. Мне очень нравится иметь возможность легко переключаться между экранами. Итак, у меня есть свои макеты здесь, а затем у меня здесь мой код, а затем, когда у нас будет наш сайт, мы будем смотреть на него именно здесь. О, это очень похоже на просмотр вещей. А сейчас у меня здесь только набросок. Но сейчас я проведу вас через настройку файловой структуры для нашего небольшого проекта. И давайте начнем с настройки типа наших файлов и папок, чтобы вы могли видеть, что я создал папку под названием Skill Share.Вот где я буду хранить все документы. Хм, а внутри у меня просто файл с эскизом. Вот где я издеваюсь над нашими, гм, и поэтому позвольте мне создать еще одну папку. Я просто назову это активами. Хм, я так внутри всей этой папки, у нас будет папка с названием CSS um, и папка Not in There Folder, здесь она называется Image. И вот где мы собираемся хранить все изображения. У меня есть изображения, загруженные на сайт Skill Share, так что вы, ребята, можете просто скачать их или использовать свои собственные.Ага, и изображение CSS. А потом, как правило, я бы, как владелец Js здесь, гм, ослабил бы Бога, чтобы, гм, в последующих классах все учили вас, как добавить немного JavaScript. Наверное, Джейк устал от вашего сайта. toe добавить немного больше функциональности. Но для этого класса вам просто нужен ваш CSS и папка с изображениями. Хм, а затем мы перейдем к нашему возвышенному тексту и сохраним его как index HTM прямо здесь. 2. HTML Boilerplate + Header: мы собираемся начать писать HTML. Так что для этого, ммм, обычно я просто использую Google как стартовый шаблон html, потому что это много шаблонного, а его много.Гм, это вроде как каждый документ, который вы настроили, будет иметь одно и то же. Так что его легко просто скопировать и вставить, гм, так что здесь я погуглил, как стартовый html-код. Так что этот мне кажется неплохим. Я собираюсь скопировать это, и я собираюсь пройти его index dot html. Потрясающие. Итак, начнем с того, что у нас есть эта маленькая, ммм, доктор Док, тип точка html. Так что это просто позволяет браузеру не любить что? Это чтение. Гм, а мы пишем на html пять. Гм, а затем у нас есть наши HTML-теги, чтобы вы могли видеть, что у всех тегов есть этот маленький стартовый тег с двумя каратами вокруг него, а затем у него есть закрывающий тег с небольшим переносом и косой чертой. Заметьте, что и голова, и тело.Это тоже есть. Поэтому большинству тегов нужно начинать с тега. И есть пара, например, meta. Ему просто не нужен закрывающий тег. Так что это просто то, к чему привыкаешь, когда пишешь. Гм, еще HTML. Поэтому мы всегда начинали с оболочки. Мы всегда начинаем с головы. И этот вид сообщает браузеру некоторую важную информацию, такую ​​как заголовок, описание. Ах, автор. И тогда здесь мы также будем связывать наши файлы CSS. Здесь мы будем связывать любой из наших файлов сценария работы, ммм или любые другие зависимости.Как, например, позже мы будем связываться, гм, здесь весело. А затем, после закрывающего тега головы, мы запускаем тело. Гм, и вот здесь, я полагаю, на этой табличке со спойлером есть небольшой сценарий в сценарии. Всегда идет прямо перед или обычно идет прямо перед закрывающим телом. Введите этот пример. Я просто удалю это, потому что сейчас нам это не понадобится. Гм, и как вы можете видеть, как и теперь, голова и тело выровнены по левому краю, а затем, например, внутри головы было немного постукивано, так что это просто сохраняет наш код действительно чистым.Гм, и так это легче читается. Мы можем изменить название. Я просто назову это портфолио по обмену навыками, и тогда наше описание будет просто: Эй, простой сайт придворного фолианта. Гм, и мы можем сделать автора, вы знаете мое имя, и тогда мы поговорим об этом чуть позже. Итак, если вы это видите, а затем вы заходите в свои файлы и дважды щелкаете по нему, это откроется в окне браузера. И здесь обслуживается ваш сайт. Так что прямо сейчас у нас ничего нет, потому что все в голове - это просто то, что нужно браузеру.Нет. И все в теле - это то, что вы на самом деле будете рендерить, чтобы мы могли войти в тело. И давай, Том, напиши что-нибудь. Я думаю, это приведет к тому, что файл ролей вернется в браузер. Мы обновляемся, и теперь вы увидите, что это кайф. Гм, я не был Так что теперь мы собираемся начать, эм, разрабатывать структуру нашего сайта. Таким образом, мне нравится создавать сайт, когда я настраиваю большую часть скелета HTML, а затем мне нравится начинать работать с CSS. Так что, наверное, это похоже на то, что я дизайнер и привык сначала делать каркасы, а затем строить, ммм, больше готовых макетов.Я тоже люблю строить свои сайты таким же образом. Итак, мы собираемся начать с заголовка, который находится прямо здесь, а затем перейдем к этому маленькому герою, а затем поработаем над проектами. И поэтому я действительно хочу сначала изложить все эти вещи. Итак, мы собираемся выложить их кубиками. Так что это провал. Гм, и вы можете видеть, что мой возвышенный редактор кода автоматически завершает eso. Если я нажму вкладку, тогда я получу свой открывающий тег в моем заключительном налоге, так что это действительно полезно.Ваши фишки похожи на строительные блоки сайта. Гм, я думаю о них, как о прямоугольниках. И когда я смотрю на такой макет, я говорю: «Хорошо, мне нужно искупаться здесь». Мне нужно искупаться здесь. Хм, мне, наверное, понадобится пара здесь, а потом все эти воздушные фишки. Итак, мы собираемся сюда войти, и на самом деле есть тег на элементе под названием Header. Итак, вы собираетесь использовать это, и я нажму Enter, потому что мне нравится, чтобы мои теги были выровнены по левому краю, ммм, в той же строке и внутри моего заголовка.Верно. Я думаю, оглядываясь на свой сайт, я думаю, мне понадобится мой логотип здесь, так что это, вероятно, будет div. А потом мне понадобятся эти три ссылки, так что я, наверное, их вставлю. Гм, я мог бы просто поместить их три отдельных смерти, но подумав, что я, вероятно, не собирался помещать их, ммм, хотел, а затем, э-э, три дня в этой смерти, на всякий случай, когда я, возможно, строю для мобильных устройств. Если что-то нужно перенести, будет проще, если все будет в одной маленькой секции. Итак, я собираюсь перейти к своему заголовку, и я буду творчески, и я дам ему класс, который в основном просто дает ему имя.Я назову это логотипом. Итак, это имя класса, мм, сообщает браузеру, что этот логотип с именем Дэвиса, и когда мы заходим в наш файл CSS, это в основном стиль. Гм, он будет использовать этот класс с именем toe add для езды на велосипеде. Итак, есть класс и есть I D, оба имени. Гм, но я собираюсь использовать классификацию, потому что классы можно использовать повторно. Итак, если бы у меня был другой, имел ли этот необходимый палец ноги, скажем так, те же характеристики, что и логотип. Я мог бы использовать это имя класса для второго различия.Хорошо, но я бы сказал, что вы можете использовать только один отжим, так что это немного более конкретно. Гм, мы также поговорим об этом немного подробнее в нашем файле CSS, потому что там, гм, идеи берут на себя президентов над классом. Похоже, что если вы поместите это, например, стиль на I.D. Гм, вот как это проявится, если он перезапишет класс. Так вот мой классный мой писец. Я собираюсь ввести это, а затем я скажу, что я знаю, что мне нужно изображение для моего логотипа. Итак, я собираюсь разместить изображение и посмотреть это. Изображение не требует времени закрытия.И мой редактор кода это знает. Поэтому, когда я вкладываюсь, он просто отправляет мне это, эм. И поскольку мы настроили нашу папку с изображениями, я знаю, что мое изображение будет в папке с изображениями. Um Так, например, прямо сейчас мы пишем код в HTML с индексной точкой. И поэтому мне нужно сказать браузеру, чтобы он зашел в эту папку, чтобы найти изображение. Вот о чем мы здесь пишем, и давайте посмотрим. Прохладный. Итак, после моего изображения у нас есть небольшая, ммм, навигация. И я собираюсь внести это в список, потому что, когда у вас есть, вроде бы, некоторые из тех же вещей, которые отсутствуют, просто неплохо внести это в список.Гм, а это новый упорядоченный список. Это то, что вам нужно. И затем у нас есть эти элементы списка, поэтому мы можем поместить все, что вы хотите. Вы должны быть. Я поставил Думаю, я поставил Instagram, вы можете связать свой Instagram, гм, тогда я Tribble, и мы можем поставить Facebook. Я не уверен, что еще, но круто. И еще одна вещь, которую я хочу добавить сюда, - это тип привязки. Это просто, гм, и я нажимаю time, а затем вижу, что мне нужно переместить свой тег и вокруг ссылки, потому что мы хотим, чтобы эта ссылка была ссылкой, а это то, что тег in anger включен.И тогда эта маленькая восьмерка в основном похожа на что? Это ссылка. Таким образом, мы могли бы поставить как instagram точка com. Вот где вы должны добавить, мм, вот где вы добавите, мм, ссылку на свой Instagram, и тогда то же самое произойдет с проблемами. Может фейсбук? Я просто заполню их здесь и переместу теги гнева, чтобы пройти по ссылке. Хм, просто сейчас здесь косую черту. Я получу ссылки позже. Гм, круто. Так что мы можем сказать это. Посмотрим, как это выглядит прямо сейчас. Потрясающие.Таким образом, мы как бы видим, что у нас есть, например, то, куда пойдет изображение, а затем куда пойдут ссылки, но они вообще не стилизованы. Так что обычно я просто продолжал бы так и ничего не стилизовать. Эм, но я собираюсь Тео хотя бы немного стилизовать заголовок, потому что я думаю, ммм, вы, вероятно, захотите выяснить, как он будет выглядеть, и это, вероятно, будет немного менее скучным. Итак, давайте перейдем в нашу папку CSS. Гм, это то место, куда мы собираемся поместить наш файл CSS. Итак, если я создам здесь новый файл и скажу это, я назову его стилем точечного CSS, и я пойду внутрь Ниццы.Да, это Холдер. И я увижу это там. Хотя круто. Теперь, когда у нас есть файл CSS, мы можем приступить к стилизации наших HTML-элементов. Итак, первая единица, которая у нас есть, - это заголовок. И если мы посмотрим на заголовок, внимательно изучим наш файл эскиза, я вижу, что он имеет ширину 9 60 мкм, и у нас есть некоторые элементы, которые выровнены, справа, и у нас есть еще один элемент, который выровнен по левому краю. . Итак, я собираюсь пойти дальше и сначала я свяжу это изображение. Так что изнутри запах Rh, я собираюсь использовать изображение.Думаю, я назвал это логотипом. Станьте идеальным. Итак, мы собираемся использовать логотип в формате PNG, и теперь вы можете видеть, что у нас есть наше изображение прямо здесь. Хм, еще одна вещь, которую я хочу сделать, собственно, вокруг изображения. Я хочу добавить ссылку, поэтому я просто сделаю то же самое, что и с этими длинами. Я собираюсь добавить тег привязки и окружить этот элемент изображения галстуком гнева. И я собираюсь сделать черновик A просто косой чертой, эм, который должен просто вернуть вас на страницу, и что? Ах, ммм, логотип обычно появляется, если вы нажимаете на него, просто возвращаясь домой.Так что мы оставим это там. Эм круто. Итак, наш заголовок, который мы видели, был размером 9 60 Um, поэтому, если я перейду к стилю, я могу перейти к заголовку, и я могу пойти с ними, могут пойти 9 60 пикселей и сказать это. А теперь, если я обновлюсь, вы ничего не увидите. Но если мы углубимся в это, инспектор Итак, это инспектор и хром. Итак, как я это сделал, я просто щелкнул правой кнопкой мыши и спустился, чтобы проверить. И тогда это откроет это окно, и вы действительно сможете просмотреть все элементы html. Вот здесь я вижу свой заголовок.Верно? Причина того, что это не связывалось, заключалась в том, что мы не связали себя листом внутри своей головы. Здесь я сказал, что у нас есть ссылка на важную информацию Teoh. А, вы увидите прямо здесь, что шаблонный тип идет с этим, мм, уже связанными стилями, потому что это, вероятно, самый распространенный синтаксис, который мы собираемся использовать. Мы призвали наших солдатиков к стилю избавиться от этого. Итак, теперь мы сами, Раскрываем Таблицы. Итак, если мы наведем курсор мыши на заголовок, вы увидите, что это 960 пикселей, почему. А теперь нам нужно будет центрировать его, чтобы я мог перейти к стилю.И Айкен дио наценка. И если я сделаю маржу автоматически, это будет, ммм, центрировать мой заголовок, потому что он просто делает автоматические поля с обеих сторон. Прохладный. Итак, теперь у нас есть это возвращение к моему файлу, хотя я вижу, что все будет, мм, 960 пикселей. Итак, я думаю, что внутри моего заголовка я хотел бы обернуть все в div. Итак, мы собираемся поместить все в смерть и в логово, так что мой напряженный только Том два пространства, некоторые люди воздух четыре. Это действительно личные предпочтения. Гм, и вы действительно можете перейти к возвышенному здесь и щелкнуть по нему, и он покажет что? Вкладка с ISS.Итак, моя вкладка с настроена на ... Итак, я создал это мертвое, и я назову этот контейнер Div, и я собираюсь дать контейнеру с размером 960 пикселей. Гм, так что все в нем, гм, он будет оставаться в пределах 1960 пикселей. И затем я также знаю, что я смогу повторно использовать этот класс, потому что все остальное на сайте, гм, находится в том же самом контейнере. Так что я вернусь к своему стилю и заменю его на контейнер. И вы увидите, что когда я вызываю тег, например заголовок, я могу просто написать заголовок.Когда я вызываю класс, я должен использовать точку, а затем контейнер. И когда я взываю к нему, Я использую маленький хеш-тег. Эм, если бы у нас был идентификатор, называемый хэш-тегом liga. Итак, теперь у нас 960 пикселей, поле автоматически. Это должно выглядеть так же. Теперь вы увидите и услышите, что все находится в этом контейнере. Мы можем открыть это. Мы увидим наш логотип в наших списках с цитатой. Итак, теперь я вернусь к своему файлу, потому что хочу посмотреть, насколько он велик. Мой логотип такой, что мы не промахнемся. Я вижу, это 100 мкм, ширина пикселей и высота изображения тоже.Итак, я собираюсь начать использовать это. Итак, я собираюсь взять логотип своего класса и присвоить ему 100 пикселей, и это должно сделать наш логотип шириной 100 пикселей. Итак, если мы перейдем сюда и обновим, то увидим, что ничего не изменилось, потому что нам нужен логотип. У вас есть 100 пикселей в ширину, но изображения по-прежнему сохраняют свой исходный размер. Так что я просто пойду сюда и скажу логотип, а затем изображение, и я собираюсь сделать изображение 100%. Таким образом, изображение должно занимать 100% своего контейнера.Гм, и способ обойти это. Итак, поскольку изображение вложено в наш логотип, значит, именно так вы получили этот элемент. Поскольку на нашем изображении нет класса, мы можем сказать, ммм, логотип div с изображением, вложенным в него, так что это изображение будет со 100% -ным значением Потому что, если мы просто написали изображение, тогда все изображения, мм , было бы со 100%. Мы хотим сказать изображение внутри логотипа. Def. Я все еще здесь и обновлю это. И похоже, что это сработало. Что ж, гм, круто. Итак, теперь мы можем перейти к нашему списку, и вы увидите, что браузер добавляет эти небольшие маркеры.Это просто стиль браузера. Гм, во всех браузерах есть какие-то встроенные стили, которые применяются к определенным элементам. Так что мы, вероятно, просто избавимся от этого. Итак, мы собираемся перейти к нашему CSS, мы подойдем к вам хорошо, и мы сделаем стиль списка. Гм, и мы не скажем ничего. Так что это убирает эти маленькие пули. Гм, а затем, поскольку все эти элементы как бы наложены друг на друга, и мы хотим, чтобы они как бы красиво располагались рядом друг с другом, мы скажем вам, что я. Итак, мы собираемся сказать list, и мы скажем: отображать в строке, смотреть.Итак, как только мы это скажем и обновим, мы должны увидеть, как все они плавают рядом друг с другом. Послушайте, и еще мы замечаем, что логотип и список тоже расположены друг над другом. Таким образом, мы собираемся исправить это, вернемся к этому. Правильно ли логотип перекрестный, мы скажем, черный цвет. И что? Это показательно. Браузер просто выровнял это по левому краю, сдвинул влево, эм, а затем мы перейдем в RUL и скажем float, и мы скажем right, и так это должно исправить это.У нас будет рост. Твоя голова. Как видите, мне нужен заголовок размером 120 пикселей. Итак, мы скажем Заголовок. Я на самом деле собираюсь поставить эту высоту на контейнер, поэтому, если я войду сюда, я скажу заголовок, и я скажу контейнер, поэтому я не хочу добавлять это в наше правило. здесь, потому что тогда все контейнеры будут 100 и 20 пикселей. Но если я положу его на контейнер, который находится в пределах высоты заголовка, он просто изменит только этот контейнер. Теперь у нас есть высота 120 пикселей.Так что теперь я действительно хочу Тео. Гм, выровняйте все по центру. И на самом деле я собираюсь сделать это с помощью чего-то, что называется Flex Box. И поэтому, если я войду в свой контейнер и скажу display и скажу это, display flax and flex box - это на самом деле то, что вы можете просто погуглить. Хм, прямо здесь, полное Руководство по Flex Box - это действительно полезный парень, который расскажет вам, гм, но все свойства, доступные в Flex Box. Итак, видим на нашем контейнере, мы ставим Flex. И как только мы это сделаем, все эти различные свойства станут доступны, поэтому я использую это.Центр. Мне тоже очень нравится использовать гибкий бокс. Эм, вроде как сосредоточить внимание или оправдать другой контент. Итак, когда я добавляю display flex, гм, а затем я могу добавить это свойство, называемое элементами строки. Итак, это выравнивает все элементы внутри моего гибкого контейнера, и поэтому я собираюсь центрировать позицию. Итак, как только мы вернемся к нашему колодцу, вы увидите, что когда я все обновляю, это линия к центру, и вы увидите, что мои, мм, плавающие элементы подпрыгнули. И это только потому, что мы больше не собираемся использовать поплавки с гибким боксом.Эти две вещи. Мне нравится использовать черный ящик вместо плавающих вещей. Но я просто хотел показать вам, как работают поплавки. Итак, мы выравниваем элементы по центру, а затем мы можем сделать то, что называется выравниванием содержимого, и я собираюсь сделать промежуток между ними. Это в основном означает, что все, что находится внутри этого гибкого блока, мы собираемся оправдать всем пространством между ними, так что вы увидите, что это означает. Это как бы просто означает, что эти элементы согласовываются. Гм, их раздвигают, потому что все промежутки между ними - Классные.Итак, теперь у меня есть голова или я выгляжу так, как я хочу, эм, я собираюсь добавить эту небольшую базовую вещь, поэтому я собираюсь сделать нижнюю границу, и я собираюсь сделать один пиксель твердый. Я сделаю светло-серый, потому что это, наверное, ах, цвет, который может работать. Итак, у брата есть определенные встроенные цвета, но вы также можете использовать, например, шестнадцатеричные коды, которые вы, вероятно, так привыкли видеть, почему? И это было бы черным от, и вы можете просто Google должен, как я обычно нахожу их, или я просто нахожу их в моем файле эскиза.Так что это будет прямо здесь. Гм, круто. Итак, у нас светло-серый, обновляем. А теперь у нас есть маленькие разделители, так что мне это очень нравится. Я знаю, что они не стилизованы, но я думаю, что мы продолжим строить больше скелета, а затем вернемся и доработаем все наши стили. 3. Раздел героев: Хорошо, теперь мы будем работать над разделом изображений героев с этим небольшим блоком описания. Итак, я собираюсь начать. Мы собираемся нажать Enter после того, как заголовок призвал вас ввести еще раз, чтобы вы могли лучше его рассмотреть.И мы добавим тег раздела. Итак, я собираюсь разделить этот раздел на раздел и проектный раздел на раздел. Хм, и мы назовем это, Давайте назовем это классным охлаждением, ммм, здесь и затем в это Круто. Итак, возвращаясь сюда, у нас есть один блок изображения, другой блок с налогами и небольшими тегами. Итак, я собираюсь сказать, что это можно разделить на два провала, и тогда это, вероятно, также может быть 1/3 Div. Когда мы перейдем к этому, мы поговорим о немного другом позиционировании.Прохладный. Итак, первое, что я собираюсь сделать, это добавить сюда свой контейнерный класс, потому что мы все еще хотим, чтобы он был максимальным с 960 пикселями. Итак, я выхожу из своего маленького контейнерного класса, а затем я собираюсь добавить, ммм, div для, скажем, изображения. Итак, это большое изображение, которое было перемещено влево. Я назову этот классный образ героя. Итак, с интересом мы можем поместить наше изображение, ммм, и давайте посмотрим, чтобы мы знали, что оно будет в держателе изображений, и я вернусь к своим файлам и найду Plant Hero.Вот как я это называю. Итак, мы добавим растение Широ, вы платите? Потрясающие. Итак, теперь у нас есть настроенное изображение, а затем мы добавим еще одно определение, прямо под ним, и это будет день домов, это небольшое описание. Итак, я собираюсь войти и добавить класс, равный его названному герою. Просто так, вроде бы, важно дать вашим классам имя, гм, что-нибудь, что имеет смысл. Как будто я мог просто назвать их, как хотел сделать три. Но, называя героев в описании, я лучше понимаю, где они на самом деле находятся на странице.Итак, у меня есть мой маленький герой, Дэйв, а рядом с ним есть описание моего героя. Сделал Итак, давайте заглянем внутрь этого, мм так, описание. Похоже, у него есть заголовок, есть небольшой текст внутри, а также есть такие теги, где вы можете не добавлять какие-то свои навыки, я подумал, что это будет весело. Итак, в этом году описание, которое я собираюсь сделать в каждом из них, и это заголовок один. И я скажу вот что. Я просто написал описания. Я просто напишу описание.А затем, после этого, я собираюсь создать тег P, который является тегом абзаца, и поэтому он как бы используется для всех типов текста абзаца на веб-странице. Так что я думаю, что это, вероятно, хороший тег для этих двух мелочей. Итак, я просто скопирую этот текст, и мы поместим его туда, а затем мы поместим второй маленький абзац в другой тег абзаца. Хм, поэтому я просто вставил какой-то текст-заполнитель, потому что вы просто почувствуете внутри него все, что захотите. Итак, теперь у нас есть каждый маленький абзац, и я собираюсь создать еще один div для этих тегов, и я назову его. Давайте назовем этот класс навыками героя, а затем внутри этого, ммм, поскольку все они вроде как стиль такой же, я сделаю эти списки элементами, как я сделал для заголовка заголовка.Итак, давайте зайдем сюда, мы сделаем и список Norden, а затем мы сделаем список, и мы собираемся сказать Let Java script. Вы знаете, как это там, ммм. И последнее, что у нас есть. Итак, у нас есть вот этот материал, это изображение, которое у нас здесь жесткое, это описание. И тогда последний день, который у нас будет, будет твоим именем. Вот где я поставил свое имя. Мы назовем это именем, а потом посмотрите, скажите, Алекса Спейдель. Потрясающие. Так что мы вроде как только что построили этот скелет на самом деле всей этой секции, так что это было довольно быстро.Гм, мы это увидим, а потом мы посмотрим на это. Я пока закрою своего инспектора. Мы посмотрим на это здесь. Мы видим, что это изображение довольно большое. Итак, у нас есть изображение. У нас есть небольшой раздел описания, а затем у нас есть имя. Итак, теперь мы можем начать немного стилизовать раздел. Итак, у нас есть контейнер. У нас уже есть это как 9 60. И даже несмотря на то, что изображения выходят за его пределы, если мы заглянем в инспектор, мы увидим, что весь этот раздел позволяет увидеть, что мы называем героем, а затем контейнер.Размер контейнера 960 пикселей, так что похоже, что он работает правильно. Хм, сделай это немного меньше. Затем мы вернемся к нашему файлу CSS и начнем стилизовать его. Мы собираемся, Тео, подать ему эту маленькую коробку с изображениями. Я собираюсь заглянуть в свой файл скетча и вижу, что с перерывом в 6 30 пикселей на 80 пикселей. Итак, я собираюсь продолжить и скажу, что мой герой в Edge Dev, который я сделано прямо здесь. Эээ, так это изображение героя получилось. Мы собираемся поставить максимум 6 30 И это только потому, что я начинаю немного задумываться о отзывчивости, поэтому я собираюсь сказать, что это будет максимум 6 30, но это может становитесь немного меньше, если экран сжимается, и тогда мы можем сделать высоту 4 80 пикселей.Хорошо? И затем мы должны сделать то же самое, что и с изображением логотипа, чтобы организовать ваше изображение главного героя, а затем захватить это фактическое изображение внутри него. И в данном случае вы играли героями в возрасте. Давайте зададим ему высоту 100% и посмотрим, как это будет выглядеть. Потрясающие. Итак, причина, по которой я выбрал высоту 100%, заключается в том, что изображение немного короче, чем длинное. Поэтому я просто хочу убедиться, что по мере уменьшения размера экрана вы никогда не увидите пустого пространства, которое занимает изображение целиком.Вот почему я это сделал. Гм, просто глядя на это сейчас, я вижу, что изображение действительно близко к заголовку. И, как вы можете видеть в нашем макете, у нас есть небольшой промежуток между заголовком и изображениями. Итак, я собираюсь вернуться, и я думаю, что добавлю это пространство к нашему контейнеру, на самом деле, потому что таким образом мы знаем, что в каждой секции будет задержанный. Итак, если я поставлю, скажем, поле внизу Восточного Сакса, поле внизу заголовка и поле внизу, гм, этого героя, тогда у нас будет немного места.Итак, перейдем к контейнеру, и я сделаю маржу. А теперь о марже, эм, вы можете сделать маржу сверху. Можно сделать маржу снизу. Можете сделать маржу слева. Вы можете делать маржу, верно? Но вы также можете подправить поле и набрать четыре числа. Итак, 1-я 1 сверху, 2-я 1 правая. Третья 1 - нижняя, а четвертая - левая. Итак, в этом случае я скажу нулевую маржу для вершины. Еще хочу сделать авто для обеих сторон. Итак, я могу сделать средний Teoh на буксире, а затем 70 пикселей для нижней части.Так что я просто избавлюсь от этого, потому что он нам больше не нужен. Гм, и давайте посмотрим, как это выглядит. Потрясающие. Итак, теперь у нас есть немного места между разделами. Давайте посмотрим, действительно ли этот waas выглядит так, как будто в моем макете он больше похож на 60 пикселей. Так что минутное изменение должно быть 60. Плотно разгладьте его. Хорошо, круто. Итак, теперь мы увеличиваем наш раздел изображений. Гм, и посмотрите на это. Всего 7 20 Хорошо, так что наше изображение там выглядит немного большим, и это только потому, что для его образа героя мне нужно, чтобы вы поместили переполнение, а мне нужно скрыть.Это потому, что, когда я посмотрел на это, изображение выглядело немного большим, чем 603 пикселя, и я посмотрел на него, и он выглядел как 7 20 И, мм, я знаю, что у меня было Макс шесть с 6 30 И что происходило, было только что показывалось переполнение. Итак, мы поставили незамеченными, потекли скрытыми. Скажем так, и давайте посмотрим на это. Выглядит лучше. Потрясающие. Итак, теперь это 630 пикселей. Теперь мы займемся этим разделом описания, так что вернемся к ее маме. Посмотрим на это. Так что с 300 пикселей на нашей высоте 80.Итак, я перейду к описанию героя. Вот только А я бы сделал с плотностью 300 пикселей на 80 пикселей. А затем мы добавим цвет фона. Так что давайте просто возьмем это с эскиза. Вы берете это, и мы займемся фоном. Как нашлась и цифра. Так что посмотри, как это выглядит. Потрясающие. Итак, у нас есть рука того цвета, вы снова заметите, эти воздушные потоки накладываются друг на друга. Вроде как то, что мы сделали в шапке. Мы просто воспользуемся поплавками и растянем изображение нашего героя.Итак, left, а затем и float - это описание героя до последнего. Посмотрим, как это работает. Потрясающие. Еще раз, я как бы собираюсь сделать то же самое, что я сделал, мм, с заголовком, где я просматриваю плавающие предметы, а затем мои личные предпочтения льняной коробкой. Так что я заменю его на гибкий. Так что давайте пройдемся через это еще раз. Итак, мы возьмем контейнер, потому что он их держит. Верно? Итак, мы идем в раздел героев. Мы собираемся использовать контейнер, отображать гибкость, а затем, как и в заголовке, мы хотим, чтобы эти два элемента Teoh раздвинули друг от друга.Так что мы будем оправдывать контент. Мы сделаем пробел между ними и посмотрим, как это будет выглядеть. Хорошо, на самом деле у нас есть три отдельных элемента внутри нашего контейнера. Итак, у нас есть изображение, у нас есть описание. У вас также есть это маленькое имя. Итак, Тео, на самом деле просто примите во внимание изображение, а также описание. Хм, мы собираемся взять название за рамки обычного медленного. Итак, мы собираемся сделать это, взяв имя class, и скажем позицию, где она? Абсолютно.Когда вы говорите "абсолютное положение" или "фиксированное положение", это выводит эти элементы из нормального потока. Итак, как мы видели, когда мы добавляли if, как заголовок, а затем добавляли это, они как бы накладываются друг на друга. Гм, но когда мы позиционируем что-то абсолютное, оно пойдет, гм, скорее всего, оно пойдет в верхний левый угол. Так что это похоже на то, что тебя просто вырывают из нормального потока. Итак, предположим, что давайте посмотрим, что произойдет. Хорошо. Итак, у нас сейчас здесь Алексис федерал, и теперь вы можете видеть, Эм, добавив коробку для льна, Эм, сделал то, что я хотел, то есть на небольшом расстоянии между этими двумя элементами.Потому что теперь, когда это позиция, безусловно, она в основном исключена из потока, поэтому Fox Box на самом деле не рассматривает ее. Ладно, круто. Итак, давайте начнем стилизовать, эм, поле описания, а также маленькое имя. Я собираюсь услышать описание и добавить немного отступов. Посмотрим на наш макет. Похоже, у меня 70 пикселей вверху. А давайте посмотрим на это. И вроде бы 45 пикселей сбоку. Итак, мой отступ будет 70 пикселей, 45 пикселей. Итак, это еще одно небольшое сокращение.Так что вместо того, чтобы написать четыре, вы просто изнасиловали двоих. И это сверху и снизу, и это слева и справа, так что давайте сделаем. Хорошо, это круто. Итак, как вы можете видеть, когда я добавил, добавление этого поля стало намного больше. Итак, мы собираемся сделать что-нибудь наверху, пойдем сюда. Давайте сделаем это первым правилом, которое мы собираемся сделать звездой. А это значит все. И мы просто останемся коробкой, определяя размеры аварийных бордюров. По сути, это означает, что если есть Патти или есть граница, наша коробка не станет больше.Он всегда будет оставаться таким, например, для 80 и 300 пикселей. Давайте посмотрим, как это круто выглядит намного лучше. Гм, теперь внутри или описание. Мне нравится, как это выглядит. И давайте приступим к стилизации этих маленьких тегов. Итак, это был наш список, и это внутри навыков героя этого класса. Итак, я собираюсь убедиться, что я набираю навыки героя, а затем один упорядоченный список, потому что в противном случае он будет применен к списку в нашем заголовке. Так что я возьму это. Я иду, Теох, забери. Похоже, было немного отступов и полей.Я заберу пирожок. Я заберу маржу. Все выстроено немного лучше. Эм, и я собираюсь изучить навыки героя. Вы l А затем я возьму элементы списка и сделаю их фоновый цвет белым. Итак, это шестигранник для белых. А потом я позабочусь о цвете шрифта. Итак, цвет - это имя шрифта, и мы сделаем хэш с нулевым значением. Так что это черный цвет, и я собираюсь присмотреться к нему поближе. Похоже, у меня размер шрифта 12, а у меня их четыре.А из шести может получиться пять и 10. Итак, мы сделаем размер шрифта 12 пикселей, а затем добавим отступы, чтобы осталось немного места. Пять пикселей сверху и по 10 пикселей слева и справа, вот посмотрите. Потрясающие. А теперь похоже, что вам нужно добавить немного маржи. Мы собираемся вернуться. Мы собираемся сказать Арджуну. И я думаю, что мне нужно 10 пикселей сверху и снизу, и я собираюсь сделать пять пикселей слева и справа, Лоусон. На самом деле, я просто сделаю вам пять пикселей вокруг.Так выглядит немного лучше. Хорошо, отлично. Итак, теперь это в основном то, как это выглядело в макете. За исключением того, что тексту нужна скоростная дорога. Итак, мы возьмем описание героя, и я позабочусь о том, чтобы цвет текста был идеальным. Хм, а потом мы сможем немного поработать над шрифтом позже, когда мы вернемся и доработаем все элементы дизайна. Теперь давайте поработаем над этим. Алекса, он идет сюда. Это называлось именем. Мы собираемся сделать его горячим 250 на 60. Итак, мы скажем, что с 250 пикселей, ненависть в 60 пикселей, и мы сделаем так, чтобы текст был центром лжи.Получи это. А теперь цвет фона. Мы хотели черный. Итак, мы сделаем 000 и цвет нашего шрифта. Мы хотели Белый. Итак, я также собираюсь сделать гибкое отображение для этого, чтобы мое имя можно было выровнять по центру. Что-то делают в центре позиций. Еще собираюсь оправдать контент-центр. Тогда поехали. Мы получили это по центру. Ладно, круто. Теперь давайте повернем это вправо, чтобы мы могли повернуть это, используя свойство transformed, и мы можем сказать преобразовать, повернуть, а затем повернуть вправо на 90 градусов. И это как раз то, как вы это исправляете, и это должно изменить ситуацию.Хорошо, нам нужны отрицательные 90 градусов. И это должно перевернуть его сейчас, потому что это позиционируется абсолютно. Получилось немного странно. Итак, нам придется вернуться, и мы должны сказать, где это начинается и где заканчивается сейчас, так как это вращается, но обычно вы делаете верхний ноль, а вы оставляете ноль. Поэтому, когда мы помещаем, ммм, жестко и оставляем ноль, обычно это помещает его в верхний левый угол всей веб-страницы или в верхний левый угол, мм, это ближайший, относительно позиционированный родительский элемент. Так что мы как бы хотели это сделать.Так что я собираюсь расположить относительное положение на контейнере героя, и этот путь должен ах, идти прямо сюда снова. Итак, давайте перейдем к контейнеру героя и сделаем относительное положение, и они должны переместить его обратно вниз. Потрясающие. А теперь, потому что он повернут, он просто немного отклоняется. Итак, я собираюсь сказать, что вместо верхнего, ммм, нулевого человека, сделайте верхние 95 пикселей вместо левого Мюнхена. Минус 95 пикселей. Гм, и это выглядит немного лучше. Возможно, ему придется поиграться с расположением этого. Хм, но хорошо, что он всегда остается в контейнере героя.Так что, когда вы хотите изменить размер, он не будет двигаться идеально. Я думаю, что этот раздел выглядит неплохо. Гм, возможно, пора перейти к созданию нашего раздела обсуждения проекта. 4. Сетка проекта: Хорошо, давайте начнем с построения нашей сетки проекта прямо здесь. Итак, мы перейдем к каждому нашему электронному письму и, как и в случае с Hero, давайте создадим новый раздел и дадим ему имя класса. Эээ, скажем, проекты вы войдете туда и перейдете. А теперь вроде мы тоже не герои. Давайте добавим наш контейнерный класс, чтобы все Issa max с 960 пикселями, хорошо, а затем мы сделаем ди, гм, возможно, div вокруг наших фактических элементов проекта.Итак, я собираюсь создать div, и я назову этот класс, мм, сетку проекта. И внутри этого, это то место, куда мои, ммм, элементы изображения собирались идти. И поэтому я считаю, что каждый из них будет интерактивным, а затем он свяжет вас со страницей, которая выглядит так, гм, и показывает отдельный проект. Итак, чтобы сделать это, я думаю, мы собираемся создать различие со ссылкой вокруг него и изображением внутри. Звучит хорошо? Итак, внутри нашей сетки проекта давайте сделаем, мм, тив, и назовем этот класс.Мы назовем это элементом проекта, и поэтому внутри нашего элемента проекта у нас будет изображение, и это то место, куда будет помещено наше изображение. Так что это будет в нашей папке с изображениями вот так, а потом я выйду сюда, и я собираюсь поместить ссылку вокруг всего этого маленького элемента. Ну, просто вмятины, чтобы он выглядел красиво. Гм, и эта ссылка на страницу проекта, так что мы вернемся к этим. Мы создали страницы наших продуктов. Потрясающие. Итак, теперь у меня их шесть, так что я просто собираюсь скопировать их.Потрясающие. Так что посмотрим. И давайте обновим эту страницу и посмотрим, как это выглядит. Таким образом, вы можете увидеть все наши изображения в эфире здесь. Ну, кроме одного. Давайте обязательно займемся листовой зеленью. Bassem. Итак, вы видите все наши изображения. Гм, и мы должны указать заголовок для этого раздела. Итак, проекты. Итак, давайте поднимемся сюда, внутрь нашего контейнерного класса. Давай ударим и ее. Давайте сделаем это в каждом to и назовем это как вторичный заголовок. Мы назовем эти проекты так: "Это круто". А теперь займемся стилизацией зернистости.Итак, для этого я собираюсь изучить наш макет и щелкнуть элемент, и я увижу, что он имеет высоту от 300 до 70. Итак, мы перейдем к нашему CSS, и давайте создадим элемент проекта, который позволяет вам с 300 пикселей и высотой 2 70 пикселей, потрясающе и теперь похоже на то, что мы сделали со всеми нашими другими изображениями. Давайте возьмем наш элемент проекта и возьмем изображения внутри этого def. Скажем, 100%, чтобы изображение хорошо вписывалось в этот совет. Итак, давайте освежим это круто. Так что выглядит хорошо.У нас есть маленькие элементы проекта подходящего размера. А теперь давайте продолжим и немного улучшим стиль великого. Итак, мы собираемся сделать сетку проекта, и я снова буду использовать для этого гибкость. Я люблю сгибаться. Мы собираемся сказать display flex, и мы собираемся работать, поэтому позвольте мне просто показать вам. Если я скажу это и обновлю ISS, позвольте мне показать вам, что происходит. Так что посмотрите, как все наши предметы расположены рядом друг с другом. Это потому, что по умолчанию для дисплея flex находится в строке. Таким образом, он сгибает все эти элементы в ряд.Гм, и мы просто хотим сказать, что нам нужно их обернуть. Итак, мы собираемся записать Flex Rat, а затем - рэп. И это просто гарантирует, что, когда в нем закончится место, он как бы обернет предметы. Так что выглядит намного лучше. И я заметил, что они немного большие. Итак, давайте перейдем к нашему элементу проекта, и мы снова сделаем переполнение, скрытое, чтобы скрыть все, что находится за пределами области с 300 пикселями и высотой до 70. Итак, давайте обновим. Ладно, все выглядит намного лучше.Гм, а теперь я также собираюсь поиграть с гибкостью, так что я собираюсь сделать свою внутреннюю сетку своего проекта. Я оправдываю содержание. Я снова собираюсь в промежуток между ними. Таким образом, это просто вытолкнет все к краям сетки проекта и даст некоторое пространство между ними. Итак, давайте обновим. Хорошо, круто. Гм, а теперь я собираюсь дать немного отступа каждому элементу проекта, потому что я хочу, чтобы между верхом и низом оставалось пространство. Так что давайте сделаем Да, элемент проекта. Сделаем маржу 15 пикселей нуля.Так что это даст команду. Пиксели поля сверху и снизу. Смотрите, обновите. Потрясающие. Последнее, что я хочу сделать, это сделать изображения вина в каждом элементе проекта немного лучше. Так что, например, здесь не обрезана нижняя половина этого глобального кактуса. Я собираюсь сделать это снова с льном. Гм, и похоже, что мы хотели бы выровнять его по низу. Гм, похоже, что это 3-й 1 Мы могли бы также выровнять по низу, но пару мы могли бы захотеть выровнять по центру, поэтому я собираюсь сделать два класса.Я назову их нижним звеном, а второго я назову линейным центром. И для каждого из них я скажу гибкость. Ой. Мне жаль. Я скажу, что дисплей гибкий, и я скажу, э-э, позиции. Так что там вообще? Гм, гибкий конец, который в основном похож на нижний. А для центрального я собираюсь сделать отображение, согните их, сделайте центр позиций. Прохладный. Итак, я создал эти два класса, и теперь я просто собираюсь добавить их к любому из элементов проекта, которые, ммм, я хочу выровнять по центру или по нижнему краю.Большой. Итак, теперь я создал эти два класса, и я просто возьму эти классы, и я собираюсь поместить их в любой из элементов проекта. Гм, это я хочу выровнять по низу или по центру. Итак, я собираюсь вернуться в свой индекс, и я собираюсь взглянуть на этот 1-й 1, и я думаю, что этот элемент проекта был маленьким кактусом. Я хочу, чтобы центр был выровнен. И давайте проверим. Это было не так, что выглядело лучше. На самом деле это тот, который я хотел выровнять по низу. Итак, давайте сделаем это Обновить.Идеально. И мой инжир. Думаю, мне нужен центр линии. Так что сделаю линию по центру. Хм, освежитесь. Идеально. Этот Литтлфилд, я, наверное, хочу, чтобы нижняя строчка была на подкладке. Вы знаете, этот, вероятно, сосредоточился там. Тебе нравится это? Мои листья хорошо проветриваются. Гм, мой маленький кактус. Я думаю, что это, наверное, нормально. Гм, и мой маленький подковообразный краб. Я собираюсь выровнять этот центр. Это моя последняя строчка. Центр не был "Итак, теперь", это выглядит немного ближе к тому, что есть у меня в моём макете. Потрясающие. Так что этот раздел, я думаю, в значительной степени готов.Последнее, что я хочу сделать, это создать состояние наведения для каждого из этих элементов. И когда мы наведем на него курсор, я хочу, чтобы появилось маленькое название проекта. Так что, я думаю, это полезно. В противном случае вы действительно не знаете, на что нажимаете. Итак, я собираюсь перейти к каждому из наших маленьких элементов проекта здесь, и я собираюсь создать еще один мертвец, на котором будет имя этого элемента. Итак, пойдем и создали Div. Я назову это, ммм, названием проекта. Как ты думаешь, это неплохо? Итак, мы назовем эту фотографию кактуса.Я просто скопирую это и добавлю это поверх других элементов проекта. Эээ, это можно было бы назвать инжиром. Мы скопируем это. Гм, это может быть полевая фотография. Гм, это могут быть иллюстрации Клинта. Я просто придумываю случайные имена. Эээ, этот сын мог быть просто кактусом, а наш последний мог быть иллюстрацией фактора. Итак, давайте немного стилизуем их. Давайте перейдем к нашему проекту в нашем CSS и давайте сделаем имя проекта, и мы собираемся дать ему цвет, почему. Давайте скажем, как отец.Я собираюсь сделать его похожим на нашу маленькую бирку с именем. Итак, цвет белый, мы сделаем фон. Эм, давай сделаем черный. Ой, видите, здесь я написал цвет Что? Вы также можете написать белый. Обычно я делаю efs all, просто переключаю на это. Наш фон черный. Гм, давайте сделаем это положение абсолютным. Итак, я хочу, чтобы Thies как бы плавали в правом верхнем углу наших предметов. Итак, мы идем к верхнему нулю, и мы собираемся сделать правильный ноль, а затем мы также собираемся убедиться, что наш, мм, элемент проекта прямо здесь, мм, расположен относительно него, потому что я хочу, чтобы это имя было привязать к углу товарного элемента. Для этого его нужно расположить относительно.Силхет три фреш. Вот и все, выглядит красиво. Хм, не так уж и приятно. Давайте добавим к этим именам немного похлопывания. Итак, я собираюсь сделать отступы. Гм, я, вероятно, добавлю ему отступ примерно в восемь пикселей сверху. Ах, пиксели слева и справа. Да, мне это нравится. А теперь я просто создам эти состояния наведения, так что мы перейдем к названию продукта. Мы собираемся сказать «покажи девять», и это вызовет у них страх. Ага. А теперь мы собираемся сказать, что когда мы наводим курсор на элемент проекта, тогда это имя проекта может зависать.Итак, мы говорим, что когда мы наводим курсор на этот элемент проекта DIV, тогда в имени проекта должен быть отображаемый блок, чтобы он здесь заработал. Итак, давайте обновим и посмотрим. Да, похоже, это работает. Было не так. Теперь у нас есть названия наших проектов, и я думаю, мы можем начать с нижнего колонтитула. 5. Нижний колонтитул: отлично. Итак, давайте посмотрим на нижний колонтитул. Наверное, он очень похож на наш заголовок. Гм, такой же высоты на той же маленькой линии, только на этот раз сверху. И тогда у нас есть только наше имя и наш адрес электронной почты.Так что я собираюсь это сделать. Я собираюсь как в заголовке здесь. Также появился новый элемент под названием Footer. Так что мы воспользуемся этим сразу после того, как появится наш последний раздел, и скажем «Нижний колонтитул». А потом не будем забывать про наш контейнер Div, поставив ей контейнеры. Все подходящего размера. Хорошо попал. Входить. Хм, а затем я просто сделаю, вероятно, тег абзаца, и я скажу Alexa, Spectral, и давайте поставим дату, потому что я чувствую, что это обычно в нижней части веб-сайтов. И мы сделаем еще один тег абзаца, и мы поместим нашу электронную почту, э, состояние.Итак, допустим, давайте подойдем сюда и посмотрим, как это выглядит. Прохладный. Итак, теперь наш нижний колонтитул, мм, давайте его стилизуем. Мы собираемся продавать его очень похожий на наш заголовок. Мы просто возьмем нижний колонтитул и возьмем контейнер, и мы скажем, что высота 120 пикселей, и на этот раз мы сделаем границу. Один верхний пиксель сплошной. Мы сделаем светло-серый, как и для нашего заголовка. Итак, давайте обновим. Посмотрим, выглядит хорошо. Посмотрим, похоже, у нас здесь есть немного лишнего места.Это потому, что в нашем контейнере, если вы помните, мы помещаем, мм, поле в 60 пикселей внизу. Таким образом, нам это не нужно в нашем контейнере нижнего колонтитула, потому что это просто дает нам дополнительное пространство, которое мне действительно не нужно, поскольку мы уже указали ему высоту. Так что давай просто пойдем сюда. И мы скажем, что нулевая маржа снимет с этого всю маржу. Мы должны сказать, что маржа нулевой автоматически означает, что мы сохраняем левое и правое поле, чтобы оно оставалось по центру. Большой. А теперь мы просто собираемся пойти дальше и убедиться, что те, что указаны внизу, на нашем имени и адресе электронной почты, плавают рядом друг с другом, а не поверх друг друга.Так что я собираюсь сделать это с помощью flex, потому что мне нравится использовать flex. Но, скажем, внутри ее контейнера мы скажем «отображать флаги», а затем мы будем выравнивать пространство содержимого между ними, так что это подтолкнет их к краям и оставит все пространство посередине. И я также назову центр позиций, чтобы они были сосредоточены в этом, эм, нижний колонтитул, который сохранил это и обновит. Дюжина скоро закроет это, и я посмотрю, так что для меня это выглядит красиво. хороший. Я просто вернусь и, наверное, немного поправлю стиль.Итак, мы выберем шрифт и починим телефоны. Мы могли бы добавить немного дополнительных. Я не знаю. Наши отступы и поля выглядят довольно хорошо. Так что я думаю, что дальше будет просто обновление шрифта и, возможно, немного описания Div на 6. Уточнение стилей: Хорошо, давайте поработаем над завершением стиля на нашей странице. Гм, вот как это выглядит. Теперь я просто выберу шрифт и, возможно, оставлю немного места для обработки этих ссылок. Я также немного обновил это описание.Смерть? Я думаю, это все, что нужно, чтобы убедиться, что наши ссылки работают. Гм, так что давайте продолжим и сначала выберем шрифт. Итак, я предлагаю использовать телефоны Google просто потому, что их действительно легко загрузить в ваш индексный HTML. Итак, я пошел к шрифтам Gulf и нашел этот под названием Carla, который, на мой взгляд, довольно симпатичный. И поэтому я просто нажму на этот плюс прямо здесь, и я собираюсь перейти сюда, и я собираюсь настроить, потому что я хочу убедиться, что у меня выбран обычный и жирный шрифт, а затем я Вернусь к вставке и нажму.Скопируйте этот отличный линк здесь. И это то, что я собираюсь засунуть, эм, в самую глубину своей головы. Так что прямо под этой таблицей стилей ссылка все идет. Что. Так что это загрузит семейство шрифтов Carla как с обычным весельем, так и с жирным шрифтом. А потом я вернусь к фондам Google, и все будут использовать это правило для добавления моего CSS. Так что скопируйте это, и они отправятся в Macy's, и я наклею его на тело. Так что я войду. Я собираюсь схватить тело, и они скажут, семейство шрифтов, Карла. И это должно добавить семейство шрифтов Carla ко всей моей веб-странице.Вернемся сюда. Это обновление. Потрясающие. Так что это уже выглядит немного лучше. Гм, без этого там стандартно воевали. Так что давайте поработаем над этими ссылками. Гм, мы просто добавим немного места между ними, а также, возможно, состояние зависания, чтобы вы как бы поняли, что эти воздушные ссылки и я также могли бы немного уменьшить размер шрифта. Просто визуально мне это больше нравится. Итак, мы позаботимся о том, чтобы просто изменить ссылки внутри заголовка. Итак, я скажу заголовок, и мы скажем ссылки, которые находятся в этом заголовке, а затем, я думаю, у нас есть ссылки вокруг элементов нашего списка.Да, так что давайте просто ... Ну, заголовок Дио, мы сделаем это для вас, а затем просто сделаем это немного более конкретным. Итак, мы собираемся сказать размер мысли, давайте сделаем его 14 пикселей. Сделаем цвет, мм, черный. И посмотрим, что это произошло, Каса. Немного меньше, что мне нравится. Теперь давайте добавим между ними небольшой запас. Так как они выровнены по правой стороне, я не буду ставить на них правое поле. Так что я просто собираюсь поставить, потому что я хочу, чтобы они оставались на этой правой стороне. Итак, допустим маржа, мы скажем ноль для верха, ну, ноль для правого, а здесь - для низа.А потом я поставлю себе 15 пикселей. Допустим, да, я думаю, это, наверное, хорошо. Мы можем увидеть. Да, я познакомился чуть больше. Мы можем посмотреть на наш макет и увидеть, сколько пробелов между ними. О, там 40. Так что пойдем дальше. Также сделаем 40 пикселей. Ладно, круто. И я также добавлю немного состояния при наведении Брэма. Итак, мы собираемся приехать сюда. Мы собираемся сказать, заголовок вам l a. А затем наведите курсор мыши. Вот этот селектор наведения, и мы сделаем цвет. Давай, может быть, сделаем то же самое, что и у нас здесь.Я скопирую этот цвет и сделаем хэш-тег этим шестнадцатеричным кодом. Не стесняйтесь делать их любого цвета, который вам нравится. Эм, давайте обновим. Хорошо, теперь у нас есть небольшое состояние наведения на них. Идеально. Ой, мы можем вернуться к нашему индексу, и давайте убедимся, что он указывает на индексную точку html. Мне нравится Тео. Просто сделайте косую черту, чтобы я знал, что мне нужно заполнить эти длины, но давайте убедимся, что это указывает на индекс. Итак, обновите, и мы щелкнем по нему, мы просто вернемся к нашему индексу. Гм, если бы мы загружали это на настоящий сервер, если бы мы просто поставили косую черту, это вернулось бы на домашнюю страницу.Но потому что ... мы вроде как обслуживаем это на месте. Мы должны проиграть index html для работы пальцами ноги. Хорошо, а что еще мы могли сделать? Я думаю, мы могли бы сделать https-косую черту. Слэш пошел вверх, а? Я не знаю, правильный ли это сайт. Мы увидим http как последнюю косую черту. Сделаем facebook dot com. Гм так что эти ссылки эфир Риель, у тебя инстаграм. У нас проблемы и с Facebook. Большой. Так что все заработало. Эм, пойдем сюда. Меня устраивает такой размер шрифта. Я добавляю здесь немного пробела между буквами.Так что перейдем к тому стилю, который есть у нашего героя. И это наше имя. Так что я собираюсь сказать, я думаю, это просто наше имя. Мы сделаем межбуквенный интервал. Ах, давайте сделаем 0,5 пикселя и посмотрим, как это выглядит. Итак, мы идем. Небольшой промежуток между этим, Эм, а затем в этом описании, Деб, я думаю, что хочу удалить поле, мм, на этом h, и добавить небольшой промежуток между этими абзацами. Просто все разложилось чуть лучше. Итак, мы перейдем к нашему «Где это наше описание» Описание героя.Идеально. И я собираюсь перейти к описанию каждого героя, потому что это то, что у нас есть в этом теге h one, а затем в этих тегах абзаца. Итак, пойдем сюда. Один друг делает нулевую маржу, и это должно убрать часть маржи. Видите, он движется вверх, потому что у каждого из них много, ммм, слияний на высшем уровне. Я просто хочу это удалить. А потом мы разберем все еще немного и сможем описать героя. Париж. И давайте только вам на поле 40 пикселей и ноль здесь.Сделайте так, чтобы между ними было немного больше места. Вообще-то, мне это кажется довольно неплохим. Пойдем сюда. Я в порядке с этими проектами. Гм, и меня тоже устраивает нижний колонтитул. Я думаю, мы могли бы сделать нижний колонтитул 14 пикселей, чтобы он соответствовал заголовку. Итак, перейдем к нижнему колонтитулу. Сделаем нижний колонтитул. И я знаю, что мы поместили это в абзац. Ну а у вас размер шрифта? Кто на размер 14 пикселей? Посмотрим, что это выглядит. Вот так. Теперь это просто немного лучше соответствует нашему заголовку. Гм, и для нашей электронной почты мы можем сделать что-нибудь забавное.Мы можем зайти в наш индексный адрес электронной почты. Мы могли бы открыть это в электронном письме. Итак, вы знаете, когда вы нажимаете на электронное письмо, и ваше электронное письмо вроде как открывается, я обычно вижу его на своем телефоне чаще, но если я нажимаю на электронную почту, а затем появляется мое маленькое почтовое приложение с этим электронным письмом и я думаю, ты тоже можешь заниматься предметом. Итак, мы собираемся сделать. Мы сделаем это ссылкой. Так что давайте сделаем ее ярлык гнева. Давайте рассмотрим это так. А потом мы тоже сможем сказать «почта», Колин, и мы сделаем электронную почту прямо здесь. Потратьте это будет джин почта точка ком.А затем мы могли бы поставить вопросительный знак, эм, тему. И мы можем сделать орлов и сказать «привет», и мы думаем, что это еще нужно. Итак, мы сразу видим ссылку. Щелкаем по нему. О, и моя почта открылась. Да. И у нас есть эта тема. Привет. Так что это сработало. И я просто сделаю ссылку не синей. Ну, просто сделай его обычного цвета. Так что ссылку в нижнем колонтитуле внутри буквы P мы будем раскрашивать, эм, и будем делать черный цвет, который мы использовали в Сирии, и это будет держать ее в ваших строках, чтобы люди как бы понимали, что могут по ней щелкнуть.Гм, круто. Итак, это наша домашняя страница для небольшого веб-сайта с портфолио, гм, выглядит неплохо. Так что дальше будем работать над тем, чтобы сделать его отзывчивым. Так что на мобильных устройствах это выглядит так же хорошо. А затем мы начнем работать над этими небольшими отдельными страницами проектов, чтобы мы могли ссылаться на них. 7. Сделайте его адаптивным. Итак, теперь мы будем работать над тем, чтобы сделать наш сайт адаптивным, чтобы он хорошо смотрелся на планшетах и ​​мобильных устройствах. Итак, для начала, мы сделаем это с помощью медиа-запросов.Я пойду к своему инспектору. Итак, я собираюсь щелкнуть правой кнопкой мыши. Собираюсь осмотреть. И как только я здесь, вы увидите, как я начинаю, ммм, просто размер экрана в правом верхнем углу. Он покажет вам, сколько пикселей в ширину это ISS. Так что то, что мне нравится делать для этого, это просто своего рода экран правосудия, и затем я как бы остановился, когда он начал выглядеть уже не таким красивым. Итак, вы можете видеть, что здесь навигация приближается к краю. Так что я действительно найду точку, где последняя точка, где я действительно чувствую, что все выглядит хорошо.Так что продолжай немного, ммм, вроде, 10. 20. Посмотрим, 10. 20, наверное, еще где-то 10. 20. Гм, где? Думаю, это последний момент перед тем, как экран станет меньше, когда все по-прежнему выглядит нормально. Мы можем прокрутить вниз и увидеть, что их сетка все еще выглядит нормально, вы снова прокрутите вверх. Итак, я собираюсь начать свои медиа-запросы с 10,20 пикселей. Итак, что мы собираемся делать, мы собираемся перейти к концу нашего файла CSS. И я знаю, что люблю приспосабливаться. Разделите его немного, чтобы я мог видеть, где все находится.Итак, я возьму почти медиа-запросы, а затем выберу его и нажму команду для его моды. И мы просто прокомментируем это. Нет. Я просто увеличу это вдвое, и тогда я буду писать свои медиа-запросы. Итак, я приду сюда, я напишу на всех СМИ. Это говорит о том, что, как и все экраны, вы можете делать планшеты. Вы можете сделать Вы можете любить, указать, но я просто поставлю все, а затем я скажу, и я сделаю Макс, и я поставлю эти 10-20 пикселей, потому что там все доброе of был последней точкой, где все выглядело хорошо.Итак, мы собираемся войти сюда, и первое, что я заметил по мере того, как мы становимся меньше, верно, было то, что у нас, ну, вроде бы нет полей вокруг всего сайта. Итак, что я собираюсь сделать, так это войти и положить немного Пэтти, думаю, на тело, чтобы там было немного места. Итак, я имею в виду, вы ноль, а затем 20 пикселей слева и справа. Мы это увидим. Заходи сюда. Настоящее обновление. Итак, мы заметили небольшое движение на этой правой стороне, а затем вы можете увидеть, как я как бы уменьшаю его.Ширина наших контейнеров по-прежнему составляет 960 пикселей. Вот почему вы не видите прокладку с правой стороны. Так исправь, что я пойду. На самом деле я собираюсь вернуться к нашему контейнерному классу, и вместо того, чтобы говорить с 9 60, я скажу Max с 9 60, а затем я скажу с ах, 100%. Таким образом, с um нашего контейнера всегда будет 100% um, пока оно не достигнет 960 пикселей, а затем достигнет максимума. Итак, теперь, когда мы обновляемся, мы видим, что это работает. A. И мы можем видеть, что наш padding, который мы добавили к телу, появляется на этой правой стороне.Итак, следующее, что я хочу сделать, это сделать его меньше, чтобы вы могли видеть, что это небольшое описание смерти действительно становится, ммм, хлюпает, и все почти выходит из этого. Итак, чтобы это исправить, мы просто, гм, вернемся к нашему медиа-запросу. И я думаю, что собираюсь сказать описание нашего героя, потому что это то, что это за фишка. Мы назовем мужчин с разрешением 300 пикселей, потому что это то, что у нас есть. Хм, и я просто хочу убедиться, что по мере того, как мы настраиваемся, он не становится меньше, потому что я думаю, что отрезание части этого маленького изображения героя все еще в порядке, потому что это, ммм, не совсем.Это больше похоже на фон, поэтому он не выглядит плохо, когда он просто медленно настраивается, чтобы вы могли видеть, что наша верхняя часть по-прежнему выглядит довольно хорошо. И как только мы переходим к проектам, сетка по-прежнему выглядит неплохо. Однако, если я немного больше, поэтому, если у меня 898 пикселей, наша сетка немного запутается, потому что мы выравниваем пространство содержимого между ними. Таким образом, все это пространство находится между гиббами в контейнере. Итак, что я собираюсь сделать, так это взять нашу сетку проекта и сказать, что, когда экран начнет уменьшаться, мы собираемся оправдать контент с помощью свободного пространства вокруг.Таким образом, это пространство помещается слева и справа от атомов, а также от центра, а не только от центра. Так что позвольте мне сказать это, и мы можем обновить, и это выглядит немного лучше. Так что по мере того, как экран становится немного там, эм, когда их всего два, становится немного больше ровного места. Так что выглядит неплохо. Гм, примерно от 10 до 20. И так как я доволен этим, я поищу следующую точку разрыва. Я собираюсь продолжать, и я просто начну проверять, как все выглядит.Тем не менее думаю, что это выглядит неплохо, если будет немного меньше. Я все еще думаю, что это так, так что вы тоже видите сгибание? Гм, потому что у нас есть флекс-рэп в рэпе. Гм, так как для каждого элемента больше нет места, они переходят к следующей строке. Так что это действительно делает работу с отзывчивостью довольно простой. А потом мы можем продолжить. Итак, я собираюсь сказать, типа, давайте посмотрим, где-то около 5 10 пикселей действительно там, где мы видим, что мошенник начинает прыгать, а все остальное по-прежнему выглядит нормально, но я думаю, что все меньше чем это нужно будет добавить немного, ммм, некоторые другие правила, чтобы сделать его более отзывчивым.Вот где я собираюсь написать свой следующий медиа-запрос. Некоторые из тех же медиа, все и Макс с 510 пикселями. Мы выйдем сюда и начнем добавлять здесь некоторые правила. Первое, что я заметил, - это прыжки с наброска. Итак, я хочу просто настроить их так, чтобы они накладывались друг на друга, верно? Итак, мы собираемся перейти к нашему заголовку, в списке заказов и в нашем элементе списка, и мы просто скажем, дисплейный блок. Так что помните, когда мы хотим, чтобы они сели рядом. Мы отображали строковый блок, так что теперь мы просто возвращаемся.Вернувшись назад, Теох отключил свои настройки по умолчанию, которые заблокированы. Мы это увидим. И вот так. Они немного похожи друг на друга, что, на мой взгляд, выглядит намного лучше. Я также думаю, что как только мы станем более мобильными, когда он станет даже меньше 500, когда он будет больше похож на 3 75 или 4 14, у вас будет больше мобильных устройств. Эээ, этого маленького изображения на самом деле даже не будет. Так что я действительно хочу, чтобы это изображение складывалось поверх описания, и мы собираемся сделать это, войдя в контейнер нашего героя и вернемся к нему в центр нашего героя. контейнер вверху.Итак, у нас есть гибкость отображения, и у нас есть выравнивание пространства между содержимым, поэтому мы по-прежнему собираемся сохранить эту гибкость. Но вместо, ммм, строки с направлением изгиба, что по умолчанию, у нас будет столбец с направлением изгиба, и это заставит эти две вещи складываться друг над другом. Итак, если мы обновим это? Я это сказал? Итак, вы используете контейнер с точками. Мы увидим это обновление. Вот и все. Итак, теперь у нас есть изображение, расположенное поверх описания. Как видите, нам нужно кое-что обсудить.Я думаю, мы уменьшим высоту этого изображения героя до такой же высоты, как и наша маленькая табличка с именем. Так что я собираюсь подойти сюда и сказать образ героя, и я собираюсь дать ему кайф. Я думаю, что это было 250 пикселей, что выглядит правильно. Посмотри, свеж ли ты. Вот так. И теперь вы можете видеть, что, поскольку наше изображение имеет высоту 100%, при этом оно обрезается. Так что я просто пойду и откорректирую то, как он находится в контейнере. Итак, изображение героя и изображение внутри этого div мы скажем: «Вот и все».Это работает. Так что наш образ был слишком большим. Итак, я собираюсь сделать 200% и убедиться, что это хорошо выглядит, чтобы мы имели дело с этим описанием, и мы собираемся сделать описание героя. Мы пойдем туда и сделаем это на 100%, чтобы он заполнил все необходимое пространство, чтобы посмотреть, как это выглядит. Так выглядит лучше. И тогда у нас есть высота ступеньки. И поэтому я просто хочу убедиться, что максимум автоматический, а не 4 60, как это было, потому что он выглядит немного длинным, поэтому мы увидим это обновление.Так выглядит намного лучше. Хм, я также собираюсь убедиться, что отступ внутри этого описания более ровный, потому что теперь он доступен на мобильных устройствах. Итак, вы похлопываете 50 пикселей, которые просто занимают немного места сверху и снизу. Гм, так он немного меньше из-за мобильных устройств. Итак, теперь наш раздел героев выглядит довольно хорошо. Гм, наши проекты тоже выглядят неплохо. Я покажу вам, как это выглядит на мобильном телефоне. Итак, если я нажму на эту кнопку прямо здесь, мы получим мобильный сайт, и вы увидите, что он сделал что-то действительно странное.Когда мы нажимали на мобильный, он вернулся, в основном, на сайт для настольных компьютеров. И это потому, что в нашей голове чего-то не хватает. Итак, мы перейдем к нашему index dot html и добавим еще один метатег. Потрясающие. И мы собираемся сказать это название группам, и мы собираемся сохранить ваш порт. Это говорит о том, что мы говорим о порте V, и мы собираемся сказать, что контент равен, а затем мы собираемся сделать с равным устройством с. Итак, в основном это просто говорит о том, что наши мобильные браузеры Teoh вычисляют с фактическим с устройством, а не просто делают это, гм, типа, 100%.А потом мы также скажем: «Ой». Мы скажем, что начальный масштаб равен единице, и закроем наши маленькие цитаты. И это то, о чем, честно говоря, вам и не нужно помнить. Вероятно, это одна из тех вещей, которые вы собираетесь гуглить, а затем копировать и вставлять, ммм, или много раз, если вы используете Google как шаблонный код для HTML, например, структуру скелета, это будет включено в него. Так что вы не слишком беспокоитесь о том, как запомнить это страдание здесь. А затем, когда мы обновимся, мы должны увидеть, что теперь он действует так, как мы думаем, что он должен действовать на мобильных устройствах.Итак, он следит за этими медиа-запросами. Гм, мы также можем видеть, что наш имидж все еще выглядит немного странно. Так что мы пойдем дальше, и я снова поменяю авто с носком. Таким образом, наше изображение по умолчанию имеет свой обычный размер, а затем я просто перейду внутрь нашего изображения главного героя. На самом деле, я собираюсь сказать «отображать флаги», и я просто собираюсь использовать это, чтобы как бы позиционировать это изображение внутри него. Так что я скажу по позициям и посмотрю, закончится ли lex как-то исправлением. Итак, мы узнаем, что у нас это как гигантский лист.Мы знаем, что наши изображения, идущие через Teoh, заполняют оба пространства контейнера. Независимо от того, меньше ли телефон или немного больше, если мы вернемся к этому, у нас все еще будет полное изображение внутри этого. Итак, вернемся к телефону. Давайте посмотрим, как хорошо выглядят все ищущие проекты. Последнее, что я хочу сделать на мобильных устройствах, чтобы немного упростить это, - это просто избавиться от состояния зависания, которое у нас есть, поскольку на телефонах нет состояния зависания. Мы просто позаботимся о том, чтобы названия наших проектов всегда были видны.И мы просто скажем этот блок отображения. Ой. Вот так. Мы должны обновить. И еще есть названия наших проектов, и я думаю, все остальное выглядит неплохо на мобильных устройствах. Гм, или описание все настроено так же, как наше имя и наше, ммм, теперь далеко. Так что да, поехали. 8. Страница проекта: Итак, теперь, когда наша домашняя страница полностью построена и адаптируется, мы продолжим работу и начнем работу над нашей отдельной страницей проекта. Так что я думаю, что самый простой способ сделать это - перейти в наш следующий HTML-код.И я просто скопирую этот код, и я собираюсь открыть новый файл, и я собираюсь вставить его сюда, и я просто скажу это как одно из названий проекта. Итак, я просто скажу, что это кактус, что каждая команда уходит, когда я сохраняю это в правиле папки, прямо там, где индексы, и мы просто нажмем «Сохранить». И поэтому мы собираемся повторно использовать этот код. Так что есть пара вещей, которые я могу оставить здесь. Итак, я все еще собираюсь связать с нашей ячейкой этот CSS. Поскольку эта страница довольно проста, я, вероятно, собираюсь поместить все наши стили в один файл.Обычно я бы разбил их на разные южные листы, но для этого не нужно много CSS. Я просто оставлю это на том же самом. Эм, я тоже буду использовать ту же мысль. Таким образом, практически все, что находится в голове, может оставаться на сцене, и мы также собираемся сохранить заголовок, потому что мы этого хотим, как мы видим в нашем макете. У нас есть заголовок и нижние колонтитулы. Мы собираемся сохранить верхний колонтитул в нижнем колонтитуле. Единственное, что действительно собиралось изменить наши эти разделы. Итак, я собираюсь продолжить и удалить разделы, но у нас все еще есть голова и нижний колонтитул.Итак, мы собираемся сказать это, и мы откроем кактус этот HTML в идеале. Итак, вот наш верхний и нижний колонтитулы. Теперь давайте посмотрим на макет, и мы собираемся сразу приступить к его созданию. Так что я пойду сюда. Я собираюсь создать раздел, который мы назовем этим. Мы можем назвать эту функцию изображением, и я создам провал, и мы по-прежнему хотим, чтобы все было 9 60 Итак, мы дадим имя контейнеру класса, как мы делали раньше. И внутри этого контейнера нам действительно нужно изображение, и мы войдем в наш держатель изображений, как и раньше, и найдем это изображение.И я называю это растительное существо, поэтому я не могу показать его, и давайте посмотрим, как это выглядит. Большой. Итак, теперь мы можем перейти к нашему макету, так что 9 60 на 4 80 Итак, я собираюсь войти в свой CSS и на самом деле выхожу из раздела Teoh так же, как то, что я сделал для моего медиа-изящества, и просто нажимаю команду, косую черту. . Итак, это мой платный CSS проект. Вы также можете переместить его в отдельный файл CSS, если хотите вызвать, как говорит проект на CNN, но тогда просто не забудьте связать его в заголовке вашего HTML-документа.Итак, я собираюсь зайти сюда, и я собираюсь захватить свое представленное изображение и изображение. И я просто сделаю эту высоту 4 80 пикселей. Да, на самом деле, я собираюсь создать контейнер, так как у нас есть только, ммм, изображение в этом разделе, которое я собираюсь возиться с контейнером div, потому что, мм, это единственное, что хранит это изображение, а затем мы должны сделать наше переполнение. Затем мы должны убедиться, что это хорошо спрятано. А затем я снова собираюсь использовать Flex, чтобы центрировать этот гибкий экран So display и центр позиции.Вот так. Потрясающие. Так что наш будущий ущерб выглядит неплохо. Давайте перейдем к этому разделу и познакомимся с заголовком, небольшим описанием и двумя дополнительными изображениями. Итак, мы перейдем к нашему HTML, сделаем вам раздел и дадим этот восьмой класс. Ах, давайте вынесем проект на голосование. Мы хотим добавить наш контейнер div. А потом посмотрим на ее рот. Нам нужен титул. Так что я собираюсь поставить Джету. Могу ли я иметь в виду правильное название? И еще нам нужен небольшой абзац с этим описанием. Text Perfect.Итак, давайте посмотрим, как это выглядит. Большой. И вы можете видеть, что у нашего контейнера def есть то же свойство. Так что между элементами все еще есть хороший запас. Выглядит все чисто, наше название или описание. А теперь давайте добавим слишком маленьких изображений. Итак, я собираюсь поместить эти изображения в кубики, чтобы я мог установить ширину и высоту для тех, которые у них одинаковые, потому что у меня просто, вероятно, разные ширина и высота. И мы собираемся называть этот класс проекта изображениями и никогда не использовали изображение внутри него.Посмотрим на это. Та же тропическая зелень была в порядке. И этим маленьким спасибо. Большой. Это обновление. И мы, вероятно, собираемся использовать гибкость, чтобы стилизовать этих парней. Я посмотрю на мою ширину и высоту 70 на три. 20. Похоже на ширину и высоту. Так и сделали мои изображения проекта. Я собираюсь сказать изображения проекта, а затем бабки. Так как я не давал им урока, я просто скажу "фишка" в изображениях проекта, и это будет то и другое. Итак, мы сделаем то, что было, снова для 70 и высоты 3 20 И мы сделаем переполнение, скрытое.Большой. И теперь изображение нашего проекта было идеальным кузеном, ммм, и я, вероятно, просто добавлю немного запаса для изображений нашего проекта, если так, чтобы между ними было немного места. Итак, давайте продолжим, и вы сделаете маржу 40 пикселей, а затем ноль. Вот и все. Теперь у нас есть небольшая пауза между текстом и изображениями. Хорошо. Потрясающие. Итак, теперь давайте продолжим и добавим ту маленькую кнопку, которую мы видели. Так и были внешние изображения наших продуктов и друг друга. И мы назовем этот, эм, проект обратно, потому что это была она, но она вернулась, и мы говорим назад к продуктам, и давайте сделаем это ссылкой, и она должна вернуться к нашей индексной точке html. И давайте переместим этот тег гнева вокруг этого.И теперь, если мы снова нажмем кнопку Vario, все заработает. Итак, начнем с этого немного. Мы назвали этот проект, и я думаю, он мне нужен. Те же размеры маленькие. Имена у нас до 50, и наша высота 60 пикселей, фон черный, а цвет текста белый. Идеально. И теперь у нас есть Теох. Мы должны стилизовать эту ссылку. Итак, я скажу, что проект из a и текстовое объявление нет. И это избавило нас от нашей основы. Теперь я собираюсь дать этому гибкость, чтобы все выстроенные в линию отправили ей и только мой контент-центр.Большой. Итак, теперь все выглядит так, как в макете. Думаю, я просто сделаю этот текст немного меньше, и это должно быть последнее, что я сделаю. Итак, размер шрифта 14 пикселей. Идеально. И вот так. Таким образом, эта ссылка работает хорошо, а все остальное выглядит так же, как в макете. Теперь давайте просто поработаем над тем, чтобы сделать это немного, ммм, отзывчивым. 9. Сделайте отзывчивым: Страница проекта: Хорошо, отлично. Итак, давайте начнем делать это немного более отзывчивым. Итак, я собираюсь войти сюда и, вероятно, буду использовать те же, ммм, точки останова медиа-запроса, которые мы использовали для домашней страницы.Хм, и я собираюсь Что я собираюсь сделать, на самом деле, я собираюсь убедиться, что этот код страницы проекта находится перед медиа-запросами, потому что в противном случае, когда мы писали внутри одних и тех же медиа-запросов, обычный код перезапишет его, а мы этого не хотим. Цитировать. Итак, это будет здесь. А давайте раскроем его фактор и посмотрим, что нам нужно изменить. Итак, когда мы спустимся вниз, вы увидите, что они слышали об имидже, честно говоря, симпатичным. Ладно, ну, где тебе действительно нужно. Работа ведется над этими небольшими дополнительными изображениями.Так что я иду, Теох, возьми это. Итак, это изображения изображений проекта. Правильно. Итак, как только мы перейдем к 10. 20, что примерно там, я просто сделаю их немного меньше, чтобы они лучше подходили, пока не дойдет до 500 пикселей. Итак, я пойду сюда, и мы сделаем изображения проекта и фишки, и давайте дадим им примерно 48%, они занимают приличное количество, например, пол-миллиметра пространства или небольшой запас между ними. А затем давайте также изменим их высоту, чтобы по мере их уменьшения пропорции не выглядели слишком странно.Давайте попробуем 300. Давайте сделаем изгиб дисплея, который ослабит центральные элементы. Гм, просто хорошее содержание в ее строке. Я не отправлял ее, и это должно быть в центре изображения немного лучше. И затем я также хочу убедиться, что наш проект с изображениями, фактическое изображение, я бы позаботился о том, чтобы он охватывал все, по мере того, как он становится меньше. Что-то делают высотой 100%. И посмотрим, как это выглядит. О, я не освежился. Вот и все. Итак, теперь вы можете видеть, как я настраиваю их, они выглядят немного лучше, пока мы не дойдем до 500.Я бы сказал, что эти изображения по-прежнему хороши на уровне 500. Все в порядке. Считается, что набиты по-прежнему делают то же самое, что и раньше. Наша домашняя страница, и это хорошо. Так что теперь, когда у нас 500 человек, я думаю, что последнее, чем я действительно хочу заниматься, - это в нашем проекте, в самых соках. Я хочу сделать столбец направления изгиба так, чтобы они время от времени накладывались друг на друга. Мы также позаботимся о том, чтобы эти вещи, которые мы только что написали, немного отличаются. Итак, я собираюсь сделать 100%, и мы можем сохранить высоту 300 пикселей, я думаю.И тогда дисплей Flex просто-напросто должен работать еще в море. ОК, круто. Так что теперь они плавают друг над другом, и я просто изменю еще пару вещей, чтобы они выглядели лучше. Изображения проекта, изображение. Теперь мы собираемся установить ширину на 100%, а высоту - автоматически. А затем внутри нашей фишки мы добавим немного маржи. Итак, маржа 20 пикселей ноль или давайте попробуем 10 пикселей. Итак, мы идем. Потрясающие. Итак, вот наши фотографии, и я думаю, они выглядят неплохо там, где они были на мобильных устройствах.Гм, возможно, мы хотим сделать только одного героя. Давайте, эм, возьмем наше Как мы называем это избранное изображение? Гм, и самый высокий 4 80, который немного высок для чего-то на мобильном телефоне. Итак, в моем максимуме, с 5 10, я собираюсь войти сюда, и я просто собираюсь изменить высоту, чтобы быть примерно 300. Начинаем. Так выглядит намного лучше, не так ли? Занимает много места, и я думаю, что мне это очень нравится. Прохладный. Итак, теперь мы можем зайти в наш индекс точки html, и мы действительно можем связать эту страницу.Итак, давайте перейдем к нашему первому проекту, например, и мы просто свяжем его каждый кактус Teoh, вы знаете, и с тремя новыми, которые включены, Давайте уйдем отсюда и пойдем сюда, и давайте вернемся на нашу страницу назад к проектам. А потом попробуем нажать на это. Потрясающие. Итак, теперь мы связались друг с другом. Итак, теперь вы, ребята, можете сделать копию этого HTML-кода cactus dot и создать шесть разных страниц для ссылки на наш небольшой проект. Отлично здесь. И просто поместите ссылки в свой html, и тогда все будет готово. Итак, теперь я покажу вам, как на самом деле выгрузить файлы на сервер.Не было

В чем разница между сайтами, написанными вручную, и WordPress?

Для разработчиков

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

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

Запуск мобильного сначала

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

Вся идея состоит в том, чтобы структурировать ваш HTML и CSS в первую очередь с учетом мобильного телефона.Когда у вас будет готовый HTML-код, откройте его в браузере, проверьте элемент и выберите параметр экрана iPhone 5SE. Это самый маленький мобильный экран размером 320 пикселей в ширину. Это будет ваш холст вместо широко открытого рабочего стола. Это будет последним! Здесь мы сначала запускаем мобильные устройства, и вот здесь все начинается. Мне нравится увеличивать масштаб до 75%, чтобы он не был таким уж маленьким. Это размер экрана, под который вы будете писать CSS. Запросы мультимедиа не требуются. Просто напишите код, который умещает все в этом размере экрана.Это начало программирования для мобильных устройств!

Сначала структурирование CSS для мобильных устройств

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

  • 400px - большие телефоны
  • 568px - горизонтальная мобильная
  • 768px - Планшет
  • 1024px - Маленький настольный компьютер (ноутбуки)
  • 1300px - обычный рабочий стол
  • И любая другая точка останова, которая может потребоваться для остальной части вашего дизайна

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

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

Это ваш новый рабочий экран. Начало вашей таблицы css будет начинаться с кода, чтобы ваш контент соответствовал этим границам.Вот почему его называют «сначала мобильные». Для настольных компьютеров мы должны кодировать, начиная с ширины 1500 пикселей, а затем сжимая. Это старый способ делать что-то, и вам следует избегать его, где только возможно.

Настройка медиа-запросов

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

Прежде всего, в этом прелесть мобильных устройств. Вместо того, чтобы начинать с размера рабочего стола и сжимать все или переписывать некоторые части по мере того, как вы становитесь меньше, вы начинаете с малого и добавляете к нему шаг за шагом, опираясь на код, который вы написали ранее, вместо того, чтобы разбирать его. Это идеально сочетается с адаптивным дизайном, потому что проще заставить вещи врастать в свои контейнеры, а не набивать их и сжимать.Таким образом, мы должны достичь 100% адаптивного дизайна с меньшим объемом работы, меньшим количеством ошибок и меньшей головной болью. Вот почему я заговорил о мобильных в первую очередь «в первую очередь». Когда это делается таким образом, адаптивный дизайн становится намного проще. Итак, давайте посмотрим, КАК мы можем сделать их отзывчивыми, не прилагая особых усилий и не имея 50 медиа-запросов.

Как создавать адаптивные веб-сайты

Когда вы пытаетесь создать адаптивный веб-сайт, важно сначала разобрать структуру html и использовать семантический html.Я использую одну и ту же структуру для всех своих сайтов, которая состоит в том, чтобы разбить дизайн на разделы, каждый из которых находится в своем собственном теге раздела, внутри которого есть свой собственный div .container, а внутри него есть контент. Вот так:

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

Настройка ваших контейнеров

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

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

На этом изображении, когда мы наводим курсор на контейнер в инспекторе, мы видим зеленые полосы справа и слева.Это твоя набивка.

Поэтому, если вы хотите быть по-настоящему отзывчивым, установите максимальную ширину вашего контейнера на 1000 пикселей, что будет идеальным размером, когда вы дойдете до раздела размера 1024 пикселей вашего CSS. Затем, когда вы подниметесь выше, вы можете изменить максимальную ширину на все, что нужно для разных разделов. Не существует «единой ширины, чтобы управлять ими всеми», все полностью зависит от вашего дизайна и может быть разным для нескольких разделов и размеров медиа-запросов.Это нормально!

В целом, это базовый шаблон, к которому вам нужно привыкнуть, чтобы начать использовать адаптивный дизайн для мобильных устройств на своих веб-сайтах. У вас есть раздел с классом контейнера внутри и содержимое раздела внутри этого контейнера. Контейнер установлен на 100% ширину и максимальную ширину, при которой вы хотите, чтобы он перестал увеличиваться, а margin auto будет держать его в центре, в то время как отступ слева и справа не даст содержимому касаться краев экрана.Это основной строительный блок адаптивного дизайна и метод, в котором вы будете МНОГОЕ использовать, поэтому важно действительно закрепить этот паттерн в мышечной памяти. Вы также можете установить свой контент на ширину: 100%, чтобы он мог расти вместе с размером своего контейнера. Просто не забудьте проверить дизайн страницы, когда вы увеличиваете ширину экрана, и посмотрите, какой раздел прерывается или выглядит не так, и установите конкретный медиа-запрос для его таргетинга.

Как спланировать свой HTML-код для мобильных устройств

А теперь самое интересное! Когда вам предоставляется дизайн для настольного компьютера, как вы структурируете свой html для наилучшего перехода с мобильного устройства на компьютер? Первое, что вам нужно сделать, это проанализировать каждый РАЗДЕЛ индивидуально и разбить дизайн на контейнеры и части внутри них.Вот пример дизайна с моего сайта:

Порядок укладки в html

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

Когда я это вижу, я сначала вижу элементы уровня блока, которые могут находиться на отдельной строке, и рядом с ними никого нет, например заголовок и абзац.Я могу настроить их на display: block и text-align: center. Это будет центрировать их с контейнером или без него, отлично! Но группа графики выглядит так, как будто она ДОЛЖНА находиться в отдельном контейнере, поэтому мы можем использовать Flexbox для работы с ними и центрирования их. Таким образом, этот раздел выглядит так, как будто нам просто нужен один контейнерный div, чтобы сгруппировать графику вместе, чтобы их можно было расположить, два других могут быть просто элементами уровня блока и будут отлично масштабироваться при переходе от мобильного устройства к настольному, потому что они по существу будут в одни и те же точки ведут себя точно так же.

Теперь перейдем к группе из трех мини-«карточек», центрированных по горизонтали. Поскольку они расположены рядом друг с другом, мы не можем сделать их все блочными, поскольку они должны быть в одной строке вместе (display: inline-block), а не сами по себе. Таким образом, мы можем добавить вокруг них div с классом «оболочки», чтобы мы могли расположить их внутри этого контейнера, не затрагивая остальную часть раздела над ним. И внутри этого контейнера похоже, что у каждой «карты» тоже должен быть контейнер, давайте назовем его «элементом», и каждый элемент внутри этого контейнера может быть элементами уровня блока, поскольку все они находятся в отдельной строке сами по себе.Похоже, здесь мы можем перестать добавлять контейнеры.

Я знаю, что это очень много для текста, поэтому вот график, показывающий, как мы визуально сгруппировали все вместе, чтобы спланировать их расположение и расположение css:

Вот как должна выглядеть мобильная версия с заданной структурой html и естественным расположением элементов html:

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

Вы также заметите использование aria-hidden = "true", это атрибут Aria, который сообщает программам чтения с экрана игнорировать этот элемент, поскольку он не важен.Мы используем это для всего, что используется исключительно для дизайна и не имеет значения для понимания содержания сайта. Таким образом, в основном все значки будут иметь этот атрибут, поскольку они предназначены только для галочки и ничего не добавляют читателям к пониманию того, что они читают. Чтобы узнать больше о доступности в Интернете и использовании правильных атрибутов Aria, посетите www.w3.org, чтобы узнать о них и о том, когда их использовать. Это то, что вам нужно будет много использовать при написании вашего html. Всегда имейте в виду!

Так что, если бы мы сначала написали код для этого мобильного телефона, мы бы начали сверху.Я собираюсь использовать старый способ центрирования контента без Flexbox на этом, чтобы показать другой способ делать что-то. Если у вас есть элементы inline-block внутри контейнера, если вы добавите text-align: center в контейнер, все встроенные блоки теперь будут центрированы внутри контейнера. vertical-align: middle центрирует элементы inline-block по вертикали внутри их контейнеров. Это аккуратное маленькое свойство, которым я пользовался время от времени.

Что касается css о том, как вы расположите и центрируете 3 карты, я настоятельно рекомендую изучить, как использовать flexbox из Flexbox Froggy, и попрактиковаться в его использовании.Я не буду вдаваться в подробности о flexbox, потому что эта статья уже достаточно длинная ... Но чтобы сделать это без Flexbox, используйте ту же технику inline-block, которую я использовал для изображений. Он будет делать ту же работу.

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

Класс .item на мобильном телефоне:

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

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

Ultimate Web Developer Course: создание 10 веб-сайтов с нуля

Карта исходного кода
Раздел 1. Узнайте, как создавать веб-сайты
Введение в курс 00:00:00
Как пользоваться этим курсом 00:00:00
Ресурсы для курса 00:00:00
Интернет-ресурсы для курса 00:00:00
Получение веб-сайта 00:00:00
Что такое HTML, CSS и JavaScript 00:00:00
Список ресурсов 00:00:00
Раздел 2. Основы HTML для создания веб-сайтов
Введение в изучение HTML 00:00:00
Основы HTML 00:00:00
Как создать простой шаблон HTML 00:00:00
Базовый HTML-шаблон Исходный код 00:00:00
Заголовки, абзацы и разрывы строк Структурирование содержимого 00:00:00
Добавление изображений в HTML 00:00:00
Упорядоченные списки Неупорядоченные списки 00:00:00
Гиперссылки, относительные пути и абсолютные пути 00:00:00
Divs And Spans, Tel и Mailto 00:00:00
Семантические элементы HTML5 00:00:00
Перенести содержимое сборки в редактор 00:00:00
Пример базовой структуры HTML-страницы 00:00:00
Как создавать HTML-формы 00:00:00
Типы ввода HTML5 00:00:00
Дополнительные элементы формы 00:00:00
Ресурсы формы 00:00:00
HTML Заключение 00:00:00
Раздел 3. Основы CSS для создания веб-сайтов
Введение в CSS 00:00:00
CSS Выбор элементов из HTML 00:00:00
Работа с цветами CSS 00:00:00
Параметры фона CSS 00:00:00
Добавление шрифтов 00:00:00
Псевдоклассы и шаблоны проектирования 00:00:00
Использование свойства Float 00:00:00
Поля для боксовых моделей 00:00:00
Сокращение набивки для модели бокса 00:00:00
CSS для создания панели навигации 00:00:00
Свойства отображения CSS 00:00:00
Обработка переполнения CSS 00:00:00
Элементы позиционирования CSS 00:00:00
Настройки и обновления CSS 00:00:00
Медиа-запросы Повышение адаптивности вашего веб-сайта 00:00:00
HTML CSS Сводка 00:00:00
Исходный код HTML и CSS 00:00:00
Заключение CSS 00:00:00
Раздел 4. Быстрый JavaScript для создания веб-сайтов
Введение в JavaScript Обзор 00:00:00
Что такое JavaScript 00:00:00
Как добавить JavaScript на веб-страницы 00:00:00
Основы инструментов разработки на JavaScript - комментарии и многое другое 00:00:00
Введение в переменные в JavaScript 00:00:00
Общие сведения о переменных 00:00:00
Исходный код переменных 00:00:00
Массивы и объекты 00:00:00
Работа с массивами и объектами 00:00:00
Использование и обновление значений массива 00:00:00
Исходный код массива и объекта 00:00:00
Введение в функции 00:00:00
Локальные глобальные переменные в функциях 00:00:00
Функции исходного кода 00:00:00
Тройное сравнение 00:00:00
Условные утверждения 00:00:00
Операторы переключения 00:00:00
Исходный код Условия Заявления 00:00:00
Введение в зацикливание 00:00:00
JavaScript для циклов 00:00:00
Циклы исходного кода 00:00:00
Введение в объектную модель документа 00:00:00
Доступ к элементам страницы из JavaScript 00:00:00
Выбор элементов с помощью JavaScript 00:00:00
Выбор исходного кода 00:00:00
Обновление CSS с помощью JavaScript 00:00:00
Исходный код CSS 00:00:00
События JavaScript 00:00:00
Слушатели событий, выбирающие элементы 00:00:00
Слушатели исходного кода 00:00:00
addEventListener Параметры триггера дополнительных событий 00:00:00
Исходный код addEventListener 00:00:00
Что можно делать с помощью JavaScript 00:00:00
Обзор JavaScript Заключение 00:00:00
Раздел 5. Быстрый jQuery для создания веб-сайтов
Введение в использование jQuery 00:00:00
Что такое jQuery и почему мы его используем 00:00:00
Начало работы с jQuery 00:00:00
Селекторы jQuery 00:00:00
Каждое значение из нескольких элементов селектора 00:00:00
Обновление элементов с помощью jQuery 00:00:00
Селекторы исходного кода HTML 00:00:00
Селекторы CSS и селекторы jQuery 00:00:00
Введение в привязку событий 00:00:00
Слушатели событий jQuery Mouse Events 00:00:00
Исходный код события 00:00:00
Триггеры событий клавиатуры 00:00:00
Исходный код событий клавиатуры 00:00:00
Слушатели событий изменения размера и прокрутки в оконном объекте 00:00:00
Исходный код объекта Windows 00:00:00
Поиск входных значений из формы jQuery 00:00:00
Элементы обхода jQuery 00:00:00
Выбрать элементы из содержимого HTML 00:00:00
Выбор исходного кода 00:00:00
jQuery, работающий с CSS 00:00:00
Исходный код CSS 00:00:00
Скрыть и показать разделы страницы 00:00:00
Затухание эффектов jQuery 00:00:00
Исходный код jQuery Effects 00:00:00
Эффекты скольжения jQuery 00:00:00
Анимация jQuery 00:00:00
Исходный код 00:00:00
Простота создания jQuery AJAX JSON и многое другое 00:00:00
Загрузка данных в HTML с помощью jQuery 00:00:00
jQuery AJAX Получить getJSON 00:00:00
AJAX с jQuery 00:00:00
Исходный код 00:00:00
Заключение jQuery 00:00:00
Ресурсы jQuery 00:00:00
Использование карты и каждого из них в jQuery 00:00:00
и каждая 00:00:00
Раздел 6. Что такое Bootstrap
Введение в использование Bootstrap 00:00:00
Что такое Bootstrap и как его использовать 00:00:00
Контейнеры начальной загрузки 00:00:00
Базовый шаблон начальной загрузки 00:00:00
Сеточная система начальной загрузки 00:00:00
Grid System Исходный код 00:00:00
Как практиковаться и изучать сетку Bootstrap 00:00:00
Контейнеры начальной загрузки Jumbotron 00:00:00
Bootstrap Типографика 00:00:00
Удивительные параметры стиля Bootstrap Table 00:00:00
Источник таблицы начальной загрузки 00:00:00
Входные данные формы начальной загрузки 00:00:00
Варианты кнопок с начальной загрузкой 00:00:00
Исходный код кнопки 00:00:00
Параметры типографики 00:00:00
Образы и согласования начальной загрузки 00:00:00
Исходный код изображений 00:00:00
Оповещения начальной загрузки 00:00:00
Bootstrap Navbar 00:00:00
Адаптивный бутстрап панели навигации 00:00:00
Начальная загрузка исходного кода NavBar 00:00:00
Слайдер изображений карусели с начальной загрузкой 00:00:00
Индикаторы карусели начальной загрузки 00:00:00
Исходный код карусели 00:00:00
Создание модального окна внутри Bootstrap 00:00:00
Создание модального завершения 00:00:00
Модальный исходный код 00:00:00
Утилиты Bootstrap 00:00:00
Исходный код, служебные классы начальной загрузки 00:00:00
Ресурсы для вывода Bootstrap 00:00:00
Ресурсы начальной загрузки 00:00:00
Заключение к разделу начальной загрузки 00:00:00
Bootstrap 4 Beta Update 00:00:00
Раздел 7. Быстрое создание простого веб-сайта с использованием HTML и CSS
Веб-сайт 1 Введение 00:00:00
HTML и каркас 00:00:00
Построить HTML-структуру 00:00:00
Исходный код HTML-структуры 00:00:00
Добавить содержимое заполнителя 00:00:00
Добавить стиль в структуру HTML 00:00:00
Как превратить неупорядоченный список в панель навигации 00:00:00
Исходный код Navbar 00:00:00
Размеры экрана мультимедиа: сделайте его адаптивным 00:00:00
Адаптивные столбцы 00:00:00
Очистить плавающее перемещение вокруг секций 00:00:00
Google Шрифты и их настройка 00:00:00
Исходный код HTML 00:00:00
Код курса CSS 00:00:00
Веб-сайт 1 Заключение 00:00:00
Раздел 8. Создание одностраничного адаптивного веб-сайта
Введение Веб-сайт 2 00:00:00
Создание каркаса веб-сайта 00:00:00
Создание структуры HTML-страницы при подготовке к стилизации 00:00:00
Создать меню навигации и содержимое страницы 00:00:00
Создание HTML-тегов с вложением семантических элементов 00:00:00
Добавление стиля к вашей веб-странице 00:00:00
Ссылки на библиотеки Google Fonts и др. 00:00:00
Стилизация раздела липких заголовков 00:00:00
Создайте панель навигации с помощью CSS 00:00:00
Добавить фоновые изображения 00:00:00
Текст раздела rgba 00:00:00
CSS-медиа для адаптивного веб-дизайна 00:00:00
Обновить меню, чтобы реагировать на изменение размера 00:00:00
Введение в JavaScript и jQuery 00:00:00
Добавить события кликов: создание взаимодействия для пользователей 00:00:00
Использование jQuery для получения пиксельной позиции элементов HTML 00:00:00
Динамическая прокрутка веб-страницы 00:00:00
Скрыть меню при нажатии на маленьком экране 00:00:00
Окончательное исправление проблем Завершено Веб-сайт 00:00:00
Исходный код Одностраничный веб-сайт HTML 00:00:00
Исходный код Одностраничный веб-сайт CSS 00:00:00
Сайт заключения 2 00:00:00
Раздел 9 - Шаблон начальной загрузки с нуля
Веб-сайт 3 Bootstrap Введение 00:00:00
Структура веб-сайта 00:00:00
Добавить стиль к разделам 00:00:00
Создание меню навигации 00:00:00
Навигационная панель с простой загрузкой 00:00:00
Добавление кнопок к элементам 00:00:00
Изображения строк и столбцов сделаны адаптивными 00:00:00
Контактная форма с использованием Bootstrap для укладки 00:00:00
Добавить фоновые изображения 00:00:00
Эффект прокрутки jQuery 00:00:00
Добавление модальных окон 00:00:00
Сводка 00:00:00
Веб-сайт 3 Заключение 00:00:00
Раздел 10. Адаптивный шаблон веб-сайта
Веб-сайт 4 Введение: адаптивные панели навигации 00:00:00
Каркасный план веб-сайта 00:00:00
Построить макет структуры HTML 00:00:00
Исходный код HTML-структуры 00:00:00
Плавающие элементы 00:00:00
Обновить элементы заголовка 00:00:00
Построить навигационное меню CSS 00:00:00
CSS-позиционирование и исходный код навигационного меню 00:00:00
Обновление области логотипа для заполнения полей 00:00:00
Исходный код 00:00:00
Исходный код CSS 00:00:00
Обновить стиль Обновления меню навигации 00:00:00
Обновление основной оболочки Установить выбранный элемент в меню 00:00:00
Использование jQuery для получения значения URL-страницы 00:00:00
Динамические классы jQuery 00:00:00
Исходный код 00:00:00
Добавить веб-шрифты Google Fonts на веб-сайт 00:00:00
Выбрать стиль страницы 00:00:00
Изображения Продукты Изменить размер 00:00:00
Сводка раздела 00:00:00
Исходный код HTML 00:00:00
Исходный код CSS 00:00:00
Исходный код JS 00:00:00
Ресурсы 00:00:00
Веб-сайт 4 Заключение 00:00:00
Раздел 11. Двухколоночный шаблон адаптивного веб-сайта
Веб-сайт 5 столбцов Введение 00:00:00
Эскиз дизайна веб-сайта для планирования 00:00:00
Создание структуры HTML 00:00:00
HTML Добавление содержимого заполнителя 00:00:00
Исходный код HTML 00:00:00
Создание стиля для веб-страницы 00:00:00
Курс CSS 00:00:00
Позиционирование заголовка с помощью CSS 00:00:00
Создание строки меню навигации 00:00:00
Быстрые исправления изображения и навигации 00:00:00
Создание веб-сайта в 2 столбца 00:00:00
Быстрые настройки CSS 00:00:00
Укладка толстого нижнего колонтитула, 3 столбца 00:00:00
Исходный код HTML и CSS 00:00:00
Как сделать ваш сайт полностью адаптивным 00:00:00
Обновление размеров носителей 00:00:00
Создание дополнительных веб-страниц 00:00:00
HTML-указатель.html Исходный код страницы 00:00:00
CSS style.css Исходный код 00:00:00
Веб-сайт 5 Заключение 00:00:00
Раздел 12. Веб-сайт меню Simple Bootstrap 3
Bootstrap 4 Изменения по сравнению с Bootstrap 3 00:00:00
Веб-сайт 6 Введение в Bootstrap Navbars 00:00:00
Планирование веб-сайта 00:00:00
Создание структуры HTML-страницы 00:00:00
Добавление начальной загрузки на веб-сайт 00:00:00
Добавление содержимого заполнителя 00:00:00
Исходный код HTML 00:00:00
Добавление стиля по умолчанию 00:00:00
Обновление слогана логотипа Раздел 00:00:00
Создание панели навигации с активным элементом 00:00:00
Индексная страница Приветственное сообщение 00:00:00
Исходный код 00:00:00
Создание области содержимого из двух столбцов 00:00:00
Создать элемент нижнего колонтитула 00:00:00
Сделайте его отзывчивым 00:00:00
Настройка Font Awesome 00:00:00
Обновите панель навигации, чтобы обеспечить адаптивность 00:00:00
JavaScript для скрытия и отображения элементов 00:00:00
Исходный код Первый NavBar 00:00:00
Создайте еще одну адаптивную панель навигации 00:00:00
Исходный код второй NavBar 00:00:00
Как добавить библиотеку JavaScript для начальной загрузки 00:00:00
Добавить меню начальной загрузки NavBar 00:00:00
Меню начальной загрузки Navbar 00:00:00
Исходный код Bootstrap 00:00:00
Создание страниц веб-сайта 00:00:00
Онлайн-редактор кода 00:00:00
Ссылки и ресурсы 00:00:00
Веб-сайт 6 Заключение 00:00:00
Раздел 13 - Одностраничный веб-сайт с веб-сайтом Parallax
Веб-сайт 7 Parallax Backgrounds Введение 00:00:00
Создать каркас веб-сайта 00:00:00
Структура HTML Создать меню навигации 00:00:00
Создание разделов HTML 00:00:00
Базовый исходный код HTML 00:00:00
Контент-заполнитель 00:00:00
Применить CSS к HTML 00:00:00
Как создать панель навигации по UL 00:00:00
Разделы полного размера страницы и значения фона по умолчанию 00:00:00
Добавить фоновые изображения 00:00:00
Сделайте свой текст выдающимся 00:00:00
Настройка панели навигации для реагирования на эффекты 00:00:00
Адаптивные обновления и исправления 00:00:00
Навигационная панель для маленьких экранов 00:00:00
Добавление нижнего колонтитула и обновление разделов 00:00:00
Исходный код HTML и CSS 00:00:00
Добавление триггеров создания событий jQuery 00:00:00
События окна привязки jQuery 00:00:00
Добавление библиотеки значков 00:00:00
Анимация прокрутки с помощью jQuery 00:00:00
Слайдменю вверх jQuery 00:00:00
Добавить эффект параллакса 00:00:00
Создать контактную форму 00:00:00
Сводка по сайту с параллаксом на одной странице 00:00:00
Исходный код HTML jQuery 00:00:00
Исходный код CSS 00:00:00
Ресурсы 00:00:00
Веб-сайт 7 Заключение 00:00:00
Раздел 14 - Веб-сайт одностраничного управления каруселью
Веб-сайт 8 Введение 00:00:00
Каркас плана веб-сайта 00:00:00
Веб-дизайн HTML-структура 00:00:00
Добавление содержимого дизайна заполнителя 00:00:00
Настройка разделов содержимого 100% 00:00:00
Позиция панели навигации 00:00:00
Создание плавающих индикаторов навигационной панели 00:00:00
Код курса HTML и CSS 00:00:00
Краткое введение в jQuery 00:00:00
jQuery для выбора элементов с хешем 00:00:00
Анимация прокрутки jQuery 00:00:00
Окно прокрутки jQuery и отображение информации раздела 00:00:00
Рассчитать, в каком разделе: окно в настоящее время находится в 00:00:00
Сделать вызовы активными при прокрутке 00:00:00
Исходный код HTML jQuery 00:00:00
Исходный код CSS 00:00:00
Настройка веб-сайта 00:00:00
Делаем адаптивным 00:00:00
Обновление содержимого раздела 00:00:00
Разделы настройки псевдоэлементов 00:00:00
Окончательные корректировки конструкции 00:00:00
Заключение исходного кода 00:00:00
Исходный код проекта 00:00:00
Веб-сайт 8 Заключение 00:00:00
Раздел 15 - Многостраничный веб-сайт с нуля с активным классом
Веб-сайт 9 Введение: несколько страниц, несколько столбцов 00:00:00
Планирование веб-сайтов Каркасный дизайн 00:00:00
Создание HTML-структуры родительских элементов 00:00:00
Добавить ресурсы и пустое содержимое-заполнитель 00:00:00
Применение стиля к элементам верхнего уровня HTML 00:00:00
Создание оболочки содержимого 00:00:00
Настройка и стиль панели навигации 00:00:00
Создание заголовка 00:00:00
Исходный код HTML и CSS 00:00:00
Настройка разделов боковой панели и нижнего колонтитула 00:00:00
Настройки и исправления CSS 00:00:00
Добавьте медиа-запросы, сделайте его адаптивным 00:00:00
Добавить дополнительные медиа-запросы 00:00:00
Исходный код Медиа-запросы 00:00:00
Настройка адаптивной навигационной панели 00:00:00
Меню настройки для переключения класса 00:00:00
Исходный код HTML и CSS 00:00:00
Добавить триггер события jQuery 00:00:00
Исходный код jQuery 00:00:00
Настройка классов на лету 00:00:00
Настройки и параметры страницы 00:00:00
Исходный код с jQuery 00:00:00
Создание дополнительных страниц для веб-сайта 00:00:00
Обновить контактную форму 00:00:00
Исходный код 00:00:00
Веб-сайт 9 Заключение 00:00:00
Раздел 16 - Веб-сайт одностраничного нижнего меню
Введение Веб-сайт 10 HTML CSS jQuery Вместе 00:00:00
Каркасное планирование веб-сайта 00:00:00
Веб-дизайн Структура HTML-страницы 00:00:00
Добавить содержимое заполнителя для подготовки к стилизации 00:00:00
Настройка параметров CSS по умолчанию 00:00:00
Создайте липкий нижний колонтитул, расположив его внизу 00:00:00
Исходный код 00:00:00
Параметры кодирования панели навигации для стилизации 00:00:00
Код опций навигационной панели 00:00:00
Добавить стиль к разделам 00:00:00
Разделы исходного кода 00:00:00
Фоновые обложки для разделов 00:00:00
Настройки изображения и корректировки CSS 00:00:00
Стиль обновления заголовка 00:00:00
Стиль контактной формы 00:00:00
HTML Исходный код CSS 00:00:00
Добавить jQuery на веб-сайт 00:00:00
Анимированная прокрутка веб-страницы 00:00:00
Обновить классы при прокрутке 00:00:00
Исходный код с jQuery 00:00:00
Google Шрифты и фоновые тени 00:00:00
Как добавить значки социальных сетей 00:00:00
Ресурсы для обновления CSS и настройки 00:00:00
Заключительные обновления 00:00:00
Исходный код 00:00:00
Веб-сайт 10 Заключение 00:00:00
Раздел 17. Создание контактной формы
Введение в создание контактной формы 00:00:00
Создать структуру начальной загрузки HTML 00:00:00
Создать структуру формы 00:00:00
Добавить держатель сеанса PHP 00:00:00
Исходный код Контактная форма 00:00:00
PHP Получить данные публикации 00:00:00
Проверка на спам с использованием PHP 00:00:00
PHP Отправить письмо 00:00:00
Загрузить файл и отправить электронное письмо на адрес электронной почты 00:00:00
Исправления форм PHP 00:00:00
PHP Form Mail Исходный код 00:00:00
Настройка проверки формы jQuery 00:00:00
Сообщения об ошибках переключения jQuery 00:00:00
Интерактивная форма обратной связи через Интернет 00:00:00
Настройки и исправления веб-контактной формы 00:00:00
Полный исходный код веб-формы 00:00:00
Раздел 18 - Фрагменты кода в действии Просто полезный код для веб-разработки
Введение в фрагменты кода 00:00:00
Всплывающие изображения с использованием JavaScript 00:00:00
Исходный код Всплывающие изображения 00:00:00
Слушатели событий мыши JavaScript 00:00:00
Слушатели событий мыши в исходном коде 00:00:00
Раздел 19 - Заключение
Полное заключение о веб-сайтах 00:00:00

Создайте реальный веб-сайт HTML5 и CSS3 с нуля

Подпишитесь на YouTube

Код

В этом уроке мы создадим реальный веб-сайт с чистым HTML 5 и CSS 3, который может быть используется в качестве шаблона для агентства веб-дизайна или любого другого бизнес-сайта.Давайте сначала посмотрим на конечный результат:

Шаблон сайта полностью отвечает и состоит из трех страниц. Стартовая страница выглядит следующим образом:

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

Кроме того, шаблон веб-сайта состоит из О и Services странице:

Давайте рассмотрим шаги, необходимые для создания этого веб-сайта с нуля.

Реализация начальной страницы

В следующих шагах мы будем использовать простой код HTML 5 и CSS 3 для реализации. Никаких дополнительных рамок не требуется. Начнем с создания новой и пустой папки проекта:

$ mkdir 123webdesign

Перейдите в эту недавно созданную папку проекта

$ cd 123webdesign

и создайте подпапки с помощью следующих команд:

$ mkdir css
$ mkdir img
$ mkdir fonts

Поскольку мы хотим использовать значки Font Awesome, мы должны убедиться, что библиотека значков добавлена ​​в наш проект.Зайдите на http://fontawesome.io, скачайте бесплатный пакет, распакуйте архив и скопируйте файлы из папки css и fonts в соответствующие подпапки в проекте.

Внедрить Index.html

Давайте начнем кодирование с добавления нового файла index.html в нашу корневую папку проекта и следующего HTML-кода:

  

  
    
    
    
    
     1-2-3 Веб-дизайн | Добро пожаловать 
    
    
  
  
    <заголовок>

    

    <раздел>

    

    <раздел>

    

    <раздел>

    

    <нижний колонтитул>
      

1-2-3 Веб-дизайн, Авторские права и копия; 2017

Как видите, мы определяем пять разделов в элементе body :

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

Давайте пошагово добавим необходимый HTML-код для каждого раздела ...

Добавить HTML-код для заголовка

В разделе заголовка добавьте следующий код для отображения брендинга и меню навигации вверху:

    

Добавьте HTML-код для раздела "Витрина"

Затем вставьте следующий код в раздел "Витрина":

  

Доступный веб-дизайн для малых и средних компаний

Lorem ipsum dolor sit amet, conctetur adipisicing elit.Nemo Repellat incidunt quasi quibusdam non nostrum, dolorem molestiae enim, excepturi soluta libero voluptatem provident conctetur accusamus nulla repudiandae nobis. Excepturi, acceptnda.

Добавьте HTML-код для раздела Информационный бюллетень

Форма подписки на информационный бюллетень состоит из следующего HTML-кода:

  

Получите нашу рассылку

Добавить HTML-код для ящиков разделов

Наконец, добавьте следующий HTML-код в раздел ящиков:

  

Расширьте свою аудиторию

Lorem ipsum dolor sit amet, conctetur adipisicing elit. Commodi nulla id quisquam veritatis eius perspiciatis velit eum unde soluta, veniam aliquid deleniti ex similique.Aperiam molestiae natus nulla sit, quis.

Современный веб-дизайн

Lorem ipsum dolor sit amet, conctetur adipisicing elit. Veniam quia magnam, сладострастные, impedit eum labouriosam acceptnda eos sit at nihil, dolore! Aliquam, Laborum neque corporis molestiae eius ea laudantium porro.

Сверхбыстрый хостинг

Lorem ipsum dolor sit amet, conctetur adipisicing elit.Veniam quia magnam, сладострастные, impedit eum labouriosam acceptnda eos sit at nihil, dolore! Aliquam, Laborum neque corporis molestiae eius ea laudantium porro.

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

Styling Index.html

На следующем этапе нам нужно стилизовать содержимое веб-сайт. Файл css / style.css уже включен в индекс .html :

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

Общие CSS Код

Сначала вставьте общий код CSS:

  body {
  шрифт: 15px / 1.5 Arial, Helvetica, без засечек;
  отступ: 0;
  маржа: 0;
  цвет фона: # f4f4f4;
}

.контейнер{
  ширина: 80%;
  маржа: авто;
  переполнение: скрыто;
}

ul {
  маржа: 0;
  отступ: 0;
}  

Заголовок CSS-код

Раздел заголовка содержит брендинг сайта и меню навигации.Для стилизации необходим следующий код CSS, который также добавлен в файл style.css :

  / * Заголовок * /
header {
  фон: # 353637;
  цвет: #ffffff;
  padding-top: 30 пикселей;
  минимальная высота: 70 пикселей;
  нижняя граница: # 32a0c2 3px solid;
}

header a {
  цвет: #ffffff;
  текстовое оформление: нет;
  текст-преобразование: прописные буквы;
  размер шрифта: 16 пикселей;
}

header li {
  плыть налево;
  дисплей: встроенный;
  отступ: 0 20 пикселей 0 20 пикселей;
}

header #branding {
  плыть налево;
}

header #branding h2 {
  маржа: 0;
}

header nav {
  float: right;
  маржа сверху: 10 пикселей;
}

заголовок.выделить, заголовок .current a {
  цвет: # 32a0c2;
  font-weight: жирный;
}

header a: hover {
  цвет: #cccccc;
  font-weight: жирный;
}  

Обратите внимание, что ссылки меню должны менять внешний вид при наведении курсора мыши на элемент. Поэтому используется заголовок селектора a: hover и установлены значения свойств color и font-weight .

Код CSS для раздела Витрина

Для раздела витрина необходим следующий код CSS:

  / * Витрина * /

#showcase {
  минимальная высота: 400 пикселей;
  фон: url ('../img/headerbg.jpg ') центр без повтора;
  размер фона: обложка;
  выравнивание текста: центр;
  цвет: #ffffff;
}

#showcase h2 {
  маржа сверху: 100 пикселей;
  размер шрифта: 55 пикселей;
  нижнее поле: 10 пикселей;
}

#showcase p {
  размер шрифта: 20 пикселей;
}  

Фоновое изображение задается с помощью свойства background элемента section с идентификатором showcase. Файл изображения хранится в папке img , а имя файла - headerbg.jpg . Этот файл выбирается с помощью функции CSS url .Эта функция ожидает относительный путь в качестве первого и единственного параметра.

Чтобы убедиться, что изображение правильно адаптируется к разным размерам экрана, важно также использовать параметры без повтора и центр . Кроме того, вы должны убедиться, что для свойства CSS background-size установлено значение cover .

Код CSS для информационного бюллетеня раздела

Код CSS для информационного бюллетеня раздела доступен в следующем списке и должен быть вставлен в стиль .css , а также:

  / * Информационный бюллетень * /
#Новостная рассылка{
  отступ: 15 пикселей;
  цвет: #ffffff;
  фон: # 353637;
}

#newsletter h2 {
  плыть налево;
}

#newsletter form {
  float: right;
  маржа сверху: 15 пикселей;
}

#newsletter input [type = "email"] {
  отступ: 4 пикселя;
  высота: 25 пикселей;
  ширина: 250 пикселей;
}

.button_1 {
  высота: 38 пикселей;
  фон: #cccccc;
  граница: 0;
  отступ слева: 20 пикселей;
  отступ справа: 20 пикселей;
  цвет: # 353637;
}  

Код CSS нижнего колонтитула

Затем добавьте код CSS для области нижнего колонтитула:

  нижний колонтитул {
  отступ: 20 пикселей;
  маржа сверху: 20 пикселей;
  цвет: #ffffff;
  цвет фона: # 32a0c2;
  выравнивание текста: центр;
}  

Создание адаптивного веб-сайта с помощью медиа-запросов

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

  @media (max-width: 768px) {
  заголовок # брендинг,
  заголовок навигации,
  заголовок nav li,
  # информационный бюллетень h2,
  # форма рассылки,
  #boxes .box {
    float: нет;
    выравнивание текста: центр;
    ширина: 100%;
  }

  header {
    padding-bottom: 20 пикселей;
  }

  #showcase h2 {
    маржа сверху: 40 пикселей;
  }

  #newsletter button {
    дисплей: блок;
    ширина: 100%;
  }

  # ввод формы информационного бюллетеня [type = "email"] {
    ширина: 100%;
    нижнее поле: 5 пикселей;
  }
}  

Используя ключевое слово @media, мы можем определить код CSS, который активируется только при определенном размере экрана.В нашем примере мы хотим определить код CSS, который действителен для размеров экрана с максимальной шириной 768 пикселей. Здесь нам нужно установить для атрибута max-width значение 768px:

 @media (max-width: 768px) {/ * вставьте сюда CSS-код для маленьких размеров экрана * /} 

Implementing The About Page

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

Добавление HTML-кода в файл About.html

Создайте новый файл about.html в папке проекта и вставьте следующий HTML-код:

  

  
    
    
    
    
     1-2-3 Веб-дизайн | О 
    
    
  
  
    <заголовок>
      
    

    <раздел>
      
<статья>

О нас

Lorem ipsum dolor sit amet, conctetur adipisicing elit. Voluptatum quaerat modi fuga doloremque id, dolores tempora, rerum ducimus ipsum dolor explicabo blanditiis! Esse tempore, iure quibusdam aspernatur provident ducimus nesciunt?

Lorem ipsum dolor sit amet, conctetur adipisicing elit.Сладострастные, в, а. Tempora rerum excepturi quam accusantium labore? Hic alias ducimus, at reiciendis voluptatum, veritatis ipsum animi dolore dolorem dignissimos dolores. Lorem ipsum dolor sit amet, conctetur adipisicing elit. Nihil porro ipsa, acceptnda alias harum debitis ab, a, eligendi, fugiat voluptas conctetur. Placeat cumque autem nemo accusamus odio labore dolore, in. Lorem ipsum dolor sit amet, conctetur adipisicing elit. Excepturi quam odio porro quo beatae ipsam Laboriosam ea optio, suscipit ut dolorum! Nisi eius fugiat fugit illo, obcaecati quo.Dicta, eaque.

<сторона>

Команда

Lorem ipsum dolor sit amet, conctetur adipisicing elit. Magnam vel, molestias nostrum sed, adipisci dicta cumque explicabo distinctio Provisionnt voluptatum repllendus amet neque esse impedit. Debitis voluptate incidunt, aperiam minima?

<нижний колонтитул>

1-2-3 Веб-дизайн, Авторские права и копия; 2017

Страница состоит из двух столбцов: основного столбца, содержащего заголовок и текст, и боковой панели с дополнительным текстом.

Добавление кода CSS для страницы «О нас»

Следующий код CSS необходимо добавить в css / style.css :

  / * Боковая панель * /

aside # sidebar {
  float: right;
  ширина: 30%;
  отступ: 5 пикселей;
}

aside # sidebar .contact input, aside # sidebar .contact textarea {
  ширина: 90%;
  отступ: 5 пикселей;
}

article # main-col {
  плыть налево;
  ширина: 65%;
}  

Кроме того, медиа-запрос CSS должен быть расширен, чтобы применить другой стиль к статье # main-col и aside # sidebar :

  @media (max-width: 768px) {
  заголовок # брендинг,
  заголовок навигации,
  заголовок nav li,
  # информационный бюллетень h2,
  # форма рассылки,
  # коробки.коробка,
  статья # main-col,
  aside # sidebar {
    float: нет;
    выравнивание текста: центр;
    ширина: 100%;
  }
  
  [...]
}  

Реализация служб Страница

Наконец, мы собираемся реализовать services.html.

Добавление HTML-кода в файл Services.html

Создайте новый файл services.html и вставьте следующий HTML-код:

  

  
    
    
    
    
     1-2-3 Веб-дизайн | О 
    
    
  
  
    <заголовок>
      
    

    <раздел>
      
<статья>

Наши услуги

  • Стартовый пакет веб-сайта

    Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat.Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum.

    1000 долларов

  • Профессиональный пакет веб-сайтов

    Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum.

    5 000 долл. США

  • Пакет электронной торговли

    Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum.

    8 000 долл. США

<сторона>

Свяжитесь с нами

<форма>
<нижний колонтитул>

1-2-3 Веб-дизайн, Авторские права и копия; 2017

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

Добавление кода CSS для страницы служб

Соответствующий код CSS снова вставляется в файл css / style.css :

  / * Services * /
ul # services li {
  стиль списка: нет;
  отступ: 20 пикселей;
  граница: #cccccc solid 1px;
  нижнее поле: 5 пикселей;
  фон: # 32a0c2;
}

ul # services h4 {
  нижняя граница: # 353637 solid 1px;
}  

Кроме того, расширен код CSS, встроенный в медиа-запрос:

  # ввод формы информационного бюллетеня [type = "email"],
  .контактный вход,
  .contact textarea,
  .contact label {
    ширина: 100%;
    нижнее поле: 5 пикселей;
  }  

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

Единственный курс, который вам нужен для изучения веб-разработки - HTML, CSS, JS, Node и многое другое!

Bootcamp для веб-разработки

  • Создавайте НАСТОЯЩИЕ веб-приложения с использованием передовых технологий
  • Это единственный полный курс для начинающих разработчиков полного стека, который охватывает NodeJS.
  • Создайте 13+ проектов, включая гигантское производственное приложение под названием YelpCamp. Ни один другой курс не проведет вас через создание столь значительного приложения.
Перейти к курсу

Учебное пособие: создание веб-сайта GitLab Pages с нуля

Из этого туториала Вы узнаете, как создать сайт Pages с нуля, используя Генератор статических сайтов Jekyll (SSG). Вы начинаете с пустой проект и создайте свой собственный файл конфигурации CI / CD, который дает инструкции для бегуна.Когда ваш CI / CD работает конвейер, сайт Pages создан.

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

Чтобы создать сайт GitLab Pages:

Предварительные требования

У вас должен быть пустой проект в GitLab.

Создайте файлы проекта

Создайте три файла в корневом (верхнем уровне) каталоге:

  • .gitlab-ci.yml : файл YAML, содержащий команды, которые вы хотите запустить. А пока оставьте содержимое файла пустым.

  • index.html : HTML-файл, который можно заполнить любым содержимым HTML. вы хотите, например:

      
     
        Главная 
     
     
        

    Привет, мир!

  • Gemfile : файл, описывающий зависимости для программ Ruby.

    Заполните его следующим содержанием:

      источник "https://rubygems.org"
    
    драгоценный камень "Джекилл"
      

Выберите образ Docker

В этом примере бегун использует образ Docker. для запуска скриптов и развертывания сайта.

Этот конкретный образ Ruby поддерживается на DockerHub.

Отредактируйте файл .gitlab-ci.yml и добавьте этот текст в первую строку:

Если вашему SSG требуется NodeJS для сборки, вы должны указать изображение, которое содержит NodeJS как часть своей файловой системы.Например, для Сайт Hexo, вы можете использовать изображение : node: 12.17.0 .

Установить Jekyll

Чтобы запустить Jekyll локально, вы должны установить его:

  1. Откройте свой терминал.
  2. Установите Bundler, запустив gem install bundler .
  3. Создайте Gemfile.lock , запустив bundle install .
  4. Установите Jekyll, запустив пакет bundle exec jekyll build .

Чтобы запустить Jekyll в своем проекте, отредактируйте файл .gitlab-ci.yml файл и добавляем команды установки:

  скрипт:
  - сборщик установки гемов
  - установка пакета
  - связка exec jekyll build
  

Кроме того, в файле .gitlab-ci.yml каждый сценарий организован с помощью задания . Задание включает сценарии и настройки, которые вы хотите применить к этому конкретному задача.

  работа:
  сценарий:
  - сборщик установки гемов
  - установка пакета
  - связка exec jekyll build
  

Для GitLab Pages это задание имеет особое имя, которое называется страниц .Этот параметр сообщает бегуну, что вы хотите, чтобы задание развернуло ваш веб-сайт. с GitLab Pages:

  страниц:
  сценарий:
    - сборщик установки гемов
    - установка пакета
    - связка exec jekyll build
  

Укажите общедоступный каталог

для вывода

Джекиллу нужно знать, где генерировать свои выходные данные. GitLab Pages рассматривает файлы только в каталоге с именем public .

Jekyll использует флаг назначения ( -d ), чтобы указать выходной каталог для созданного веб-сайта.Добавьте место назначения в файл .gitlab-ci.yml :

  страниц:
  сценарий:
    - сборщик установки гемов
    - установка пакета
    - связка exec jekyll build -d public
  

Укажите общедоступный каталог

для артефактов

Теперь, когда Джекилл вывел файлы в общедоступный каталог , бегуну нужно знать, где их достать. Артефакты хранятся в общедоступном каталоге :

  страниц:
  сценарий:
    - сборщик установки гемов
    - установка пакета
    - связка exec jekyll build -d public
  артефакты:
    пути:
      - общественные
  

Ваш .Теперь файл gitlab-ci.yml должен выглядеть так:

  изображение: ruby: 2.7

страницы:
  сценарий:
    - сборщик установки гемов
    - установка пакета
    - связка exec jekyll build -d public
  артефакты:
    пути:
      - общественные
  

Разверните и просмотрите свой веб-сайт

После выполнения предыдущих шагов, разверните свой сайт:

  1. Сохраните и зафиксируйте файл .gitlab-ci.yml .
  2. Перейдите к CI / CD> Pipelines , чтобы наблюдать за конвейером.
  3. Когда конвейер завершится успешно, перейдите в Настройки> Страницы чтобы просмотреть URL-адрес, по которому теперь доступен ваш сайт.

Когда это задание страниц завершается успешно, специальные страницы : развертывание задания появляется в виде конвейера. Подготавливает содержание веб-сайта для Демон GitLab Pages. GitLab запускает его в фоновом режиме и не использует раннер.

Другие варианты для вашего файла CI / CD

Если вы хотите выполнять более сложные задачи, вы можете обновить свой .gitlab-ci.yml файл с любыми доступными настройками. Вы можете проверить ваш файл .gitlab-ci.yml с помощью инструмента CI Lint, который входит в состав GitLab.

В следующих разделах показаны другие примеры других параметров, которые вы можете добавить в файл CI / CD.

Развертывание определенных веток на сайте Pages

Возможно, вы захотите выполнить развертывание на сайте Pages только из определенных веток.

Сначала добавьте раздел workflow , чтобы конвейер запускался только при внесении изменений. отправлено в ветки:

  изображение: ruby: 2.7

рабочий процесс:
  правила:
    - если: '$ CI_COMMIT_BRANCH'

страницы:
  сценарий:
    - сборщик установки гемов
    - установка пакета
    - связка exec jekyll build -d public
  артефакты:
    пути:
      - общественные
  

Затем настройте конвейер для выполнения задания для ветка по умолчанию (здесь main ).

  изображение: ruby: 2.7

рабочий процесс:
  правила:
    - если: '$ CI_COMMIT_BRANCH'

страницы:
  сценарий:
    - сборщик установки гемов
    - установка пакета
    - связка exec jekyll build -d public
  артефакты:
    пути:
      - общественные
  правила:
    - если: '$ CI_COMMIT_BRANCH == "main"'
  

Укажите этап развертывания

Для GitLab CI / CD есть три этапа по умолчанию: сборка, тестирование, и развернуть.

Если вы хотите протестировать свой скрипт и проверить созданный сайт перед развертыванием в производство, вы можете запустить тест точно так же, как он выполняется, когда вы нажмите на ветку по умолчанию (здесь main ).

Чтобы указать этап выполнения задания, добавьте строку stage в ваш файл CI:

  изображение: ruby: 2.7

рабочий процесс:
  правила:
    - если: '$ CI_COMMIT_BRANCH'

страницы:
  этап: развернуть
  сценарий:
    - сборщик установки гемов
    - установка пакета
    - связка exec jekyll build -d public
  артефакты:
    пути:
      - общественные
  правила:
    - если: '$ CI_COMMIT_BRANCH == "main"'
  

Теперь добавьте еще одно задание в файл CI, сообщив ему проверять каждое нажатие на каждую ветку , кроме , , основную ветку :

  изображение: ruby: 2.7

рабочий процесс:
  правила:
    - если: '$ CI_COMMIT_BRANCH'

страницы:
  этап: развернуть
  сценарий:
    - сборщик установки гемов
    - установка пакета
    - связка exec jekyll build -d public
  артефакты:
    пути:
      - общественные
  правила:
    - если: '$ CI_COMMIT_BRANCH == "main"'

тестовое задание:
  этап: тест
  сценарий:
    - сборщик установки гемов
    - установка пакета
    - связка exec jekyll build -d test
  артефакты:
    пути:
      - тестовое задание
  правила:
    - если: '$ CI_COMMIT_BRANCH! = "main"'
  

Когда задание test выполняется на этапе test , Jekyll создает сайт в каталоге под названием test .Работа влияет все филиалы кроме основного .

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

Удалить повторяющиеся команды

Чтобы избежать дублирования одних и тех же сценариев в каждом задании, вы можете добавить их в раздел before_script .

В этом примере были запущены установщик пакетов gem install и bundle install . для обоих заданий страниц и тест .

Переместите эти команды в раздел before_script :

  изображение: ruby: 2.7

рабочий процесс:
  правила:
    - если: '$ CI_COMMIT_BRANCH'

before_script:
  - сборщик установки гемов
  - установка пакета

страницы:
  этап: развернуть
  сценарий:
    - связка exec jekyll build -d public
  артефакты:
    пути:
      - общественные
  правила:
    - если: '$ CI_COMMIT_BRANCH == "main"'

тестовое задание:
  этап: тест
  сценарий:
    - связка exec jekyll build -d test
  артефакты:
    пути:
      - тестовое задание
  правила:
    - если: '$ CI_COMMIT_BRANCH! = "main"'
  

Создавайте быстрее с кэшированными зависимостями

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

В этом примере кэшируются зависимости Jekyll в каталоге vendor при запуске пакета установите :

  изображение: ruby: 2.7

рабочий процесс:
  правила:
    - если: '$ CI_COMMIT_BRANCH'

кеш:
  пути:
    - продавец/

before_script:
  - сборщик установки гемов
  - bundle install --path vendor

страницы:
  этап: развернуть
  сценарий:
    - связка exec jekyll build -d public
  артефакты:
    пути:
      - общественные
  правила:
    - если: '$ CI_COMMIT_BRANCH == "main"'

тестовое задание:
  этап: тест
  сценарий:
    - связка exec jekyll build -d test
  артефакты:
    пути:
      - тестовое задание
  правила:
    - если: '$ CI_COMMIT_BRANCH! = "main"'
  

В этом случае нужно исключить / vendor каталог из списка папок, которые строит Jekyll.В противном случае Джекилл пытается создать содержимое каталога вместе с сайтом.

В корневом каталоге создайте файл с именем _config.yml и добавьте этот контент:

Теперь GitLab CI / CD не только создает сайт, но также:

  • Отправляет непрерывных тестов для выявления ветвей.
Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *