EOMY.NET
Хостинг EOMY.NET: Форум поддержки
 
 FAQFAQ   ПоискПоиск   ПользователиПользователи   ГруппыГруппы   РегистрацияРегистрация 
 ПрофильПрофиль   Войти и проверить личные сообщенияВойти и проверить личные сообщения   ВходВход 
RSS Feed  

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

 
Начать новую тему   Ответить на тему    Список форумов EOMY.NET -> HTML и CSS
Понятные уроки по основам создания сайта для новичков.
Автор Сообщение
yubirk



Зарегистрирован: 03.04.2015
Сообщения: 17

1516 Монеты

СообщениеДобавлено: Вс, 05 Апр, 2015 12:01    Заголовок сообщения: Понятные уроки по основам создания сайта для новичков. Ответить с цитатой

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

1. Интерактивный сайт с возможностью бесплатного обучения основам HTML/CSS htmlacademy

2. Бесплатные понятные видеоуроки от сайта school-php.com

Р.S. Предлагаю в данной теме выкладывать русскоязычные ресурсы и полезные материалы для разработки сайтов предназначенные для новичков.
Вернуться к началу
Посмотреть профиль Отправить личное сообщение
yubirk



Зарегистрирован: 03.04.2015
Сообщения: 17

1516 Монеты

СообщениеДобавлено: Вс, 05 Апр, 2015 13:10    Заголовок сообщения: Ответить с цитатой

Как верстать сайты?
БЫСТРЫЙ СТАРТ
(Если Ты продвинутый новичок):


1. Если есть возможность, то используй для работы MAC вместо PC. Он быстрее и надежнее. (Посмотри это видео: http://goo.gl/oGoN7M
Сам пользуюсь Macbook Pro Retina 15" и очень доволен. На PC с Windows вряд ли перейду обратно;

2. Используй программку Alfred (для MAC: http://www.alfredapp.com/ ) и Launchy (для Windows: http://www.launchy.net/) для быстрого вызова других программ. Это уже реальная необходимость в постоянной работе за компьютером;

3. Начни с прочного фундамента.
Пройди эти уроки по азам HTML и CSS:
http://htmlacademy.ru/courses/4 ;

Далее пройди эти очень важные уроки:
- по HTML (блочная модель документа): http://htmlacademy.ru/courses/44
- по CSS (наследование и каскадирование): http://htmlacademy.ru/courses/66
Достаточно разобраться с азами HTML и CSS, затем понять блочную модель и разобраться с каскадированием и наследованием в CSS. С этим багажом уже можно смело двигаться дальше!

Пройди 1-месячный интенсив. И это будет САМЫЙ БЫСТРЫЙ СТАРТ: http://htmlacademy.ru/intensive
(Промо-код на скидку 10%: 5481e4bdf)

4. Используй продвинутые редакторы кода. Сейчас это Sublime Text, Brackets и Atom
Скачать их можно здесь:
Sublime Text - http://www.sublimetext.com/3
Brackets - http://brackets.io/
Atom - https://atom.io/

5. Для ускорения написания HTML и CSS используй плагин для этих редакторов - Emmet (http://emmet.io/) + еще с десяток плагинов (для Sublime Text):

- Package Control: http://goo.gl/rava0k
- SideBarEnhancements: http://goo.gl/feP6Zr
- AdvancedNewFile: http://goo.gl/bhgmcw
- Emmet: http://goo.gl/QTSldQ
- Bootstrap 3 snippets: http://goo.gl/kfnx5g
- AutoFileName: http://goo.gl/V2ZfpM
- Tag: http://goo.gl/NtoZcp
- ColorPicker: http://goo.gl/Z7Bz4H
- FakeImg.pl: http://goo.gl/T6l6Sb
- WebFont: http://goo.gl/WhLT8V

И еще посмотри мои видео:
- "Как устанавливать плагины для Sublime Text": https://www.youtube.com/watch?v=cCJG-J50TTE ;
- "10 плагинов для Sublime Text 3": https://www.youtube.com/watch?v=FWGKve1c0FY

6. Научись эффективно использовать графические редакторы, для вырезания графики из psd-макетов. Конечно, в основном это Photoshop. Для MAC есть отличная альтернатива в виде программы Pixelmator (намного дешевле в итоге, чем Photoshop).

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

Например:

- WebZap, для мгновенного прототипирования основных элементов web страницы: http://goo.gl/apt1YO
- Pixel Dropr, отличный плагин для кастомизации созданного прототипа :http://goo.gl/KVvrFB
- Doco, очень мощно повышает скорость работы при манипуляциях со слоями разных макетов. Теперь не нужно переключаться между окнами: http://goo.gl/FaUZe3
- Renamy, маленький, но суперудобный плагин, который переименует десятки слоев в один клик. Поставит префиксы, постфикс, нумерацию слоев и даже поддерживает регулярные выражения: http://goo.gl/8WCW5I
- Pixel2Vector, преобразует растровый слой в вектор: http://goo.gl/nt6kwx
- Zeick, преобразует вектор в svg: http://goo.gl/YBZZ8V
- SpecKing, покажет точное расстояние в пикселях от одного элемента до другого и размеры самого элемента. Идеальный инструмент для пользователей Photoshop до версии CC: http://goo.gl/QwNvXc
В фотошопе CC 2014 (15.x) эта функция есть по умолчанию;
- Griddify, часто нужный инструмент для автоматической генерации направляющих в один клик: http://goo.gl/xDZlFG
- CSS Hat, позволяет максимально точно получать css код из любых слоев. Работает реально точнее, чем встроенная такая же функция в самом Photoshop: http://goo.gl/1cgwyD
- Lorem Ipsum Generator, создает любое количество псевдолатинского текст без определенного значения, для заполнения текстовых блоков: http://goo.gl/3ulqPv
- Layrs Control, для легкого редактирования слоев PSD: http://goo.gl/4IBnml
- SpriteOwl, призван облегчить создание CSS спрайтов. Генерирует картинку и css код: http://goo.gl/PUyt1p
Остальная тонна других плагинов здесь: http://madebyvadim.tumblr.com/

UPD: Но идеальный инструмент для верстки на сегодняшний день это "верстальный комбайн" Avocode: http://avocode.com/ Это инструмент из разряда must have!!!

7. Далее для быстрого прототипирования сайтов используй CSS фрэймворк Bootstrap или Foundation. Достаточно знать только HTML, чтобы УЖЕ строить сайты. И даже для мобильных устройств!
Официальный сайт Bootstrap: http://getbootstrap.com/
Перевод на русский официального сайта Bootstrap: http://www.oneskyapp.com/ru/docs/bootstrap
Официальный сайт Foundation: http://foundation.zurb.com/

8. Изучи что такое препроцессоры и как их использовать! Они позволят писать код в разы быстрее!

Для HTML это:
- HAML: http://haml.info/
- SLIM: http://slim-lang.com/
- Markdown: http://daringfireball.net/projects/markdown/
- JADE: http://jade-lang.com/

Для CSS это:
- SASS: http://sass-lang.com/
- LESS: http://lesscss.org/
- STYLUS: http://learnboost.github.io/stylus/

Для JavaScript это:
- CoffeeScript: http://coffeescript.org/
- LiveScript: http://livescript.net/

9. Теперь начинай постепенно автоматизировать свой рабочий процесс. Для этого изучай основы командной строки. Она позволит тебе перейти на качественно новый уровень - использование сборщиков, которые избавят тебя от рутинных задач, таких как сборка проекта, минификация HTML, CSS, JavaScript, оптимизация изображений и много-много чего еще с помощью дополнений.
Вот основные сборщики:
- Grunt (http://gruntjs.com/);
- Gulp (http://gulpjs.com/)
И затем разберись с ракетным менеджером Bower (http://bower.io/). Он позволит прямо из командной строки загружать самые последнии версии jQuery, Bootstrap и любые библиотеки и фрэймворки, которые только вздумается, не заходя на официальные сайты в браузере.

10. Подойдя к этому этапу, ты почти что бог веб разработки и фронтона! Осталось теперь познать Yeoman:
http://yeoman.io/
О да! Это вершина фронтенд-разработки! Это целая экосистема HTML, CSS, JavaScript. Yeoman содержит в себе Grunt и Bower в мощном симбиозе! Свободное владение Yeoman - это все равно что воевать, используя ядерное оружие Smile

P.S. И наконец, главная рекомендация. Найди человека, который уже чего то достиг в веб разработке, которого ты уважаешь, и который будет помогать тебе осваивать фронтенд. Это может происходить удаленно с помощью Skype-сессий и функции "показать экран". Плати ему деньги за занятия и подходи ответственно к делу. Это самый эффективный способ учиться!

Успехов! Wink
Вернуться к началу
Посмотреть профиль Отправить личное сообщение
Показать сообщения:   
Начать новую тему   Ответить на тему    Список форумов EOMY.NET -> HTML и CSS Часовой пояс: GMT
Страница 1 из 1

 


Rambler's Top100   Рейтинг@Mail.ru    



Powered by phpBB © 2001, 2005 phpBB Group