Создание веб сайта с нуля: Как создать сайт бесплатно самому? Показываем 3 простых способа!

как сделать сайт на PHP с нуля — руководства на Skillbox

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

В пятерку популярных сегодня входят Nginx, Apache, Microsoft IIS, CERN httpd, Cherokee HTTP Server. Первые два борются за звание лучшего и самого востребованного. Apache лидирует, но, пока вы читаете эту статью, все может измениться.

Больше интересной статистики — на сайте Similartech.

Затем вам нужен PHP на сервере. Язык программирования бесплатный, разрабатывается на open source-платформе и выложен в свободном доступе. Скачиваете сам PHP и его интерпретатор с официального сайта и переходите к третьему шагу.

На официальном сайте скачиваете PHP, выбирая версию Thread Safe и обращая внимание на разрядность Windows. Важно, чтобы все компоненты были для одной разрядности.

Теперь создайте на диске компьютера директорию. Название не принципиально, главное — латинскими символами.

Создаем папку с любым названием, на которое способна ваша фантазия.

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

Если выбираете Apache, скачивайте его отсюда https://www.apachelounge.com/download/

Чтобы настроить сервер, создайте папку на диске С: с названием Server. В ней еще две — bin и data. В последней создайте подпапки DB (для баз данных) и htdocs (для сайтов). Содержимое архива с Apache распакуйте в C:\Server\bin.

Откройте папку С:\Server\bin\Apache24\conf\

, а затем в ней файл httpd. conf с помощью любого редактора. Измените в нем следующие настройки:

1

 Define SRVROOT «c:/Apache24″

на 

 Define SRVROOT «c:/Server/bin/Apache24″

2

#ServerName www.example.com:80

на 

3

 DocumentRoot «${SRVROOT}/htdocs»

меняем на 

 DocumentRoot «c:/Server/data/htdocs/»

4

<Directory «${SRVROOT}/htdocs»>

на 

<Directory «c:/Server/data/htdocs/»>

5

 DirectoryIndex index. html

на 

 DirectoryIndex index.php index.html index.htm

6

# AllowOverride controls what directives may be placed in .htaccess files.

# It can be «All», «None», or any combination of the keywords:

#   AllowOverride FileInfo AuthConfig Limit

#

AllowOverride None

на 

# AllowOverride controls what directives may be placed in .htaccess files.

# It can be «All», «None», or any combination of the keywords:

#   AllowOverride FileInfo AuthConfig Limit

#

AllowOverride All

7

#LoadModule rewrite_module modules/mod_rewrite. so

на 

 LoadModule rewrite_module modules/mod_rewrite.so

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

http://localhost/, вы увидите:

Если вы хотите обратиться к серверу по index.php, нужно создать в прикорневой папке файл с таким названием. Дальше написать открывающий PHP-тег. Это будет выглядеть так:

<?php

// Первый сайт

echo ‘<h2> Hello world </h2>’;

?>

На самом деле сегодня мало кто использует «чистые» Apache и PHP. Существуют удобные готовые решения со всеми компонентами. Вы скачиваете установочный файл, и он сам распаковывает PHP, Apache, MySQL и другие дистрибутивы. Создает нужную папку на диске, автоматически прописывает все настройки. Готовые сборки позволяют сразу размещать сайты в папке и работать с ними. Все автоматически настроится за вас.

Самые известные среди готовых пакетов для создания сайта:

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

Хотите знать больше о программировании? Записывайтесь на курс «PHP-разработчик», где вы изучите PHP с преподавателями и приобрете востребованную на рынке труда профессию.

Курс «PHP-разработчик»

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

• Живая обратная связь с преподавателями
• Неограниченный доступ к материалам курса
• Стажировка в компаниях-партнёрах
• Дипломный проект от реального заказчика
• Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

Создание веб-сайта. Курс молодого бойца / Хабр

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

Условно процесс создания сайта (web-проекта) можно разделить на 3 этапа:

Данный этап можно разделить на несколько подэтапов:

• Создание идеи
• Разработка структуры проекта
• Проработка макета проекта

Создание идеи

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

Разработка структуры проекта

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

Проработка макета проекта

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

Для отрисовки наброска можно использовать бумагу и ручку, Photoshop, любой другой редактор графики (раньше часто использовали Adobe Fireworks). Важно отметить, что данный этап – это не отрисовка готового дизайн-макета, а всего лишь схематичный набросок, выполненный для понимания того, как на сайте будут располагаться основные информационные блоки, графика и прочие элементы дизайна.

Основные элементы страницы

Зачастую основными элементами страницы являются: содержащий блок (wrapper, container), логотип, навигация, контент, футер (нижний колонтитул), свободное пространство (по сути свободное пространство — это не элемент дизайна, но понятие, помня о котором при составлении макета страницы, наш проект не будет выглядеть как нагромождение блоков).

Содержащий блок (контейнер)

Роль контейнера на странице может выполнять непосредственно элемент body или же div. Ширина содержащего блока может быть резиновой (fluid), а может быть фиксированной (fixed).

Логотип

Текстовая или графическая составляющая проекта и выделяющая его среди других. Логотип чаще всего располагается в верхнем левом углу страницы или же посередине (в зависимости от идеи, макета).

Навигация

Основная навигационная панель содержит ссылки на основные разделы сайта. Навигационная панель часто располагается в верхней части страницы (в независимости от того вертикально или горизонтально располагаются элементы навигации).

Контент

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

Нижний колонтитул (footer)

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

Резиновый и фиксированный макет

Фиксированный макет

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

Резиновый макет

«Резиновый» макет подразумевает, что страница сайта будет стараться занять всё доступное ей пространство на экране пользователя, подстраиваясь под разрешение.

В данном контексте стоит уяснить такие понятия, как отзывчивый веб-дизайн (Responsive Web Design aka. RWD) и адаптивный веб-дизайн (Adaptive Web Desing aka. AWD). Первое понятие укладывается в концепцию «резинового» и означает, что при изменении размера экрана ваш сайт подстраивается под него, второе понятие подразумевает, что при разработке вы определяете основные разрешения (размеры экрана), под которые будет подстраиваться (адаптироваться) ваш контент. В обоих случаях следует разрабатывать не один, а несколько макетов, которые будут соответствовать разным разрешениям экрана. Часто создаётся 3 макета под разрешения iPhone (Android Phone), iPad (Android Tablet) и Desktop.

На данном изображении показаны оба подхода. Сверху блок «отзывается» на любые изменения размера контейнера, снизу «адаптируется» под определённую ширину

Полезные ссылки по теме:

Почему при «резиновом» дизайне создаётся несколько макетов, а не используется один?

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

Модульная сетка

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

Наиболее популярной системой является модульная сетка 960 Grid System (http://960.gs), которая максимально делит страницу на 12, 16 и 24 колонки. Максимум в ширине сетка имеет 960 пикселей. Данное решение основано на том, что большинство современных мониторов, на момент создания сетки, имели разрешение не меньше 1024 на 768 пикселей. Создание макета на основе данной сетки, в дальнейшем, поможет ускорить процесс разработки (вёрстки).

Так же стоит отметить, что при разработке «резинового» макета страницы существует понятие максимальной ширины. Данное утверждение основывается на удобстве восприятия информации. Если предположить, что наш сайт не имеет максимального значения по ширине, то на больших мониторах информация будет сильно растягиваться и её неудобно будет читать. Чаще всего ограничиваются шириной в 1280 пикселей.

Модульная сетка 960GS отвечает концепции «фиксированного» дизайна, для «резинового» дизайна можно обратить внимание на адаптацию этой же сетки на сайте http://www. designinfluences.com/fluid960gs/ или воспользоваться сеткой, которую предлагает фрэймворк Bootstrap (http://getbootstrap.com/css/#grid).

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

Модульная сетка, по сути, – это некая визуальная абстракция, визуальное деление страницы на равные по ширине столбцы с равными отступами между ними. Визуализировать данную модель можно посредствам направляющих или отдельного слоя, на котором будут изображены эти столбцы. Именно такое решение вы найдёте в шаблонах сетки 960gs.

Полезные ссылки и материалы:

Макеты веб-страниц

Среди всего многообразия составления макета веб-страницы можно выделить четыре наиболее распространённых:

• Навигация в левом столбце

• Навигация в правом столбце
  
  
• Навигация в трёх столбцах

• Горизонтальная навигация. На данном этапе сайты с таким типом навигации составляют большинство. Удобство такого подхода легко объяснить тем, что в данном случае у нас остаётся больше пространства для контента, составляющего наш сайт.

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

Mobile First

С учётом тенденций последних лет данный подход плотно занимает свою нишу в разработке и дизайне сайтов. Тенденция такова, что практически около 60% пользователей интернета используют для доступа в сеть мобильные устройства, поэтому правилом хорошего тона становится разработка не только десктопной версии сайта, но и мобильной версии. При использовании данного подхода разработка макета сайта, дизайна и вёрстки начинается с мобильной версии, а затем уже прорабатываются макеты для других разрешений: добавляются блоки, баннеры, дополнительные элементы дизайна и пр.

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

Усвоив всё вышесказанное можно переходить к следующему этапу – Дизайн.

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

Один из способов определения основного цвета в проекте – это составление mood board. Для этого необходимо выписать себе все синонимы, связанные с темой проекта, а затем каждый синоним набрать в поиске по картинкам Google или Yandex. На основе найденных изображений выписать себе цвета, которые чаще всего встречаются на них (каких цветов больше). Найденные цвета будут составлять визуальное восприятие нашего проекта и вызывать у пользователя соответствующие чувства.

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

• Color Scheme Designer 3 (http://colorschemedesigner.com/csd-3.5/). Помимо выбора цветовой схемы данный сервис позволяет посмотреть пример того, как выбранные цвета будут смотреться на сайте

• Adobe Color CC (https://color.adobe.com/ru/). Данный ресурс, в отличие от Color Scheme Designer 3, позволяет создавать палитры ещё и на основе загруженных изображений (которые, например, могли появиться у нас на этапе составления mood board). Так же данный сервис обладает большим архивом палитр других пользователей.

• COLORlovers (http://www.colourlovers.com/). Обширное сообщество, где можно подобрать различные палитры.

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

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

Элементы Call to Action

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

Данное понятие хорошо вписывается в принцип AIDA (Attraction Interest Desire Action).

AIDA

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

• Привлечение внимания
• Интерес
• Желание
• Действие

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

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

Схема просмотра страницы

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

Визуальные направляющие

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

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

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

Фрэймворки

Стоит так же отметить, что иногда, при разработке дизайна страницы, используют фрэймворки Bootstrap, Foundation, Material Design Lite, которые, помимо готовых элементов дизайна (кнопки, формы ввода и пр.), предлагают свою модульную сетку, CSS сниппеты (часть кода, разметки, которая может неоднократно использоваться) для вставки элементов в страницу (тех же кнопок, элементов форм и пр.) и классы разметки, а так же JS скрипты для соответствующих интерактивных элементов.

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

_{Готовые элементы дизайна из Bootstrap, Foundation и Material Design Lite (MDL)}

Трэнды

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

Во-первых, стоит упомянуть о так называемых лэндинговых страницах, которые подразумевают под собой длинную страницу, разделённую на соответствующие секции и знакомящие пользователя с основным контентом сайта. Часто лэндинг является единственной страницей, на которой сразу удаётся показать всю необходимую информацию, не заставляя пользователя переходить по страницам. Лэндингам обычно сопутствует хороший дизайн, выверенная и продуманная подача информации, элементы call-to-action, интерактивность (счётчики, анимация и пр.).

Стоит так же сказать о внешнем виде страниц и вспомнить такие понятия как скевоморфизм и плоский дизайн.

Скевоморфизм

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

Плоский дизайн

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

Не маловажную роль на тренды в веб-дизайне оказало развитие мобильных операционных систем. Чаще всего двигателем прогресса становятся решения от компании Apple, которая в своих дизайн-решениях iOS сначала использовала имитацию реальных объектов, а затем всё упростила до плоского дизайна (Flat UI). Сейчас в вебе главенствует Flat дизайн и Material дизайн, который активно развивает Google.

Неплохой сайт-сравнение двух концепций: http://www.flatvsrealism.com/

По основам веб-дизайна и прототипированию неплохим подспорьем может стать данная книга: Джейсон Берд: Веб-дизайн. Руководство разработчика.

Итак, процесс дизайна макета страницы плавно перетекает в процесс «оживления» сделанного на предыдущих этапах. Прежде чем сразу начинать писать HTML, CSS и JS стоит немного поговорить о редакторах кода и структуре проекта.

Редакторы кода

Из наиболее популярных редакторов кода на сегодня можно выделить три:

От части, все эти редакторы похожи по принципу работы, когда при установке мы получаем редактор, в который затем можем «доставить» необходимые модули и плагины, так сказать, «редакторы на стероидах». Разница лишь в технологиях, которые были использованы при написании редакторов, если Sublime Text написан при помощи C++ и Python, то 2 других используют JavaScript, HTML, CSS (Less). За счёт этой разницы Sublime Text может работать чуть быстрее своих коллег.

Существуют так же более продвинутые IDE (студии) такие, как Web Storm, PHP Storm и пр., но для вёрстки проекта вполне подойдёт редактор кода, а не целая студия (IDE).

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

Обзоры текстовых редакторов:

Структура проекта

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

Лучше всего отдельные категории файлов помещать в свои папки: картинки в папку images или img, css в папку css, javascript в папку js. В корне будет лежать только index.html и страницы сайта, либо только index.html, а страницы в отдельной папке pages. Соблюдая эти правила вы никогда не запутаетесь в проекте.

Так же стоит сказать и об именовании файлов проекта. Чаще всего применяются следующие имена: главная страница – это index.html, стили проекта styles.css, скрипты scripts.js или app.js, минимизированные версии файлов имеют префикс .min, картинки носят не пространные названия на русском языке или набора цифр, а отражают то, что на них изображено, например, button.png, download-icon.png, logo.png и т.д.

Работа над проектом

Итак, определившись с редактором кода, структурой мы можем приступать к разработке. Прежде всего стоит отметить, что вёрстка страницы делается поэтапно: сначала пишется HTML-структура (HTML-код), затем добавляются стили, а после, если необходимо, пишутся скрипты (JS), добавляются необходимые плагины и библиотеки.

Учитывая вышесказанное, мы можем условно разделить работу над проектом на следующие этапы:

Написание HTML

Сейчас при написании HTML кода уже смело можно использовать тэги и элементы разметки, которые появились вместе с стандартом HTML5, если вам необходимо поддерживать старые браузеры, то можно использовать, например, плагин html5shiv (https://github.com/afarkas/html5shiv), который обеспечивает поддержку новых стандартов в старых браузерах или библиотеку Modernizr (https://modernizr.com/) (html5shiv входит в сборку Modernizr), которая определяет возможности браузера, с помощью которого просматривается сайт.

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

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

При написании разметки мы так же сразу можем прописывать элементам классы и идентификаторы.

Правила именования классов

В проекте во всём должен быть порядок: от структуры проекта до имен классов, разметки и написания кода. Если при разметке важно следить за типом информации и размещением её в соответствующих блоках (заголовок, список, ссылка, строчный элемент, параграф и пр.), то при именовании классов и идентификаторов важно соблюдать здравый смысл. Классы должны давать абстрактное понятие о блоке, к которому они относятся, чтобы код было легче читать, а затем и писать стили. В принципе здесь не должно быть ничего сложного, если мы размечаем меню, то логично содержащему блоку дать класс .nav или .navigation, если это блок с текстом, то можно дать ему класс .block-text и т.д.

БЭМ

На сегодняшний день есть один популярный подход, который касается принципов построения проекта в целом, но на данном этапе нас интересует именно именование классов. Подход называется БЭМ и расшифровывается, как Блок Элемент Модификатор.

Вкратце можно описать данный подход, как некое соглашение по именованию классов и представлению разметки страницы. Каждый элемент страницы являет собой сущность, которая может существовать независимо от контекста, тогда мы говорим о Блоке (.block) или же только в контексте другой сущности, тогда мы говорим об Элементе (.block__element). Каждый Блок или Элемент могут иметь различные модели представления: цвет, форму, прозрачность и пр. За подобные свойства будет отвечать Модификатор (.block__element_mod).

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

Более полная информация о методологии: https://ru.bem.info/

SMACSS

Так же существует подход SMACSS (расшифровывается данный акроним как Scalable and Modular Architecture for CSS – Масштабируемая и Модульная Архитерктура для CSS), который разделяет понятие о классах и разметке на несколько уровней: базовый, макет, модуль, состояние, тема.

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

В данном подходе используются следующие соглашения по именованию. Уровни определяются при помощи префиксов и соответствующего буквенного обозначения:

• Макет: .l- или .layout-
• Так как модули составляют основную часть проекта именовать их, используя префикс module- избыточно. Поэтому для них используются имена как есть, например: .example {}, .afisha {} и пр.
• Состояния имеют префикс .is-, например .is-hidden {}
• Уровень Темы именуется подобно модулям.

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

Информация о методологии и онлайн книга: https://smacss.com/
Русскоязычный перевод книги по SMACSS: https://github.com/andrew—r/smacss

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

Небольшой курс по основам HTML: Смотреть

Написание CSS

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

Стоит упомянуть о 2-х CSS файлах-дополнениях: normalize.css и reset.css.

Reset.css

Изначально в проектах повсеместно использовался reset.css, написанный Эриком Мейером. Цель данного свода правил – сбросить стили браузера, которые он по умолчанию использует для отображения элементов разметки. Таким образом при использовании reset.css нам не нужно переписывать стили браузера, по сути мы работаем с «чистым листом» и можем сосредоточиться на написании собственных стилей с нуля.

Normalize.css

Normalize.css наоборот, не сбрасывает все стили «в ноль», а нормализует их, приводит отображение стилей проекта к более-менее однообразию во всех современных браузерах.

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

Так же стоит упомянуть о, так называемом, «быстром сбросе», когда мы абсолютно для всех элементов страницы с помощью селектора * прописываем свойства {margin: 0; padding: 0}. Таким образом мы сбрасываем все внутренние и внешние отступы для всех элементов страницы. Но данную технику не рекомендуется использовать, так как она замедляет процесс отрисовки страницы, да и по сути имеет мало смыла (на мой взгляд).

Так же стоит отметить, что все размеры и отступы берутся непосредственно из дизайн-макета. Для получения данных значений нам необходимо использовать инструмент «линейка» и направляющие (речь про инcтрументарий Adobe Photoshop), а затем переносить полученные значения в код. Если мы работаем с фиксированным макетом, то значения переносятся в пикселях как есть, если же у нас «резиновый», то значения нужно переводить в проценты. Основная формула – это ширина элемента, делённая на ширину контекста (ширина содержащего блока). Например, если блок, содержащий текст и картинку имеет на макете ширину 400px, а блок с текстом в нём должен иметь ширину 340px, то в процентном выражении это будет (340 / 400) * 100%, то есть 85% будет занимать блок с текстом.

Не стоит перегружать ваши стили чрезмерной специфичностью, например, если мы хотим, чтобы ссылка внутри списка имела красный цвет, то не обязательно записывать всю линейку классов и тэгов: .main –nav ul li a, достаточно просто указать .main-nav a. Слишком «специфичные» правила делают правила контекстно зависимым и заставляют вас писать лишний код, а так же влияют на скорость отрисовки страницы, так как при разборе правил CSS парсер читает их справа налево и ему сначала, если брать описанный выше пример, нужно взять все ссылки (a), затем отбросить все ссылки, которые не лежат в li и т.д. пока он не доберётся до содержащего класса.

Специфичность кода, так же означает чрезмерную привязку к базовым тэгам. Например, если мы хотим, чтобы элемент внутри .block был синим и при разметке использовали элемент span (в правилах мы написали .block span {background-color: blue}), то при замене его на div, например, нам нужно будет написать новое правило уже для div внутри .block. Таким образом наш код будет обрастать ненужными правилами, которые по сути дублируют друг друга. Гораздо проще определить всего лишь один класс (класс элемента), который при присвоении внутренним элементам будет приводить нас к желаемому результату.

Ещё один пример контекстной зависимости кода – это использование имен тэгов вместе с именами классов, например, div.block {display: block}. Если мы захотим тот же класс применить к span, то нам придётся написать опять span.block {display: block} или span.block, div.block {display: block}, что в любом случае приведёт к увеличению кода на лишнюю строчку.

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

Если, вы используете правила, относящиеся к спецификации CSS3, то не поленитесь проверить необходимость использования браузерных префиксов на сайте http://caniuse.com.

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

Полезные ссылки и материалы:

Написание JS

Итак, заключительным этапом является написание JS скриптов. При создании веб страниц стало, практически, стандартом использование библиотеки jQuery, которая позволяет с лёгкостью манипулировать элементами web-страницы (DOM узлами), навешивать прослушку событий, отправлять запросы на сервер, обрабатывать результат выполнения и пр. Но не стоит слепо доверять трендам, на сегодняшний день нативный JavaScript достиг такого уровня, что вам возможно уже не нужен jQuery. Поэтому, прежде чем слепо прикреплять jQuery, стоит задуматься, так ли он нужен для ваших задач и не достаточно ли встроенных возможностей языка JavaScript.

Есть неплохой ресурс, который приводит альтернативы одних и тех же манипуляций на языке JavaScript и с помощью библиотеки jQuery: http://youmightnotneedjquery.com/, так же неплохим подспорьем является сайт https://developer.mozilla.org/ru/, на котором, помимо описания методов и свойств JavaScript, можно найти полифиллы для тех или иных методов (библиотека или часть кода, которая добавляет в старые браузеры поддержку возможностей современных функций и методов JavaScript).

Важно отметить, что не рекомендуется использовать JavaScript для стилизации, то есть не стоит для того или иного объекта DOM (элемента страницы) добавлять портянку CSS свойств с помощью JavaScript, чтобы выделить его состояние и пр. Рекомендуется использовать классы, то есть заранее в CSS определить классы-состояния (активный, не активный, скрытый, использованный и пр.) и при манипуляции элементами просто добавлять или убирать соответствующие классы.

Например, у нас есть элемент списка с классом .list__item, для того, чтобы показать активный элемент в данный момент (выбран пользователем) или нет, можно просто добавить класс (.list__item—active), а не прописывать все стили, присущие этому классу в JS:

document.querySelector(‘.list__item’).style.color = ‘red’;

и т.д.
Небольшой пример с возможными способами присваивания класса (присвоение модификатора происходит при нажатии на зелёный квадрат): http://jsbin.com/.

Не рекомендуется решать задачи, которые явно относятся к уровню CSS с помощью JavaScript, пытаясь как-то выровнять объект или добавить ему стили при наведении и пр.

Опять-таки, возвращаясь к теме Mobile First, нельзя не упомянуть о 2-х концепциях, которые коррелируют с данной техникой. Progressive Enhacement и Graceful Degradation, что переводится как прогрессивное улучшение и последовательное ухудшение. Данные принципы описывают 2 разных подхода к разработке: в первом случае мы разрабатываем наш сайт, пишем скрипты с учётом старых браузеров и систем или же определяем поведение при невозможности запуска скриптов, а затем постепенно улучшаем скрипт, вводя современные функции и методы, таким образом мы получаем сайт, который будет одинаково хорошо работать в старых и новых браузерах и средах (то же касается и css).

При Graceful Degradation подход противоположный – мы разрабатываем для современных браузеров и, лишь, потом начинаем вносить доработки и изменения с учётом старых версий.

Подход Mobile First чем-то схож с Progressive Enhacement.

Проверка кода

После написания html, css и js для нашей страницы необходимо проверить всё ли сделано верно. Для этого можно использовать online средства:
Благодаря данным сервисам можно проверить не забыли ли вы где-то закрыть тэг, верно ли используете параметры и атрибуты, всё ли в порядке с вашими стилями и правилами в них, а так же проверить ваш код на правильность написания функций, методов и пр.

Статьи с рекомендациями по написанию JS, HTML и CSS:

Средства автоматизации

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

960GS

Мы уже говорили об этом средстве разработки в разделе про модульные сетки и дизайн. Нужно сказать, что 960GS предлагает не только макеты для создания дизайна, но и свою систему именования классов. Используя предлагаемые классы при вёрстке и при подключении css файла системы в проект, блоки сайта будут выстроены по этой сетке, что сэкономит время на написании практически того же самого самостоятельно.

<div>
  <div>
      <div>
          ...
      </div>
      <div>
          ...
      </div>
      <div>
          ...
      </div>
  </div>
  <div>
      ...
  </div>
</div>

Emmet

Emmet – это средство работы с html и css (http://emmet.io/). Плагин для работы с данным средством можно установить, например, в Sublime Text, тогда у вас появляется возможность не писать громоздкие куски кода на html и css, а записывать их в строчку, раскрывая затем в полноценную разметку. Например, строка .block>ul.list>li.list__item*3, может быть раскрыта в полноценный код:

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

Затем вам просто необходимо вписать текстовые значения в элементы списка. То же касается и css: строка w:100px+h:150px+bgc:#ff0 раскрывается в:

width: 100px;
height: 150px;
background-color: #ff0;

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

Jade

Далее стоит упомянуть и о таком языке работе с шаблонами, как jade (http://jade-lang.com/). Опять-таки, с помощью jade писать html становится быстрее и удобнее, а так же появляется возможность создания переиспользуемых блоков кода и миксинов, передавая которым на вход те или иные параметры мы будет получать нужную нам разметку. Благодаря jade в проекте, касательно разметки и написания страниц, может поддерживаться модульность, а часто используемые названия и блоки кода могут выноситься в качестве переменных (названия, имена страниц и пр.) или миксинов в отдельные файлы настроек и файлы, соответственно. Для работы с jade, а точнее для преобразования написанного кода из jade в html, необходимо использовать командную строку, а так же установить на ваш компьютер платформу nodejs (https://nodejs.org/en/, http://nodejs.ru/).

Командная строка

Работа в командной строке так же может ускорить некоторые этапы работы над проектом, например, создание папок и файлов. Запустив консоль в директории проекта и набрав в ней всего лишь одну строку:

mkdir project && cd project && mkdir css && touch css/styles.css && mkdir images && mkdir js && touch js/app.js && touch index.html

После нажатия enter мы получим папку project в которой будут находиться папки css, images, js, в папках css и js файлы styles.css и app.js, соответственно, а в корне project лежать файл index.html. Таким образом мы сэкономили время на создание папки, написание её названия, создание файлов и пр. Так же командная строка используется для работы с остальными средствами автоматизации.

Sass

Далее стоит поговорить о таком языке как Sass (http://sass-lang.com/). Данный язык упрощает работу с css. Благодаря Sass можно записывать вложенные классы, проводить математические вычисления прямо в коде, выносить переиспользуемые величины в качестве переменных в отдельные файлы или в начало файла, что в значительной степени упрощает дальнейшую работу со стилями и упрощает изменение тех или иных величин, так как они все будут храниться в одном месте и не нужно будет «ходить» по всему проекту и вносить соответствующие правки. Так же, благодаря Sass в проекте можно придерживаться принципа модульности, храня части разметки в соответствующих файлах и подключать их все в основной, затем с помощью консольной команды можно собрать весь код в один css файл, так же поддерживается сборка результирующего файла на лету по мере написания стилей. Опять-таки для работы с Sass потребуется командная строка. Процесс установки пакета можно изучить здесь: http://sass-lang.com/install.

HTML5Boilerplate

HTML5Boilerplate (https://html5boilerplate.com/) представляет собой заранее скомпонованный проект, в котором уже есть index.html, normalize.css и пр. В index.html, например, уже заранее прописаны основные куски кода, которые необходимы при написании html страницы. Проект позволяет скачать архив со всеми файлами как есть или же использовать кастомную сборку: http://www.initializr.com/. Опять-таки, принцип прост: зачем тратить время на написание одних и тех же строк или на проделывание одних и тех же манипуляций, если мы сразу можем сосредоточиться непосредственно на работе с проектом.

Gulp и Grunt

Gulp (http://gulpjs.com/) и Grunt (http://gruntjs.com/) представляют собой сервисы запуска задач, которые описываются в основных файлах данных сервисов, выполняются с помощью совместимых модулей и запускаются на выполнение с помощью консоли.

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

Оба сервиса используют различный подход в описании выполнения задач, но суть их работы одинакова. Полезным будет данное сравнение: http://frontender.info/gulp-grunt-whatever/

Так же многие сервисы вроде autoprefixer (автоматическая простановка браузерных префиксов), jshint (проверка JS кода на валидность) могут быть установлены как сторонние плагины в текстовом редакторе (Sumblime Text, Atom, Brackets) и инициализированы при нажатии определённого сочетания клавиш.

Bootrstrap, Foundation, Material Design Lite

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

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

Со всеми возможностями и примерами можно ознакомиться на соответствующих сайтах:

Данное описание не является исчерпывающим и представляет собой лишь поверхностный взгляд на некоторые технологии. Но прежде чем пускаться во все тяжкие, используя средства автоматизации, библиотеки, framework’и, готовый код и прочее, стоит, всё-таки, изучить основы работы с html, css и js.

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

Как создать сайт?

Отзывы от наших читателей

Отзыв от Микута Олеси

Купленные курсы:

Фреймворк Bootstrap: практика адаптивной верстки от А до Я

Фреймворк CakePHP: с нуля до гуру

Интернет-магазин на Joomla

WordPress-Профессионал

WordPress-Мастер: от Личного блога до Премиум шаблона

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

JavaScript&jQuery с нуля до профи

Интернет-магазин под ключ

Корпоративный сайт под ключ

Благодаря изучению основных 3-х курсов (Интернет-магазин под ключ, JavaScript&jQuery с нуля до профи и Практика верстки под мобильные устройства) я создала уже более 10 сайтов, причем среди них есть интернет-магазины, сайты компаний, лендинг, многоязычный сайт. Есть сайты на WordPress. Один достаточно успешный сайт — copacabanaclub.kz, который не так давно победил в конкурсе на лучший проект, созданный клиентами Webformyself.com.

Мое знакомство с сайтом webformyself.com началось уже несколько лет назад. Сначала меня просто заинтересовала идея научиться создавать сайты, я начала «ходить» по разным сайтам, искать информацию, купила несколько курсов на других сайтах. Освоила html, css, основы PHP и MySQL. Но как объединить эти знания и создать по-настоящему рабочий, полноценный проект — это осталось не понятно.

Однажды так же случайно наткнулась на сайт webformyself.com. Прочитала некоторые статьи, посмотрела видео-уроки. Мне понравилось как доходчиво объясняют многие непонятные для меня моменты.

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

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

После изучения курса по созданию интернет-магазина я научилась правильно создавать БД для крупных проектов, отделять логику работы сайта от его оформления (по модели MVC), создавать множество полезных функций (авторизация пользователей, корзина), поняла как создается административная панель сайта, а также заполнила многие пробелы в знаниях по PHP.

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

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

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

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

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

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

Отзыв от Фоминова Алексея

Купленные курсы:

WordPress-Профессионал

WordPress-Мастер: от Личного блога до Премиум шаблона

Интернет-магазин под ключ

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

Начал я с полного нуля, до этого посмотрев курс Евгения Попова HTML, СSS.

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

Исключительно Ваша репутация в сети, и рекомендации других таких же именитых гуру интернета) А также все отзывы интернета только хорошие. Ну и сервис на высоте, видно что ориентация на клиента растет с каждым днем!

Теперь знаю куда смотреть при разбирании сайта на косточки. Научился пользоваться такими программами как локальный сервер denwer, php designer, filezilla, notepad, adobe dreamweaver, photoshop, дополнениями браузеров для быстрой проверки сайтов и нахождении необходимой строчки кода, с чего начинать писать сайт, работа с CMS WordPress, работа с шаблонами WordPress и подстраивание их под свои требования, написания структуры сайта, плана сайта добавления функция на сайт, написание кода с верстки…вообщем устал перечислять, еще кучу всего!!!

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

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

Сейчас цели связаны не с сайтостроением. Но при достижении вернусь к изучению остальных курсов. Следующим этапом будет изучение курса от WebFormyself «Верстка: сайта от основ до конкретного результата» и «Практика верстки под мобильные устройства».

Сейчас занят основами маркетинга в интернете Яндекс, Google, соц. сети и тд и попутно продажи оффлайн. Как только немного разгружусь и появится свободное время вернусь к изучению сайтостроения вместе с WebFormyself, придерживаюсь мнения что своя CMS, это все таки лучший вариант, качественно, чистота кода, профессионально и главное УНИКАЛЬНО!

Курс очень объемный требует только время. Мне понадобилось около месяца в день уделял по 3-4 часа. При изучении вопросы которые возникали, удавалось все решить самому.

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

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

Отзыв от Разумовского Максима

Купленные курсы:

Интернет-магазин под ключ

С помощью приобретенного курса я научился разрабатывать сайты по шаблону MVC. До знакомства с курсом я понятия не имел что такое шаблоны проектирования и зачем они нужны. Но понимание разработки сайтов по шаблонам проектирования стало гигантским скачком в моем развитии как программиста и разработчика сайтов. Кроме того именно этот курс научил меня разрабатывать для сайтов собственные CMS и сейчас мне проще написать для любого сайта собственную панель управления чем использовать и каждый раз затачивать под сайт какой-нибудь WordPress или Jooml-у.

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

Начинал я в далекие 2000-е с изучения XHTML. Тогда еще ни кто не готовил видеокурсы и приходилось собирать информацию по книжкам и тематическим сайтам. Было много длительных перерывов в моем развитии как разработчика и о профессиональном занятии созданием сайтов я даже не предполагал. Сейчас разработка сайтов это моя основная деятельность которая меня кормит. Я уже и не представляю что такое каждое утро ходить на работу. Моя жизнь полностью планируется только мной и зависит только от моей занятости.

На самом деле у меня очень долго не могла проявиться полная картинка процесса создания сайта. Я знал HTML и CSS, мог «слепить» несколько страничек связанных между собой гиперссылками. Но сделать по настоящему что-то стоящее я не мог. Кроме того знаний HTML и CSS было явно не достаточно для полноценной работы. Именно видеокурсы, в том числе кусы webformyself, собрали в моей голове картину «процесс создания сайтов» из обрывков знаний и помогли расширить объем знаний и навыков.

Понимание того, что купив курс «Интернет-магазин под ключ» я научусь писать движки для сайтов, зародили в моей голове маниакальное желание приобрести этот курс. Кроме того в программе курса состояли бонусом полные курсы по PHP и MySql. А это профессиональная информационная база для любого веб-программиста. Т.е. я понимал что я не просто изучу PHP и MySql но и напишу свой движок, при чем не просто движок какого-нибудь сайта визитки, а самый что ни есть настоящий движок интернет магазина.

Купив курс «Интернет-магазин под ключ» я не только изучил PHP и MySql, но и научился создавать собственные CMS для сайтов. Создание каталога товаров, ЧПУ, хлебные крошки, авторизация на сайте, постраничная навигация для сайта. Большей части того что я умею сейчас я обязан именно этому видеокурсу.

Больше всего наверно запомнилось, как я никак не мог вникнуть в суть шаблона проектирования MVC. Наверно раз 7 я просматривал этот момент, в итоге осознание пришло только утром следующего дня. До «жираф», но главное что дошло.

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

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

Отзыв от Деникаева Тимура

Купленные курсы:

Фреймворк Bootstrap: практика адаптивной верстки от А до Я

Практика монетизации блога: от раскрутки до реальных денег

Фреймворк CakePHP: с нуля до гуру

WordPress-Профессионал

WordPress-Мастер: от Личного блога до Премиум шаблона

Карьера веб-дизайнера. С нуля до первой продажи за 14 дней

Мастер веб-дизайна 2.0

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

JavaScript&jQuery с нуля до профи

Интернет-магазин под ключ

Практика резиновой верстки

Премиум клуб

WordPress-Ученик

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

Я боялся, что у меня ничего не получится. Были большие сомнения стоит ли начинать в таком возрасте???

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

Я многому научился и до сих пор черпаю огромные знания в области Веб-программирования из видео уроков Андрея и….. Андрея ).

Так как я все время говорю не об одном курсе, то хочу сказать, что в каждом из них есть свои запоминающие моменты. Трудно сказать, что запомнилось больше всего. Правильнее будет сказать, что «воды» там совершенно НЕТ. Все четко, лаконично и на профессиональном уровне!!!

Через полгода я планирую уже смело брать заказы. Цель я перед собой поставил. В моих планах со временем создать свою Web студию. И, конечно же, продолжу свою преподавательскую деятельность, но уже в области веб-программирования.

Я безумно рад, что мне очень повезло познакомиться с командой Webformyself. Они действительно, делают неоценимый вклад в область Веб индустрии. Хочу отдельно выразить огромную благодарность Бернацкому Андрею и Андрею Кудлаю. Если один из них Автор с Большой Буквы, то у другого это просто ДАР!!! Ребята, ВЫ МОЛОДЦЫ!!!

Автоматический скребок WordPress и плагин Content Crawler

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

• Некоторые из них стремятся охватить больше пользователей, делясь своим контентом с помощью систем обмена контентом, таких как RSS (Rich Site Summary) или API (Application Programming Interface).
• Некоторые из них позволяют публиковать часть своего контента, просят дать им обратную ссылку, чтобы просмотреть остальное и нацелить больше просмотров.
• Некоторые в обмен на публикацию своих продуктов на вашем сайте платят вам в рамках своих программ аффилированного маркетинга и стремятся продавать больше.
• Некоторые разрешают публиковать свой контент, кроме коммерческого использования.
• Некоторые ссылаются на дополнительные методы защиты, чтобы не соскрести их содержимое.

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

• В случае необходимости, вы можете связаться с владельцем и запросить разрешение на публикацию контента на вашем сайте.
• Используя плагин SEO, который позволяет вам определять канонический URL, вы можете указать, какой источник используется.
• Измените контент на другой язык с помощью функции перевода или извлеките новый контент с помощью сервисов прядильщика контента.
• С помощью функции шаблона вы можете добавить кредитную информацию или обратную ссылку, направленную на исходный URL, в конец контента, например, в режиме плагина автоматической публикации WordPress.
• Вы можете опубликовать часть содержимого, сократив ее с помощью функции «Найти и заменить», вместо публикации всего содержимого.
• Вы можете извлечь содержимое в статусе «Черновик» и опубликовать его после внесения изменений.

Как создать веб-сайт с нуля

Вы хотите узнать, как создать веб-сайт с нуля , но не знаете, как?

Вы умеете кодировать HTML? Вы знаете CSS? JavaScript?

Не волнуйтесь… тебе не нужно ничего знать об этом. В этом уроке я дам вам пошаговое руководство.

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

Итак, приступим!

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

Шаг 1. Выбор платформы

Первым шагом в создании веб-сайта является выбор CMS (системы управления контентом).Существует так много разных платформ CMS:

• Wix
• Squarespace
• Drupal
• Joomla
• WordPress

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

Однако, на мой взгляд, WordPress, несомненно, лучшая платформа. И 22 672 100 активных сайтов соглашаются.

Почему WordPress?

1. Это так просто в использовании.Вам не обязательно знать HTML или CSS. Настраиваемые плагины и темы могут сделать ваш сайт таким, каким вы его хотите.
2. Доверие. Доля рынка составляет 59,7%.
3. Удобно для мобильных устройств. В мире мобильных устройств и планшетов это очень важно.
4. Это бесплатно! Все, что вам нужно сделать, это купить доменное имя и хостинг.
5. У него очень большое сообщество, готовое помочь с вопросами.

В оставшейся части статьи предполагается, что вы собираетесь использовать WordPress.

Шаг 2. Выбор службы хостинга

Как и платформы CMS, существуют сотни служб веб-хостинга. Они могут варьироваться от 3 долларов в месяц до 500 долларов в месяц за выделенную платформу веб-хостинга.

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

Итак, прежде чем мы продолжим, щелкните изображение ниже, чтобы перейти в Bluehost.

Вы можете получить базовый план за 3,95 доллара в месяц. Но если вы получите план Plus, вы получите больше функций, в том числе:

• Неограниченное количество веб-сайтов
• Высококачественный веб-хостинг
• Бесплатный конструктор сайтов
• Установка и поддержка WordPress в один клик
• Эксперты по спаму

Bluehost имеет все, что вам нужно для настройки вашего присутствия в Интернете.

Шаг 3. Выбор доменного имени

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

Предполагая, что вы используете Bluehost, вы можете зарегистрировать доменное имя прямо на их сайте. И я забыл упомянуть, Bluehost дает вам БЕСПЛАТНЫЙ домен с каждой новой учетной записью хостинга!

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

1. Ваше доменное имя должно быть легко вводимым — пусть оно будет коротким
2. Вы должны использовать ключевые слова для своего бизнеса. Например, если у меня веб-сайт, посвященный садоводству, то www.urgentcare.com , вероятно, не лучшая идея.
3. Избегайте цифр и дефисов.
4. Сделайте его запоминающимся
5. Сделайте масштабируемым. Например: www.drones.com специфичен и может подойти, если вы собираетесь говорить только о дронах.Но в будущем, если вы захотите добавить на свой сайт другую электронику, домен может не работать. А изменение доменного имени позже — это боль!
6. Использование .com по-прежнему остается лучшим расширением. Это предполагает, что вы не являетесь благотворительной организацией, муниципалитетом, некоммерческой организацией и т. Д.

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

Шаг 4 — Установка WordPress

Bluehost имеет установку WordPress в один клик.И если вы не используете Bluehost, большинство других веб-хостов будут интегрировать установку в один клик в свою платформу.

Шаг 5 — Создайте свой сайт

Теперь, когда вы приобрели хостинг, доменное имя и установили WordPress, пришло время выбрать тему.

Тема — это шаблон того, как будет выглядеть ваш сайт; это стиль вашего сайта. Есть тысячи тем на выбор; некоторые бесплатные и самые платные. WordPress поставляется с несколькими бесплатными темами, с которых вы можете начать.

Для начала войдите в свой WordPress, используя следующий адрес: http: // www. ВАШЕ ИМЯ .com / wp-login

Затем введите ваше имя пользователя и пароль. При первом входе в систему вы попадете на панель управления вашего сайта. Это будет выглядеть примерно так:

Чтобы установить тему, перейдите в «Внешний вид», а затем в «Темы».

Если вы хотите увидеть все бесплатные темы, которые доступны, нажмите кнопку «Добавить новую тему». Как только вы найдете свою тему, вам нужно сначала установить ее.Нажмите кнопку «Установить».

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

Темы Premium также имеют поддержку и постоянные обновления, улучшающие качество темы.

Я рекомендую тему под названием Generate Press. Это чисто и оптимизировано для SEO.

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

После активации темы можно приступать к написанию контента!

Шаг 6. Установите подключаемый модуль Classic Editor

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

Однако есть плагин, который упростит редактирование ваших страниц и публикаций.Он называется плагином Classic Editor. Если вы знакомы с Microsoft Word, то этот редактор будет вам знаком.

Чтобы установить плагин, в меню слева выберите «Плагины», затем выберите «Добавить новый».

Там, где написано «Искать плагины …» в строке поиска в правом верхнем углу, введите «Классический редактор» . После того, как вы нашли плагин, вам нужно будет его установить. Для этого нажмите кнопку «Установить сейчас».

После установки плагина его необходимо активировать.Кнопка «Установить сейчас» изменится на «Активировать», и вы просто нажмите ее, чтобы активировать ее. Теперь вы готовы использовать классический редактор.

Шаг 7 — Создайте страницу или сообщение

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

Давайте начнем с создания вашей первой страницы:

1. Щелкните ссылку «Страницы», которую вы увидите в меню WordPress. Затем нажмите «Добавить»

2. Введите заголовок страницы, где написано «Добавить заголовок».

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

4. Когда вы закончите, нажмите кнопку «Сохранить черновик», чтобы сохранить свою работу.Я рекомендую вам сохранять часто, чтобы не потерять свою работу!

5.Если вы хотите увидеть, как выглядит ваша страница, нажмите кнопку «Предварительный просмотр».

6. Когда у вас будет готовая финальная версия вашего веб-сайта, вы можете опубликовать ее на своем сайте, нажав кнопку «Опубликовать».

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

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

Чтобы классифицировать ваше сообщение, вам сначала нужно добавить категорию. Это можно сделать двумя способами: в левой части панели инструментов в меню «Сообщения», затем «Категории» или в вашем сообщении справа от текстового редактора. Щелкните «Добавить новую категорию».

После того, как вы создадите, установите флажок рядом с категорией, которую вы создали.

Шаг 8 — Создание меню

Добавление страниц, сообщений или категорий на главную панель навигации легко с помощью создания меню. Чтобы создать меню, перейдите в меню «Внешний вид» и нажмите «Меню».

Оказавшись там, введите название своего меню, где написано «Имя меню», а затем нажмите кнопку «Создать меню».

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

Затем вы можете добавить нужные страницы в это новое меню, которое вы создали.По завершении нажмите «Сохранить меню».

Шаг 9 — Опубликуйте свой веб-сайт

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

Вверху страницы вы увидите «Скоро будет активен».

Щелкните по нему, и вы попадете на другую страницу, где вы можете активировать свой сайт, нажав кнопку «Запустить сайт».

Поздравляем!

Вы успешно опубликовали свой первый сайт!

Хотите узнать, как создавать красивые, полнофункциональные веб-сайты с партнерским маркетингом? Если это так, я настоятельно рекомендую эту программу, которая научит вас всему, что описано в этом руководстве, а также многому другому!

Вот мое видео на YouTube, если вы хотите создать веб-сайт менее чем за 15 минут!

Хотите узнать, как создать успешный бизнес в Интернете?

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

Отказ от ответственности: Надеюсь, вам понравится эта статья. Обратите внимание, что любые ссылки в этой статье могут быть партнерскими ссылками. Это означает, что если вы нажмете на одну из ссылок и зарегистрируетесь, я могу получить за это компенсацию. Любые деньги, которые мы зарабатываем, поддерживают работу этого сайта и позволяют нам создавать высококачественные обзоры. Для получения дополнительной информации, пожалуйста, прочтите мою страницу раскрытия информации о партнерских программах. Спасибо!

Это не программа быстрого обогащения, и мы не верим в мгновенный успех.Мы верим в упорный труд, честность и развитие ваших навыков, если вы хотите зарабатывать больше в финансовом отношении. В соответствии с законом мы не можем и не даем никаких гарантий относительно вашей способности получать результаты или зарабатывать деньги с помощью каких-либо наших продуктов или услуг, а также продуктов и услуг, которые мы рекомендуем. Средний человек, который покупает любую практическую информацию, практически не получает результатов. Любые ссылки или примеры, использованные на этой странице или кем-либо на этой странице или в видео, реальны и задокументированы, но используются исключительно в качестве примера.Ваши результаты будут различаться и зависеть от многих факторов, включая, помимо прочего, ваше прошлое, опыт и трудовую этику. Любой бизнес связан с риском, а также с массированными и последовательными усилиями и действиями. Если вы не согласны с этим, НЕ ПОКУПАЙТЕ ПРОДУКТЫ НА ЭТОЙ СТРАНИЦЕ.

Создать сайт с нуля

Это действительно будет очень просто!

Для создания сайта:
— купить хостинг;
— зарегистрировать доменное имя;
— установить CMS;
— выбор темы;
— Установить плагины;
— создание страниц;
— наполнение информацией;
— Подключить SSL-сертификат.

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

Этапы создания веб-сайта с нуля

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

1. 1. 1. 1. 1. Самостоятельное создание сайтов без

            2. организация профессионального дизайнера, то есть конструктора сайтов. Создайте свой собственный сайт — тот, который хотите! Выбирайте из сотен шаблонов и создайте свой сайт уже сегодня — кодирование не требуется!

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

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

Все, что вам нужно, это 1-2 часа свободного времени, чтобы заполнить руководство и создать веб-сайт.

вещей, необходимых для создания веб-сайта

• Доменное имя (ваш собственный веб-адрес, www.YourSite.com)
• Хостинг веб-сайтов (услуга, на которой размещается ваш веб-сайт)
• WordPress (бесплатная, часто используемая платформа для веб-сайтов)

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

Если у вас есть домен и хостинг, вы можете создать веб-сайт WordPress. WordPress — самая популярная платформа для создания веб-сайтов, которую используют 35% всех веб-сайтов в Интернете.

Настройка сайта WordPress обычно представляет собой простой процесс в один клик через службу веб-хостинга.

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

Сайт с нуля

Чтобы создать веб-сайт, в первую очередь вам понадобится доменное имя.

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

Доменное имя этого веб-сайта: web-sites1.com . Твое может быть что угодно.

Доменные имена могут стоить от 10 до 50 долларов в год. Обычная цена — около 15 долларов.

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

• Если вы создаете веб-сайт для бизнеса , ваше доменное имя должно совпадать с названием вашей компании. Например: YourCompanyName.com
• Если вы планируете создать для себя личный веб-сайт , то YourName.com может стать отличным вариантом.
• Используйте «общее» расширение имени домена, например .com , .net или .org , если ваша цель — международные посетители. Используйте «локальное» расширение имени домена, например .de , .fr или .ru , если ваша цель — посетители, ориентированные на страну.

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

Сайт с нуля

Помимо доменного имени, вам также понадобится хостинг веб-сайтов (веб-хостинг).

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

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

Сайт с нуля

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

Планы хостинга

Bluehost начинаются с $ 2,75 / мес с нашей скидкой по ссылке и предлагают все необходимые функции для создания веб-сайта.

Чтобы получить учетную запись веб-хостинга, просто посетите Bluehost и нажмите «Начать сейчас».

Сайт с нуля

Оглавление (шаги для запуска веб-сайта). Сайт с нуля :

1. Выберите доменное имя
2. Зарегистрируйте домен и зарегистрируйтесь на веб-хостинге
3. Создать веб-сайт с помощью WordPress (через веб-хостинг)
4. Настройте дизайн и структуру своего веб-сайта
5. Добавить важные страницы и контент
6. Настройка меню навигации
7. Добавить интернет-магазин (необязательно)

Готовы? Приступим…

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

Сайт с нуля

Способы заработка на собственном сайте

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

контекстная реклама

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

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

Придумайте идею для сайта. Любая работа или профессия впервые покажутся трудными.

Всем удачи !!!

Лучший способ создать сайт с нуля

САМЫЙ БЫСТРЫЙ СПОСОБ СОЗДАНИЯ ВЕБ-САЙТА

ЧАСТЬ 1. Доменное имя от GoDaddy

• Многие люди откладывают создание веб-сайтов (по деловым или личным причинам), потому что считают это сложным или дорогостоящим.
• Но в этой серии видеоуроков мы покажем вам самый быстрый способ создания веб-сайта, шаг за шагом с WordPress с нуля (и очень дешевый).
• Да, вы можете создать БЕСПЛАТНЫЙ веб-сайт. Но для экономии нескольких долларов это, как правило, не лучший способ создать веб-сайт.

---

ЧАСТЬ 2: Получите хостинг HostGator

• В этом видео мы получим дешевый веб-хостинг и покажем вам лучший способ создания веб-сайта с нуля в этом пошаговом руководстве по WordPress.
• Получите скидку 25% на хостинг с этим кодом купона HostGator 2012: ЭФФЕКТИВНОСТЬ (просто введите его во время оформления заказа)
• Перейдите по этой ссылке для получения дешевого веб-хостинга: http: //www.drefficiency/hostgator

=== ВИДЕО ИНДЕКС и ОБЗОР ===
0:12 — Шаг 1. Найдите веб-хостинг
* Пожалуйста, перейдите на http://www.DrEfficiency.com/hostgator

1:07 — Шаг 2. Выберите план веб-хостинга
* Рекомендуйте план «Детский»
* Это позволяет использовать более 1 домена

1:39 — Шаг 3.Зарегистрируйтесь на веб-хостинге (Host Gator)

2:52 — Шаг 4. Войдите в панель управления Host Gator

3:26 — Шаг 5. Обновите серверы имен
* Прямо сейчас, когда мы переходим на www.welovepreloved.com, он переходит на Godaddy.
* Нам нужно обновить серверы имен, чтобы вместо этого он перешел на Host Gator.
* Сервер имен преобразует доменные имена (например, www.welovepreloved.com) в IP-адреса (например, 124.139.62.132).
* Нам нужно войти в Godaddy и изменить серверы имен на те, которые нам предоставил Host Gator.