Цель заброшена
Автор не отписывался в цели 7 лет 5 месяцев
Переучиться и стать верстальщиком
В построении плана руководствуюсь двумя очень грамотными на мой взгляд статьями:
Критерий завершения
Подготовленные портфолио и резюме
Личные ресурсы
Ноутбук, время
-
Командная строка
Необходимый инструмент для доступа к радостям жизни: препроцессорам, компиляции шаблонов, запуску таск-раннеров, git и другим полезным вещам.
-
Правильное именование
Проверю все ли в этой теме так просто, как кажется. Имена должны нести в себе смысл. Цель — сделать код хорошо читаемым и легко поддерживаемым.
У новичков часто можно встретить div class=b, или div13 и все в таком духе. Это неправильно. Также нельзя использовать транслитерацию div class=shapka.
Общепринятый язык для именования — английский.-
Слова, часто используемые в CSS-классах https://github.com/yoksel/common-words
-
How to name CSS classes http://bdavidxyz.com/blog/how-to-name-css-classes/
-
-
BOILERPLATE
Типовая структура проекта с минимальным набором файлов и папок. Чтобы не пришлось создавать самому каждый раз, очень советуют разобраться.
-
https://html5boilerplate.com/ - документация
-
https://leveluptutorials.com/tutorials/html5-tutorials/html5-boilerplate - видео на leveluptuts
-
-
Семантика и доступность
Так как в работе должны соблюдаться все семантические особенности, а также обеспечена доступность, то изучаем следующие материлы
-
Семантическая вёрстка. Часть первая https://pepelsbey.net/2008/04/semantic-coding-1/
-
Искусство семантики HTML, часть 1 http://frontender.info/the-art-of-html-semantics-pt1/
-
Семантический HTML — рекомендация с большими выгодами http://www.xiper.net/learn/tegofenshuj/about-semantic.html
-
Продвинутая семантика и доступность https://webref.ru/layout/advanced-html-css/semantics-accessibility
-
Подстраховка web-доступности семантических областей HTML5 через роли WAI-ARIA https://habrahabr.ru/post/240065/
-
http://web-standards.ru/category/articles/ - в тему
-
Semantic HTML https://www.pluralsight.com/courses/semantic-html-2329
-
Основы семантической верстки на HTML5 http://zaurmag.ru/priemy-verstki-html-css/osnovy-semanticheskoj-verstki-na-html5.html
-
What Makes For a Semantic Class Name? https://css-tricks.com/semantic-class-names/
-
-
Изучить Emmet
Набор сниппетов для HTML и CSS, дающий супер-скорость. Изучение документации:
Учим сокращения Эммет(зен-кодинг) в программе Анки http://rublog.orlovmax.com/2013/10/blog-post_3424.html
-
Оптимизация изображений
Во времена быстрого интернета легко забыть о том, что нужно оптимизировать изображения.
Также важно уметь выбрать оптимальный формат графики (jpg, png, gif, svg).
-
Всё, что нужно знать об оптимизации изображений для сайта http://ru.wix.com/blog/2014/07/%D0%BE%D0%BF%D1%82%D0%B8%D0%BC%D0%B8%D0%B7%D0%B0%D1
-
Оптимизация изображений https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization?hl=ru
-
-
Responsive/adaptive верстка
Больше половины трафика в интернете приходится на мобильные телефоны и сделать адаптивный сайт порой намного проще и быстрее, чем разработать отдельную версию под мобильные. Очень важно уметь делать этот вид работ, чтобы быть конкурентноспособным.
Изучение методологии.
-
Адаптивно-отзывчивый: разбираемся в терминологии http://frontender.info/adaptive-vs-responsive-terminology/
-
Наглядно для заказчика: адаптивный и отзывчивый сайт — в чем разница http://blog.sibirix.ru/2015/04/21/adaptive-responsive/
-
Beginner’s Guide to Responsive Web Design http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design
-
Understanding CSS Grid Systems from the Ground Up https://www.sitepoint.com/understanding-css-grid-systems/
-
Don’t Overthink It Grids https://css-tricks.com/dont-overthink-it-grids/
-
@media https://webref.ru/css/media
-
Intro to Media Queries https://varvy.com/mobile/media-queries.html
-
Почему Mobile First? https://habrahabr.ru/post/269419/
-
An Introduction to Mobile-First Media Queries https://www.sitepoint.com/introduction-mobile-first-media-queries/
-
FREE COURSE Responsive Web Design Fundamentals by Google https://www.udacity.com/course/responsive-web-design-fundamentals--ud893
-
http://blog.froont.com/9-basic-principles-of-responsive-web-design/
-
https://www.smashingmagazine.com/2016/03/managing-mobile-performance-optimization/
-
http://jgthms.com/web-design-in-4-minutes/
-
-
Освоение графических редакторов Photoshop
Необходимый минимум, чтобы начать работать:
- нарезка и экспорт графических элементов;
- работа со стилями слоя;
- информация о тексте (размер, шрифт, цвет, межстрочный интервал и пр).
-
Photoshop для кодера http://xiper.net/learn/photoshop/
-
Photoshop для HTML‑верстальщика http://nicothin.pro/page/photoshop-dlja-html-verstalshhika
-
Photoshop экшены для верстальщика http://vovanr.com/posts/photoshop-actions/
-
Photoshop - пример нарезки макета для верстки http://gearmobile.github.io/photoshop/photoshop-example-cutting-mockup/
-
Нарезка в Photoshop — New Layer Based Slice http://paulradzkov.com/2012/photoshop_new_layer_based_slice/
-
Экспорт слоев из Photoshop в один клик! http://jnet.kz/httml/2014/03/13/eksport-sloev-iz-photoshop-v-odin-klik.html
-
The Ultimate Front-End Developer’s Guide to Photoshop https://www.netguru.co/blog/photoshop-for-front-end-developers
-
A Web Developer’s Guide to Photoshop http://rafaltomal.com/a-web-developerss-guide-to-photoshop/
-
Нарезка макета https://www.youtube.com/watch?v=7gjxE_VEA_4
-
Responsive Patterns - http://bradfrost.github.io/this-is-responsive/patterns.html
-
Крестики-нолики на CSS http://css.yoksel.ru/tic-tac-toe/
-
Слайдеры на чистом CSS + бонусный слайдер http://www.sitehere.ru/slajdery-na-chistom-css-bonusnyj-slajder
-
Делаем зарядку для глаз вместе с миньонами — анимация CSS3 http://www.sitehere.ru/delaem-zaryadku-dlya-glaz-vmeste-s-minonami-animaciya-css3
-
Building a Circular Navigation with CSS Transforms http://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms
-
Циклическое слайд-шоу на чистом CSS3 https://habrahabr.ru/post/143025/
-
Пример слайдера, управляемого только с помощью CSS3 http://htmlbook.ru/blog/primer-slaydera-upravlyaemogo-tolko-s-pomoshchyu-css3
-
Разбираемся с border-image из CSS3 http://css-live.ru/articles-css/razbiraemsya-s-border-image-iz-css3.html
-
Grid Item Animation Layout http://tympanus.net/codrops/2015/04/15/grid-item-animation-layout/
-
10 Top Image Hover Effects Tutorials http://www.html5templatesdreamweaver.com/hover-effects.html
-
Caption Hover Effects http://tympanus.net/codrops/2013/06/18/caption-hover-effects/
-
Полное руководство по псевдоклассам и псевдоэлементам http://prgssr.ru/development/polnoe-rukovodstvo-po-psevdoklassam-i-psevdoelementam.htm
-
Будущее загрузки CSS http://css-live.ru/articles/budushhee-zagruzki-css.html
-
How to Animate a Dashed Border with CSS http://www.hongkiat.com/blog/css-animated-dashed-border/
-
Why Do We Have `repeating-linear-gradient` Anyway? https://css-tricks.com/why-do-we-have-repeating-linear-gradient-anyway/
-
How to Create Animations and Transitions with Motion UI http://www.hongkiat.com/blog/animations-transitions-motion-ui/
-
Angled Edges https://github.com/josephfusco/angled-edges
-
http://codepen.io/AnnushkaV/pen/xOAmqG
-
Создание подсказок для сайта с помощью EnjoyHint https://habrahabr.ru/post/270665/
-
Iconate.js — крошечная JavaScript-библиотека для анимированной трансформации иконок. http://bitshadow.github.io/iconate/
-
Библиотека для анимации при прокрутке https://terwanerik.github.io/ScrollTrigger/
-
Подборка библиотек для все случаи жизни) Bootstrap, animate.css, font-awesome и др. http://cssdb.co/
-
Jump.js - библиотека для реализации плавной прокрутки для навигации по странице. Работает без подключения jQuery. http://callmecavs.com/jump
-
TinyPNG — один из лучших онлайн-сервисов для сжатия изображений в форматах .png и .jpg без потери качества. https://tinypng.com/
-
Задача плотной упаковки блоков http://css-live.ru/tricks/zadacha-plotnoj-upakovki-blokov.html
-
http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
-
Сборка спрайтов
Спрайт — графический файл, в котором сгруппировано много изображений небольшого размера. Такая организация графики позволяет минимизировать количество запросов за сервер и ускорить загрузку сайта.
-
Введение в CSS спрайты для чайников http://onjee.ru/css-sprites/
-
Верстка с использованием CSS спрайтов https://marahtanov.ru/edu/webp/reports/css_sprite.html
-
CSS Sprites: Image Slicing’s Kiss of Death http://alistapart.com/article/sprites
-
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them https://css-tricks.com/css-sprites/
-
-
Знания по протоколу HTTP
Прояснить для себя и разобраться в следующих вопросах.
-
Основа www: протокол HTTP http://www.4stud.info/web-programming/protocol-http.html
-
Как отправляются запросы, какие бывают «заголовки запроса»
-
Какими методами передаются данные пользователя (ну, то есть GET, POST, PUT, DELETE, HEAD, OPTIONS и другие), каким образом передаются данные
-
Как на сервер передаются двоичные файлы по HTTP : какие заголовки, как кодируются в теле запроса; почему файлы быстрее пересылать по FTP ht
-
Как формируются ответы, какие бывают «заголовки ответа», какие бывают «статусы ответа» http://copist.ru/blog/2014/12/26/study-web-programmi
-
Что такое «кодировка ответа сервера», как её определить http://copist.ru/blog/2014/12/26/study-web-programming/#ixzz4EWM6pym8
-
Каким образом сжимаются ответы сервера, всё ли можно и нужно сжимать http://copist.ru/blog/2014/12/26/study-web-programming/#ixzz4EWMBBPPo
-
Почему HTTPS безопаснее чем HTTP
-
Зачем и как заставить браузер кэшировать ответы сервера, как предотвратить кэширование http://copist.ru/blog/2014/12/26/study-web-programmi
-
http://kamranahmed.info/blog/2016/08/13/http-in-depth/?utm_source=mybridge&utm_medium=email&utm_campaign=read_more
-
-
jQuery
Надо знать jquery хотя бы на начальном уровне, чтобы подключать и настраивать плагины для этой библиотеки.
Надо найти ответы на такие вопросы:
как манипулировать с объектами DOM: искать, добавлять, удалять как изменять внешний вид объектов как выполнять действия в ответ на события каким образом реализуется анимация как реализуется работа через AJAX как работать с данными в формате JSON и XML что такое «кросс-доменные запросы» как расширять библиотеку (плагины) библиотеки расширений на примере jQuery UI особенности программирования для мобильных устройств на примере jQuery Mobile
-
Учебник “jQuery для начинающих” - http://anton.shevchuk.name/jquery-book/
-
Курсы на HTML academy
-
Курсы на Codecademy
-
Курсы на Code School
-
How to Create an Video Player in jQuery, HTML5 & CSS3 http://designmodo.com/video-player/
-
50+ CSS JQUERY GRAPH BAR PIE CHART SCRIPT & TUTORIALS https://www.freshdesignweb.com/css-jquery-graph-bar-pie-chart/
-
Закрепляем jQuery — 25 отличных советов https://habrahabr.ru/post/52201/
-
What is jQuery? https://jquery.com/ http://learn.jquery.com/ http://learn.jquery.com/effects/intro-to-effects/ http://learn.jquery.com/e
-
YOU MIGHT NOT NEED JQUERY http://youmightnotneedjquery.com/
-
-
Инструменты разработчика в браузере
Это набор инструментов, которые помогают быстро найти и исправить ошибку.
-
Chrome DevTools https://developer.chrome.com/devtools
-
Курс от codeschool http://discover-devtools.codeschool.com/
-
Chrome DevTools, в помощь верстальщику https://www.youtube.com/watch?v=eqJDcbNVe54
-
Инструменты разработчика Firefox https://developer.mozilla.org/ru/docs/Tools
-
Важные аспекты работы браузера для разработчиков. Часть 2 https://habrahabr.ru/company/dataart/blog/304934/
-
Важные аспекты работы браузера для разработчиков. Часть 1 https://habrahabr.ru/company/dataart/blog/304138/
-
http://discover-devtools.codeschool.com/
-
-
Автоматизация: таск-раннеры
Вся рутина должна быть автоматизирована. Примеры автоматизации — запуск препроцессоров и шаблонизаторов, оптимизация графики, сборка спрайтов, сжатие css и js.
-
Gulp http://gulpjs.com/
-
Скринкаст по Gulp https://learn.javascript.ru/screencast/gulp
-
Gulp for Beginners https://css-tricks.com/gulp-for-beginners/
-
Getting started with gulp https://markgoodyear.com/2014/01/getting-started-with-gulp/
-
Продолжаем бороться с frontend-рутиной https://habrahabr.ru/company/2gis/blog/269743/
-
Grunt http://gruntjs.com/
-
A Simple Guide to Getting Started With Grunt https://scotch.io/tutorials/a-simple-guide-to-getting-started-with-grunt
-
Grunt- и Gulp-таски для оптимизации производительности http://frontender.info/performance-optimization/
-
Grunt, инструмент для сборки javascript проектов http://habrahabr.ru/post/148274/
-
Grunt для тех, кто считает штуки вроде него странными и сложными http://frontender.info/grunt-is-not-weird-and-hard/
-
Grunt 0.4: система сборки для фронтенд-разработчиков http://nano.sapegin.ru/all/grunt-0-4
-
GRUNT The JavaScript Task Runner http://gruntjs.com/
-
Пересмотренное руководство по Grunt для начинающих https://habrahabr.ru/post/244721/
-
GulpJS — фантастически быстрый сборщик проектов https://habrahabr.ru/post/208890/
-
Gulp — как глоток свежего воздуха после Grunt http://frontender.info/no-need-to-grunt-take-a-gulp-of-fresh-air/
-
Gulp.js #1 - работаем с CSS: concat, minify, rename, notify, watch, dest https://www.youtube.com/watch?v=9zwwmjGz1Vs&list=PLY4rE9dstrJwX
-
Bower A package manager for the web https://bower.io/
-
Bower: зачем фронтенду нужен менеджер пакетов http://nano.sapegin.ru/all/bower
-
Пакетный менеджер Bower http://stepansuvorov.com/blog/2013/03/%D0%BF%D0%B0%D0%BA%D0%B5%D1%82%D0%BD%D1%8B%D0%B9-%D0%BC%D0%B5%D0%BD%D0%B5%D0%B
-
THE WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS http://yeoman.io/
-
Yeoman для новичков https://habrahabr.ru/post/246349/
-
Быстрая инициализация проекта http://frontender.info/skaffolding-dlya-frontenderov/
-
Автоматизированный шаблон для front-end проектов https://habrahabr.ru/post/239573/
-
Cистемы сборки фронтенда. Gulp https://www.youtube.com/watch?v=MfnTJh-pQWM&feature=youtu.be
-
-
Английский язык
Очень важно уметь читать и понимать по-английски, чтобы иметь доступ к самой последней и интересной информации.
Этап будет длиться все время, отведенное на проект.
Через день надо заниматься английским хотя бы пол часа.
-
Lingualeo
-
duolingo
-
https://www.native-english.ru/
-
http://www.engvid.com/
-
-
HTML и CSS
Пройти следующие курсы:
-
Уроки по HTML и CSS https://webref.ru/layout/learn-html-css
-
Самоучитель HTML4 http://htmlbook.ru/samhtml
-
Самоучитель CSS http://htmlbook.ru/samcss
-
Основы CSS/CSS3 https://www.youtube.com/playlist?list=PL026CCEB5125879C2
-
HTML Academy Интерактивные онлайн курсы https://htmlacademy.ru/
-
Codecademy Аналогично https://www.codecademy.com/
-
При необходимости можно просмотреть курс из Специалиста HTML и CSS. Уровень 1. Создание сайтов на HTML 5 и СSS 3 http://www.specialist.ru/c
-
хороший учебник, разъясняющий тонкости позиционирования http://softwaremaniacs.org/blog/category/primer/
-
интерактивное пособие по отступам элементов (padding, margin) http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html
-
HTML5 и CSS3 http://codenamecrud.ru/html5-and-css3
-
Creating a Custom HTML5 Audio Element UI https://designshack.net/articles/css/custom-html5-audio-element-ui/
-
Create a WYSIWYG Editor With the contentEditable Attribute http://code.tutsplus.com/tutorials/create-a-wysiwyg-editor-with-the-contenteditab
-
Как стать выдающимся фронтенд-разработчиком http://css-live.ru/faq/kak-stat-vydayushhimsya-frontenderom.html
-
Крестики-нолики на CSS http://css.yoksel.ru/tic-tac-toe/
-
Делаем зарядку для глаз вместе с миньонами — анимация CSS3 http://www.sitehere.ru/delaem-zaryadku-dlya-glaz-vmeste-s-minonami-animaciya-css3
-
Слайдеры на чистом CSS + бонусный слайдер http://www.sitehere.ru/slajdery-na-chistom-css-bonusnyj-slajder
-
Пример слайдера, управляемого только с помощью CSS3 http://htmlbook.ru/blog/primer-slaydera-upravlyaemogo-tolko-s-pomoshchyu-css3
-
Циклическое слайд-шоу на чистом CSS3 https://habrahabr.ru/post/143025/
-
Hover.css http://ianlunn.github.io/Hover/
-
Techniques for Creating Textured Text http://tympanus.net/codrops/2013/12/02/techniques-for-creating-textured-text/
-
Creative CSS3 Animation Menus http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index2.html
-
Shazam-Like Morphing Button Effect http://tympanus.net/codrops/2015/11/24/shazam-like-morphing-button-effect/
-
Animated Buttons http://tympanus.net/Tutorials/AnimatedButtons/index7.html
-
Some Inspiration for Pricing Tables http://tympanus.net/codrops/2015/11/19/some-inspiration-for-pricing-tables/
-
Building a Circular Navigation with CSS Transforms http://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transform
-
Свойство background-clip и его применения http://css-live.ru/articles-css/background-clip-use-cases.html
-
http://designmodo.com/
-
Борьба с пробелами между блочно-строчными элементами https://htmlacademy.ru/blog/21-fighting-the-space-between-inline-block-elements
-
Float'омания: разъяснение как работает css свойство float https://habrahabr.ru/post/136588/
-
All About Floats https://css-tricks.com/all-about-floats/
-
All the Generic CSS Data Types https://bitsofco.de/generic-css-data-types/
-
A COMPREHENSIVE GUIDE TO FONT LOADING STRATEGIES https://www.zachleat.com/web/comprehensive-webfonts/
-
Use Cases For CSS Vertical Media Queries https://ishadeed.com/article/vertical-media-queries/
-
How well do you know CSS display? https://www.chenhuijing.com/blog/how-well-do-you-know-display/
-
Магия CSS. Глава 6. Переходы https://medium.com/@ABatickaya/%D0%BC%D0%B0%D0%B3%D0%B8%D1%8F-css-%D0%B3%D0%BB%D0%B0%D0%B2%D0%B0-6-%D0%BF%D0%B5
-
Магия CSS. Глава 5. Типографика https://medium.com/@ABatickaya/%D0%BC%D0%B0%D0%B3%D0%B8%D1%8F-css-%D0%B3%D0%BB%D0%B0%D0%B2%D0%B0-5-%D1%82%D0
-
Магия CSS. Глава 4. Цвет https://medium.com/@ABatickaya/%D0%BC%D0%B0%D0%B3%D0%B8%D1%8F-css-%D0%B3%D0%BB%D0%B0%D0%B2%D0%B0-4-%D1%86%D0%B2%D0%
-
Магия CSS. Глава 3. Таблицы https://medium.com/@ABatickaya/%D0%BC%D0%B0%D0%B3%D0%B8%D1%8F-css-%D0%B3%D0%BB%D0%B0%D0%B2%D0%B0-3-%D1%82%D0%B0%
-
Магия CSS. Глава 2. Раскладка https://medium.com/@ABatickaya/%D0%BC%D0%B0%D0%B3%D0%B8%D1%8F-css-%D0%B3%D0%BB%D0%B0%D0%B2%D0%B0-2-%D1%80%D0%B
-
Магия CSS. Глава 1. Блок https://medium.com/@ABatickaya/%D0%BC%D0%B0%D0%B3%D0%B8%D1%8F-css-64baf79cd9a5#.f99kdtz6c
-
Хорошие и плохие CSS-практики для начинающих https://medium.com/@ABatickaya/%D1%85%D0%BE%D1%80%D0%BE%D1%88%D0%B8%D0%B5-%D0%B8-%D0%BF%D0%BB%D
-
Валидация форм на HTML и CSS https://medium.com/russian/%D0%B2%D0%B0%D0%BB%D0%B8%D0%B4%D0%B0%D1%86%D0%B8%D1%8F-%D1%84%D0%BE%D1%80%D0%BC-%D0%
-
Background-blend-mode http://css.yoksel.ru/background-blend-mode/
-
Automating Layouts Bring Flipboard’s Magazine Style To Web And Windows https://techcrunch.com/2014/03/23/layout-in-flipboard-for-web-and-win
-
What is Vertical Align? https://css-tricks.com/what-is-vertical-align/
-
vertical-align https://css-tricks.com/almanac/properties/v/vertical-align/
-
Центрирование горизонтальное и вертикальное https://learn.javascript.ru/css-center
-
6 Methods For Vertical Centering With CSS http://vanseodesign.com/css/vertical-centering/
-
Centering in CSS: A Complete Guide https://css-tricks.com/centering-css-complete-guide/
-
CSS Diner забавная игра с задачками по CSS http://flukeout.github.io/
-
Изучение CSS Разметки интерактивный учебник, показывающий как создавать раскладки на HTML и CSS http://ru.learnlayout.com/
-
Google Fonts https://www.google.com/fonts https://css-tricks.com/snippets/css/basics-of-google-font-api/ http://2web-master.ru/rukovodst
-
High-level advice and guidelines for writing sane, manageable, scalable CSS http://cssguidelin.es/
-
css https://github.com/primer/primer
-
css airbnb https://github.com/airbnb/css
-
Руководство по оформлению HTML/CSS кода от Google https://habrahabr.ru/post/143452/
-
CSS Style Guides https://css-tricks.com/css-style-guides/
-
Нетология Правила оформления кода http://netology-university.bitbucket.org/codestyle/index.html
-
https://css-tricks.com/specifics-on-css-specificity/
-
http://learnlayout.com/
-
https://github.com/Droogans/unmaintainable-code
-
-
Подключение шрифтов
Узнаю, как правильно подключать шрифты.
-
Загрузка своего шрифта https://webref.ru/layout/html5-css3/text/font-face
-
Как подключить шрифт http://site4business.net/css/kak-podklyuchit-shrift.html
-
Подключение шрифта к странице: как нужно делать сейчас http://nicothin.pro/page/web-fonts
-
-
Работа с SVG
-
Использование SVG http://frontender.info/using-svg/
-
SVG http://css.yoksel.ru/svg/
-
SVG в HTML — из иллюстратора в браузер https://www.youtube.com/watch?v=S0OnkpIoEyQ
-
Structuring, Grouping, and Referencing in SVG — The <g>, <use>, <defs> and <symbol> Elements https://sarasoueidan.co
-
An Overview of SVG Sprite Creation Techniques https://24ways.org/2014/an-overview-of-svg-sprite-creation-techniques/
-
Используем SVG на сайте https://habrahabr.ru/post/260645/
-
SVG-иконки http://css.yoksel.ru/svg-icons/
-
Icon System with SVG Sprites https://css-tricks.com/svg-sprites-use-better-icon-fonts/
-
Использование SVG http://frontender.info/using-svg/
-
-
SVG-спрайты
-
SVG-спрайты http://nicothin.pro/page/svg-sprites
-
Масштабируем CSS спрайты с SVG, убивая сразу трех зайцев https://habrahabr.ru/post/141654/
-
SVG спрайты — 4 способа использования векторных спрайтов https://www.youtube.com/watch?v=S_wZSjLiUog
-
-
CSS-анимации и плавные переходы
-
Плавные переходы (transition) https://www.youtube.com/watch?v=QKRmRpq5CQc
-
Css Animation http://css.yoksel.ru/css-animation/
-
Очень простое руководство по CSS3-анимациям http://frontender.info/ochen-prostoe-rukovodstvo-po-css-animatsiyam/
-
-
CSS-методологии
-
БЭМ https://ru.bem.info/
-
SMACSS https://smacss.com/
-
An Introduction To Object Oriented CSS (OOCSS) https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/
-
Методологии верстки: БЭМ, AMCSS, OOCSS, Atomic CSS, OPOR, MCSS, SMACSS, FUN, DoCSSa http://html5.by/blog/bem-amcss-oocss-atomiccss-opor-mcss
-
The Basics of Object-Oriented CSS (OOCSS) http://www.hongkiat.com/blog/basics-of-object-oriented-css/
-
BEM (БЭМ) & SMACSS — Sass методологии для организации проектов https://www.youtube.com/watch?v=vXW7w3ym8hg
-
OOCSS, ACSS, BEM, SMACSS: what are they? What should I use? http://clubmate.fi/oocss-acss-bem-smacss-what-are-they-what-should-i-use/
-
Правильный CSS: OOCSS, SMACSS, BEM и SASS http://codezona.com/css3-rules-oocss.html
-
Medium’s CSS is actually pretty f***ing good. https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06#.ietexacz2
-
-
CSS-фреймворки
Многие не рекомендуют верстать на базе фреймворков, они предназначены, в первую очередь, для прототипирования. Их полезно изучать и понимать как реализованы компоненты.
-
Bootstrap http://getbootstrap.com/
-
Foundation http://foundation.zurb.com/sites.html
-
Pure http://purecss.io/
-
Skeleton http://getskeleton.com/
-
960 Grid System http://960.gs/
-
Semantic UI http://semantic-ui.com/
-
-
Верстка писем
Тут свои правила и до сих пор верстка таблицами.
-
Верстка email рассылок от А до Я для чайников https://habrahabr.ru/post/252279/
-
How-to: Правила вёрстки email-писем https://habrahabr.ru/company/pechkin/blog/255819/
-
Основы профессиональной верстки электронных писем https://habrahabr.ru/post/180013/
-
-
Git
Популярная система для хранения истории изменений и синхронизации результатов работы между участниками в проекте.
-
Git - для новичков - #1 - основы https://www.youtube.com/watch?v=PEKN8NtBDQ0
-
Github Tutorial https://try.github.io/levels/1/challenges/1
-
Atlassian Git Tutorials https://www.atlassian.com/git/tutorials/
-
Git How To https://githowto.com/
-
Моя шпаргалка по работе с Git http://eax.me/git-commands/
-
Шпаргалка по консольным командам Git https://github.com/nicothin/web-development/tree/master/git
-
Pro Git, второе издание https://github.com/progit/progit2-ru
-
Коллекция часто задаваемых вопросов по Git с возможностью поиска http://firstaidgit.ru/#/
-
Практика работы с системами контроля версий http://eax.me/vcs-practice/
-
https://try.github.io/levels/1/challenges/1
-
https://www.atlassian.com/git/tutorials/
-
https://www.codeschool.com/learn/git
-
-
CSS-препроцессоры
Препроцессоры ускоряют работу, упрощают жизнь и позволяют использовать много возможностей, которые еще не реализованы в браузерах.
-
Sass http://sass-lang.com/ и SCSS
-
Stylus http://stylus-lang.com/
-
Less http://lesscss.org/
-
PostCSS + PreCSS (одна из связок) http://postcss.org/ https://github.com/jonathantneal/precss
-
Как работать с CSS-препроцессорами и БЭМ http://nicothin.github.io/idiomatic-pre-CSS/
-
Handy Advanced Sass http://12devs.co.uk/articles/handy-advanced-sass/
-
Build a Responsive, Single Page Portfolio with Sass and Compass http://webdesign.tutsplus.com/tutorials/build-a-responsive-single-page-portf
-
http://stylus-lang.com/try.html - песочница для экспериментов. На этом же сайте и документация.
-
http://css2stylus.com/ - конвертер из CSS в Stylus. Через него переводил normalize.css (всегда свежая версия) в normalize.styl для проекта b
-
ENG https://www.youtube.com/playlist?list=PLLnpHn493BHFWQGA1PcyQZWAfR96a4CkH - хорошая обучалка по Stylus
-
http://jeet.gs/ - неплохая сетка (grid) под названием Jeet для stylus. На самом сайте видеоуроки по использованию. Кстати в Codepen.io добав
-
RUS http://www.youtube.com/watch?v=J5YMHSADniQ - хороший обзор Jeet.
-
ENG https://www.youtube.com/watch?v=fRVRtO95VhU - видео по Rupture. Нужен для Jeet.
-
http://prgssr.ru/development/estetichnyj-sass-chast-1-arhitektura-i-organizaciya.html
-
http://prgssr.ru/development/estetichnyj-sass-chast-2-cveta-i-palitry.html
-
http://prgssr.ru/development/estetichnyj-sass-chast-3-tipografika-i-vertikalnyj-ritm.html
-
-
Шаблонизаторы
Представьте у вас 10 страниц и на каждой надо внести изменения в один и тот же блок. Это больно и долго. Одна из возможностей шаблонизаторов — выделять повторяющиеся блоки в отдельные файлы. Вынесли блок, подключили на нужных страницах и все — теперь вы делаете в 10 раз меньше работы.
-
Pug (бывший Jade) http://jade-lang.com/
-
HAML http://haml.info/
-
Twig http://twig.sensiolabs.org/
-
Blade https://laravel.com/docs/5.1/blade
-
http://html2jade.org/ - конвертер из HTML в Jade. Не во всех случаях работает корректно. Во всяком случае при конвертировании комментариев д
-
RUS https://www.youtube.com/watch?v=QCsFDi1cQIk - обзор Jade - 1,5 часа
-
ENG https://www.youtube.com/playlist?list=PLVHXiuTtgtcxuckHJUzrpe2n9gNIVF6JE - более короткие ролики по Jade
-
Markdown http://daringfireball.net/projects/markdown/ - вроде как официальный сайт. https://github.com/adam-p/markdown-here/wiki/Markdown-Ch
-
-
Тестирование верстки
Плох тот разработчик, который не тестирует свою работу. Соответственно, цель этапа - научиться проверять, что же было сверстано.
-
Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать https://habrahabr.ru/post/114256/
-
Тестирование верстки http://xiper.net/collect/weekdays-front-end-dev/the-work-in-general/testing-layout
-
Автоматизированное тестирование верстки веб-сайтов http://sqadays.com/talk/37161
-
-
Программирование на Javascript
Надо найти ответы на следующие вопросы:
- как сценарии внедряются в HTМL
- синтаксис, языковые конструкции, типы данных, массивы
- функции и замыкания
- что такое «область видимости», как её расширить или ограничить
- объекты и методы: объекты базовых типов, создание объектов пользовательских типов
- методы для обработки строк, дат
- регулярные выражения
- что такое «Document Object Model (DOM)», каким образом javascript может менять содержимое страницы HTML
- каким образом реализовать постепенное изменение элементов страницы (анимация)
- что такое «события» и как можно выполнить действие в ответ на событие
- что такое «формы» и «элементы ввода», какие бывают элементы ввода, как данные из формы отправляются на сервер
- как реализуется передача данных на сервер без отправки формы
- как получать данных с сервера без обновления страницы (AJAX)
- что из себя представляет формат JSON, как с ним работать
- то же самое про XML
- что такое «сборщик мусора»
- что такое «CORS», как настраивается
- почему на некоторых веб-страницах иногда в исходном коде HTML нет тех блоков, которые явно видно глазами
- Важно - нужно знать, откуда копипастить.
Тебе нужно быть очень хорошо знакомым с одной-двумя-тремя популярными библиотеками на JavaScript. В идеале ты должен иметь представление о том, что определённый класс задач может быть решен с помощью определённых библиотек, хотя бы одной, но такие знания приходят с практикой. Вообще ты должен быть знаком с ними так близко, чтобы помнить, в какой части мануала по библиотеке можно найти описание форматов входных данных нужной тебе функции и какой будет результат, чтобы скопировать и вставить в свой код, а потом поправить, чтобы работало. - Важно - инструменты программиста JavaScript
У тебя должен быть удобный инструмент для разработки (IDE, Integrated Development Environment), чтобы он тебе подсвечивал код (syntax highlight) и подсказывал о синтаксических ошибках (syntax check), о формальных параметрах функций (type hinting), о стиле кодирования (code style), помогал писать код (live templates).
Ты должен знать, как отлаживать скрипты в популярных браузерах (Firebug, Chrome Developer Tools и другое). Что такое точки останова, как управлять исполнением во время останова, как посмотреть и поменять содержимое переменных, как настроить останов по условию.
Можно использовать любую существующую библиотеку.
Например,
для построения графиков www.highcharts.com
для загрузки и передачи данных через AJAX: jquery.com + что-нибудь на сервере
для всплывающих диалогов с картиками, видео и формами: fancyapps.com/fancybox иhttps://jqueryui.com/dialog/
для валидации форм rickharrison.github.io/validate.js
для календаря https://jqueryui.com/datepicker/
для автодополнения https://jqueryui.com/autocomplete/
для передачи данных между несколькими пользователями socket.io или обычный AJAX-
JavaScript Garden http://bonsaiden.github.io/JavaScript-Garden/ru/
-
javascript.ru: Современный учебник JavaScript http://learn.javascript.ru/
-
курсы на HTML academy
-
курсы на codecademy https://www.codecademy.com/learn/javascript
-
курсы на code school https://www.codeschool.com/courses/javascript-road-trip-part-1
-
Паттерн «Модуль» http://forwebdev.ru/javascript/module-pattern/
-
Возьми из сборника задач по javascript любой скрипт случайно и вслух расскажи, что он делает. Важно - читать и понимать чужой код намного ва
-
Напиши скрипт на JS, который в заданном тексте удалит один или два символа, выбранных случайно Усложнение: удалять можно только буквы в слов
-
На страницу HTML нужно встроить график курса доллара по отношению к рублю. Формат входного массива значений курса определи сам, исходя из св
-
При клике по картинкам, вставленным в текст HTML, показывать всплывающее окно для просмотра увеличенной картинки. Усложнение: в всплывающем
-
По клику на кнопку "Click me" показать всплывающую форму. Усложнение: реализовать проверку данных на корректность перед отправкой
-
К форме ввода данных на поле ввода даты "навешать" всплывающий календарь для выбора даты. Усложнение: сделать форму календаря муль
-
Сделать пред-просмотр веб-страницы HTML с разными темами. Тему страницы выбирать через селектор на javascript, а показывать в фрейме. Усложн
-
Задачи повышенной сложности, исходя из личного интереса Реализовать форму для многошагового мастера: форма должна состоять из нескольких стр
-
Реализовать однопользовательскую браузерную игру "змейка", "тетрис", "найди пару"
-
Реализовать многопользовательскую браузерную игру "крестики-нолики", "морской бой" на два игрока в режиме "hot seat
-
Реализовать todo-list. Пользователь вводит список, затем он превращается в строки с "чек-боксами". Когда "чекбокс" включ
-
Реализовать простой графический редактор. Пусть рисуется точка в месте, где пользователь кликнул. Усложнение: добавить переключатель режимов
-
How to Create a Circular Progress Button http://tympanus.net/codrops/2014/04/09/how-to-create-a-circular-progress-button/
-
Round Up: 38 Neat CSS & JS Hover Effects http://www.cssdesignawards.com/articles/round-up-38-neat-css-js-hover-effects/101/
-
Создаем плеер, как вконтакте http://tyufyakin.com/blog/sozdaem_pleer_kak_v_vkontakte/
-
Выразительный JavaScript: Введение https://habrahabr.ru/post/240219/
-
Выразительный Javascript https://karmazzin.gitbooks.io/eloquentjavascript_ru/content/
-
JavaScript Functions and Helpers https://plainjs.com/javascript/
-
Decoupling Your HTML, CSS, and JavaScript https://philipwalton.com/articles/decoupling-html-css-and-javascript/
-
http://frontender.info/programmirovanie-klassami-v... - Отличная статья Программирование классами. Здесь также дается отличное понимание тог
-
http://frontender.info/es6-classes-final/ - огромная классная статья про Финальный синтаксис классов в ES6.
-
https://github.com/DrkSephy/es6-cheatsheet - хорошая шпаргалка по ES6
-
https://medium.com/javascript-scene/how-to-learn-e... - подборка материалов по ES6 на Medium.com
-
ENG https://www.youtube.com/playlist?list=PLnIJ02CcZiYCCbbRZ9uZG6Dbf6AaA-NWY - JavaScript ES6 - The Next Level. Может пригодится.
-
https://css-tricks.com/lets-learn-es2015/ - Let’s Learn ES2015. небольшой обзор ES6 на английском.
-
https://habrahabr.ru/post/264813/ - интересная статья на хабре Тонкости ES6: Наследование (часть 1)
-
https://habrahabr.ru/post/261187/ - интересная статья на хабре Тонкости ES6: Коллекции (часть 1)
-
https://habrahabr.ru/post/261417/ - интересная статья на хабре Тонкости ES6: Коллекции (часть 2)
-
https://github.com/rwaldron/tc39-notes - заметки по EcmaScript TC39 встречам
-
https://learn.javascript.ru/es-modern - учебник по современному ES6 от Ильи Кантора
-
http://exploringjs.com/es6/ - книга Exploring ES6
-
интересный курс JavaScript Best Practices на Pluralsight https://www.pluralsight.com/courses/javascript-best-practices
-
https://github.com/KarafiziArtur/javascript-1 - классный стайлгайд по JavaScript ES6
-
http://bytearcher.com/articles/understanding-prototype-property-in-javascript/ - понимание prototype в JavaScript
-
http://www.sitepoint.com/javascript-modules-bundli... - понимание JavaScript модулей Bundling & Transpiling
-
По JavaScript и ES6 нашел хорошую подборку "книг" на GitHub - https://github.com/getify/You-Dont-Know-JS
-
По курсу JavaScript in Action JavaScript Projects сделал простейший калькулятор. Курс интересный. Для тех, кто проходит FreeCodeCamp - хорош
-
JavaScript: подготовка к работе - еще один бесплатный курс от Хекслет, 2-х часовой — "посвящен установке и настройке рабочего окружения
-
Rapid JavaScript Training (by Mark Zamoyta) на Pluralsight. Курс в очень доступной и понятной форме не только объясняет основные принципы ра
-
ES6 - Rapid ES6 Training https://www.pluralsight.com/courses/rapid-es6-training
-
Паттерны для масштабируемых JavaScript-приложений http://largescalejs.ru/
-
Learning JavaScript Design Patterns https://addyosmani.com/resources/essentialjsdesignpatterns/book/
-
Ускоренный курс по основам языка от Mozilla Developer Network (MDN) https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web
-
Грамматика и типы https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Grammar_and_types
-
Порядок выполнения и обработка ошибок https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Control_flow_and_error_handling
-
Циклы и итерации https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/%D0%A6%D0%B8%D0%BA%D0%BB%D1%8B_%D0%B8_%D0%B8%D1%82%D0%B5%D1%80%D
-
Функции в JavaScript https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Functions
-
Выразительный Javascript https://karmazzin.gitbooks.io/eloquentjavascript_ru/content/
-
Что такое Объектная Модель Документа (DOM)? https://developer.mozilla.org/ru/docs/DOM/DOM_Reference/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%
-
JavaScript Objects in Detail http://javascriptissexy.com/javascript-objects-in-detail/
-
Что такое DOM? http://frontender.info/dom/
-
Руководство по DOM https://developer.mozilla.org/ru/docs/DOM/DOM_Reference
-
Events and the DOM https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events
-
Examples of web and XML development using the DOM https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples
-
How to create a DOM tree https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/How_to_create_a_DOM_tree
-
Locating DOM elements using selectors https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_sel
-
JavaScript Functions and Helpers https://plainjs.com/javascript/
-
Chrome DevTools https://developers.google.com/web/tools/chrome-devtools/
-
Инструменты разработчика Firefox https://developer.mozilla.org/ru/docs/Tools/Page_Inspector
-
Наследование и цепочка прототипов https://developer.mozilla.org/ru/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
-
Замыкания, область видимости https://learn.javascript.ru/functions-closures
-
Замыкания https://developer.mozilla.org/ru/docs/Web/JavaScript/Closures
-
Параллельная модель и цикл событий https://developer.mozilla.org/ru/docs/Web/JavaScript/EventLoop
-
Всплытие и перехват https://learn.javascript.ru/event-bubbling
-
Функции call(), apply() и bind() в JavaScript http://getinstance.info/articles/javascript/call-apply-and-bind-functions/
-
What's the difference between a promise and a callback in Javascript? https://www.quora.com/Whats-the-difference-between-a-promise-and-
-
Variable and Function Hoisting in JavaScript http://adripofjavascript.com/blog/drips/variable-and-function-hoisting
-
Привязка контекста и карринг: "bind" https://learn.javascript.ru/bind
-
The State Of JavaScript - A Shift From Imperative To Declarative http://www.tysoncadenhead.com/blog/the-state-of-javascript-a-shift-from-imp
-
Three D’s of Web Development #1: Declarative vs. Imperative http://developer.telerik.com/featured/three-ds-of-web-development-1-declarative-
-
const https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/const
-
Classes https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Classes
-
Шаблонные строки https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/template_strings
-
Наследование и цепочка прототипов https://developer.mozilla.org/ru/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
-
ES5, ES6, ES2016, ES.Next: What's going on with JavaScript versioning? http://benmccormick.org/2015/09/14/es5-es6-es2016-es-next-whats-
-
Getting Started with ES6 – The Next Version of JavaScript http://weblogs.asp.net/dwahlin/getting-started-with-es6-%E2%80%93-the-next-version
-
ECMAScript 6 — New Features: Overview & Comparison http://es6-features.org/#Constants https://github.com/lukehoban/es6features
-
Decoupling Your HTML, CSS, and JavaScript https://philipwalton.com/articles/decoupling-html-css-and-javascript/
-
The Observer Pattern https://addyosmani.com/resources/essentialjsdesignpatterns/book/#observerpatternjavascript
-
The Facade Pattern https://addyosmani.com/resources/essentialjsdesignpatterns/book/#facadepatternjavascript
-
The Revealing Module Pattern https://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript
-
The Singleton Pattern https://addyosmani.com/resources/essentialjsdesignpatterns/book/#singletonpatternjavascript
-
The Factory Pattern https://addyosmani.com/resources/essentialjsdesignpatterns/book/#factorypatternjavascript
-
The Decorator Pattern https://addyosmani.com/resources/essentialjsdesignpatterns/book/#decoratorpatternjavascript
-
Learning JavaScript Design Patterns https://addyosmani.com/resources/essentialjsdesignpatterns/book/
-
How To Use Arguments And Parameters In ECMAScript 6 https://www.smashingmagazine.com/tag/javascript/
-
JavaScript Weekly http://javascriptweekly.com/
-
https://www.reddit.com/r/javascript/
-
JavaScript Jabber https://devchat.tv/js-jabber
-
Airbnb JavaScript Style Guide https://github.com/airbnb/javascript
-
rwaldron/idiomatic.js https://github.com/rwaldron/idiomatic.js/
-
felixge/node-style-guide https://github.com/felixge/node-style-guide
-
Coding Style https://developer.mozilla.org/ru/docs/Developer_Guide/Coding_Style
-
https://github.com/lodash/lodash
-
https://github.com/jashkenas/underscore
-
https://github.com/babel/babel
-
https://github.com/TryGhost/Ghost
-
https://github.com/NodeBB/NodeBB
-
https://github.com/keystonejs/keystone
-
http://www.dofactory.com/javascript/design-patterns
-
http://nodeschool.io/
-
https://github.com/getify/You-Dont-Know-JS
-
https://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3#.vwsvpx6da
-
https://medium.com/javascript-scene/why-hiring-is-so-hard-in-tech-c462c3230017#.lraxp3cu3
-
Базовые принципы верстки
Изучение статей, которые помогут лучше понимать специфику работы.
-
Базовые принципы вёрстки http://copist.ru/blog/2015/08/29/web-layout-basics/
-
habrahabr: Как сверстать веб-страницу https://habrahabr.ru/post/202408/
-
Как сверстать веб-страницу. Часть 2 — Bootstrap https://habrahabr.ru/post/211032/
-
Как сверстать тему для WordPress https://habrahabr.ru/post/228523/
-
Как сверстать шаблон для Joomla https://habrahabr.ru/post/256635/
-
Верстка для самых маленьких. Верстаем страницу по БЭМу https://habrahabr.ru/post/203440/
-
За что HTML-верстальщики так не любят веб-дизайнеров https://habrahabr.ru/post/173271/
-
Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать https://habrahabr.ru/post/114256/
-
Еще одни чек-лист https://github.com/ihorzenich/html5checklist
-
И еще один http://www.slideshare.net/IgorZenich/-15529575
-
Backend vs Frontend http://copist.ru/blog/2015/08/26/backend-vs-frontend/
-
-
Технологии асинхронной передачи данных Навыки создания тестовых «затычек» на стороне сервера, чтобы можно было разрабатывать асинхронный обм
-
AJAX
-
WebSocket
-
Comet
-
CORS
-
Навыки создания тестовых «затычек» на стороне сервера, чтобы можно было разрабатывать асинхронный обмен данными, пока бакенд не готов
-
Что такое AJAX? https://developer.mozilla.org/ru/docs/AJAX/%D0%A1_%D1%87%D0%B5%D0%B3%D0%BE_%D0%BD%D0%B0%D1%87%D0%B0%D1%82%D1%8C
-
What Is Ajax & How Is It Used In Modern Web Development? http://www.vandelaydesign.com/what-is-ajax-webdev/
-
ajax https://www.reddit.com/r/explainlikeimfive/comments/19gvn9/explain_it_like_im_5_what_is_ajax/
-
Fetch API https://developer.mozilla.org/ru/docs/Web/API/Fetch_API
-
fetch API https://davidwalsh.name/fetch
-
What is the meaning of polyfills in HTML5? http://stackoverflow.com/questions/7087331/what-is-the-meaning-of-polyfills-in-html5
-
Документация к polyfill https://github.com/github/fetch
-
-
Базовые знания про UML
-
Дизайн сайта портфолио
Интересный пример http://lydialyd.github.io/#about
-
Контент сайта портфолио
-
SVG-иконки дл сайта при необходимости
-
Форма отправки сообщения
-
Адаптивность
-
Двуязычность
-
Кроссбраузерность
-
Чтение рекомендованной литературы и статей
-
Использование мета-описаний https://yandex.ru/support/webmaster/recommendations/using-meta-desc.xml
-
Brackets для сомневающихся и новичков https://habrahabr.ru/post/242623/
-
Раздел верстка на http://beloweb.ru/category/vyorstka
-
Зачем использовать атрибут языка? https://www.w3.org/International/questions/qa-lang-why.ru
-
Важные аспекты работы браузера для разработчиков. Часть 1 https://habrahabr.ru/company/dataart/blog/304138/
-
Важные аспекты работы браузера для разработчиков. Часть 2 https://habrahabr.ru/company/dataart/blog/304934/
-
Как сверстать веб-страницу. Часть 1 https://habrahabr.ru/post/202408/
-
Создание веб-сайта. Курс молодого бойца https://habrahabr.ru/post/273795/
-
От нуля до героя фронтенда (Часть 1) https://medium.com/russian/%D0%BE%D1%82-%D0%BD%D1%83%D0%BB%D1%8F-%D0%B4%D0%BE-%D0%B3%D0%B5%D1%80%D0%BE%
-
Узнать, что такое рефакторинг https://refactoring.guru/ru
-
Курсы по веб-разработке https://geekbrains.ru/
-
Как думать на SQL? https://habrahabr.ru/post/305926/
-
ES6 по-человечески https://habrahabr.ru/post/305900/
-
https://www.freecodecamp.com/ Free Code Camp - очень похожи на все остальные курсы такого же плана, но отличаются акцентом на практику, а ко
-
https://academy.yandex.ru/events/frontend/ Яндекс-ШРИ - Видео-запись лекций от родного поисковика. Ориентация тоже не совсем на начинающих.
-
Что такое Single Page Application (SPA)
-
Что такое AMD (RequireJS)
-
Переводим в код 5 действительно полезных шаблонов адаптивной разметки https://habrahabr.ru/post/141199/
-
Подборка вопросов на собеседовании на должность Front-end Junior - http://www.pvsm.ru/javascript/37681
-
Интересная подборка из 400 ссылок по DevOps & Sysadmins - https://medium.com/@MorpheusData/400-free-resource...
-
Привычка Stack Overflow https://habrahabr.ru/company/Voximplant/blog/281845/
-
https://developers.google.com/structured-data/testing-tool/ - проверка структурности кода и как будет видеть Google-поиск вашу страницу посл
-
https://habrahabr.ru/post/282407/ - лучшие практики Yii по мнению автора
-
Каково это — быть разработчиком, когда тебе сорок https://habrahabr.ru/post/282674/
-
How Long Does Free Code Camp Take? https://medium.freecodecamp.com/how-long-does-free-code-camp-take-f986202346ef#.3wo9ioqxv
-
10 книг https://medium.mybridge.co/the-most-useful-free-ebooks-for-web-developers-3854767ee52f#.8mgzi5fz7
-
Основы программирования - 16-ти часовой бесплатный курс от Хекслет — "рассчитан на новичков без опыта в программировании, но будет поле
-
http://it-ebooks.info - сборник книг (в том числе и лучших) IT-сферы. На английском языке. Можно найти все книги O'Reilly и многие друг
-
Как в IT-компаниях смотрят на программистов без диплома при приёме на работу? https://tproger.ru/experts/17/
-
Почему стоит нанимать джуниоров https://habrahabr.ru/company/ua-hosting/blog/300928/
-
HTML5 WebSockets http://htmlhook.ru/html5-websockets.html
-
WebSockets — полноценный асинхронный веб https://habrahabr.ru/post/79038/
-
Гильоши https://habrahabr.ru/post/305354/
-
Жизнь программиста https://ru.hexlet.io/courses/prog-life
-
Адаптивно-отзывчивый: разбираемся в терминологии http://frontender.info/adaptive-vs-responsive-terminology/
-
Дизайн для программистов https://medium.com/russian/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D0%B4%D0%BB%D1%8F-%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D
-
Что ожидать от собеседования на должность HMTL-Верстальщик/Junior frontend программист. https://medium.com/@ermo4enkov/%D1%87%D1%82%D0%BE-%D
-
О чём должен помнить веб-дизайнер https://github.com/nicothin/web-design
-
Процесс визуализации https://developers.google.com/web/fundamentals/performance/critical-rendering-path/?hl=ru
-
Возвращаемся к вопросу производительности CSS: селекторы, раздутые и тяжелые стили http://frontender.info/css-performance-revisited-selector
-
Погружение в темные воды загрузки скриптов https://habrahabr.ru/post/182310/
-
CSS vs SVG: The Final Round(up) http://blogs.adobe.com/dreamweaver/2015/09/css-vs-svg-the-final-roundup.html
-
Бесплатная книга по типографии Professional Web Typography https://prowebtype.com/
-
https://dribbble.com/ - много вариантов дизайна
-
Развиваем дизайнерское чутье https://medium.com/russian/%D1%80%D0%B0%D0%B7%D0%B2%D0%B8%D0%B2%D0%B0%D0%B5%D0%BC-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B
-
HTML5 Reset https://github.com/murtaugh/HTML5-Reset
-
https://atom.io/
-
https://www.sublimetext.com/
-
Хорошие и плохие CSS-практики для начинающих https://medium.com/@ABatickaya/%D1%85%D0%BE%D1%80%D0%BE%D1%88%D0%B8%D0%B5-%D0%B8-%D0%BF%D0%BB%D
-
Quick Tip: Create Your Own Simple Reset.css File http://code.tutsplus.com/tutorials/weekend-quick-tip-create-your-own-resetcss-file--net-20
-
CSS Tools: Reset CSS http://meyerweb.com/eric/tools/css/reset/index.html
-
CSS Vendor Prefixes http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm
-
Вендорные префиксы http://starhack.ru/vendor-prefixes/
-
Постпроцессор http://postcss.org/
-
CSS Architectures: Refactor Your CSS https://www.sitepoint.com/css-architectures-refactor-your-css/
-
My (Simple) Workflow To Design And Develop A Portfolio Website https://www.smashingmagazine.com/2013/06/workflow-design-develop-modern-portf
-
GUI Architectures http://martinfowler.com/eaaDev/uiArchs.html
-
Understanding MVVM - A Guide For JavaScript Developers https://addyosmani.com/blog/understanding-mvvm-a-guide-for-javascript-developers/
-
Understanding MVC And MVP (For JavaScript And Backbone Developers) https://addyosmani.com/blog/understanding-mvc-and-mvp-for-javascript-and-
-
MVC Architecture https://developer.chrome.com/apps/app_frameworks
-
Web Sites vs. Web Apps: What the experts think http://www.visionmobile.com/blog/2013/07/web-sites-vs-web-apps-what-the-experts-think/
-
Разделение ответственности https://ru.wikipedia.org/wiki/%D0%A0%D0%B0%D0%B7%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BE%D1%82%D0%B2%D0%
-
Model-View-Presenter https://ru.wikipedia.org/wiki/Model-View-Presenter
-
Model-View-ViewModel https://ru.wikipedia.org/wiki/Model-View-ViewModel
-
Model-View-Controller https://ru.wikipedia.org/wiki/Model-View-Controller
-
Don’t repeat yourself https://ru.wikipedia.org/wiki/Don%E2%80%99t_repeat_yourself
-
Разделение ответственности https://ru.wikipedia.org/wiki/%D0%A0%D0%B0%D0%B7%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BE%D1%82%D0%B2%D0%
-
Принцип единственной обязанности https://ru.wikipedia.org/wiki/%D0%9F%D1%80%D0%B8%D0%BD%D1%86%D0%B8%D0%BF_%D0%B5%D0%B4%D0%B8%D0%BD%D1%81%D1%
-
Frontend Dev: хороший, плохой, злой. Часть 1: Хороший путь https://medium.com/russian/frontend-dev-%D1%85%D0%BE%D1%80%D0%BE%D1%88%D0%B8%D0%B
-
https://medium.freecodecamp.com/learning-how-to-learn-the-most-important-developer-skill-7bf62dfaf67d#.nf0kko3wg
-
https://www.smashingmagazine.com/2016/08/a-beginners-guide-to-progressive-web-apps/?utm_source=mybridge&utm_medium=email&utm_campaig
-
https://css-tricks.com/case-study-boosting-front-end-performance/?utm_source=mybridge&utm_medium=email&utm_campaign=read_more
-
https://seesparkbox.com/foundry/performance_during_development?utm_source=mybridge&utm_medium=email&utm_campaign=read_more
-
https://medium.freecodecamp.com/what-is-an-api-in-english-please-b880a3214a82#.ai45s61ao
-
https://scotch.io/tutorials/dns-explained-how-your-browser-finds-websites?utm_source=mybridge&utm_medium=email&utm_campaign=read_mor
-
https://www.smashingmagazine.com/2016/08/using-a-static-site-generator-at-scale-lessons-learned/?utm_source=mybridge&utm_medium=email&am
-
Offline Storage for Progressive Web Apps
-
-
Masking in CSS
Разобраться, что это такое и насколько необходимо.
-
Статья на CSS Tricks. https://css-tricks.com/clipping-masking-css/
-
Статья на HTML5rocks. Не совсем про маски, но к ним применимо. http://www.html5rocks.com/en/tutorials/shapes/getting-started/
-
Про режимы наложения http://css.yoksel.ru/blend-modes-fallback/
-
Про маски http://css.yoksel.ru/css-and-svg-masks/
-
How to make an inkblot avatar with mask-image http://creative-punch.net/2014/02/make-inkblot-avatar-mask-image/
-
Making glowing lights with CSS http://creative-punch.net/2014/01/making-glowing-lights-css/
-
-
Изучение flexbox
-
Спецификация http://www.w3.org/TR/css-flexbox-1/
-
Руководство на css-tricks https://css-tricks.com/snippets/css/a-guide-to-flexbox/
-
Гайд от frontender.info http://frontender.info/a-guide-to-flexbox
-
Практическое применение FlexBox https://habrahabr.ru/post/242545/
-
How to Build a News Website Layout with Flexbox http://webdesign.tutsplus.com/tutorials/how-to-build-a-news-website-layout-with-flexbox--cms
-
Что такое Flexbox? Описание всех css свойств, основные принципы, преимущества и недостатки. http://html5.by/blog/flexbox/
-
Почему научиться программировать так чертовски тяжело? https://habrahabr.ru/company/hexlet/blog/251411/
-
MIT - один из престижнейших технологических вузов мира оцифровал и выложил в открытый доступ всю свою учебную программу. http://ocw.mit.ed
-
http://www.tutorialspoint.com/index.htm - заслуживающий внимание сайт. - библиотека туториалов по невероятому количеству технологий, каждый
-
Flexbox Fundamentals за 15 минут - серия коротких уроков по флексбок общей сложностью в 15 минут. https://egghead.io/courses/flexbox-fundam
-
-
Общее представление о тестировщиках Karma + Mocha + Chai
-
Time Managment и управление проектами
-
https://www.primaerp.com/ PrimaERP - чешский сервис полностью русифицирован, полностью бесплатен без ограничений функционала. В бесплатную в
-
https://trello.com/ Trello - в представлении не нуждается.
-
-
TypeScript (and Angular)
В AngularJS первой версии необходимо скачать файл angular.d.ts для правильного понимания тайпскриптом самого ангуляра, иначе, при компиляции будет писать ошибку TS2304: Cannot find name 'angular'. А также еще нужно будет таким же образом подключить jquery.d.ts, но нужно чтобы он был в папкеjquery выше самого angular.d.ts - ../jquery/jquery.d.ts
PhpStorm 2016.1 по умолчанию может работать с TypeScript, для этого нужно лишь активировать его в настройках: Ctrl + Alt + S -> Languages & Frameworks -> TypeScript -> поставить галочку Enable TypeScript Compiler. Компилироваться он будет в то же место, где и находится ваш *.ts файл, но можно задать и другой путь.
-
https://github.com/DefinitelyTyped/DefinitelyTyped - определения типов в файлах *.d.ts для огромной кучи библиотек и фреймворков.
-
http://www.typescriptlang.org/ - официальный сайт с документацией, песочницей и туториалами.
-
RUS https://www.youtube.com/watch?v=r_yBvQxEbFg - неплохое введение в TypeScript.
-
ENG https://www.youtube.com/watch?v=y28iHRuAHnw - 4-х часовая(!) лекция по Angular2 + TypeScript. Осилит только самый суровый IT-шник :)
-
ENG https://www.youtube.com/watch?v=R62iQvZ0bdQ - Angular2 Beta, RxJS, TypeScript
-
RUS https://www.youtube.com/watch?v=v6A17KwsV08 - очень полезное часовое видео с разбором TypeScript в песочнице и созданием приложения.
-
RUS https://www.youtube.com/watch?v=_3n4JdZdXWo - тоже неплохой доклад по TypeScript
-
ENG https://youtu.be/PyRrbEDu6qs?list=PLwpsA4yH105kF-6HkqamR6dqRy5k0oF1X - туториал по TypeScript типам и далее в плейлисте туториал по функ
-
ENG https://www.youtube.com/watch?v=7xOubdqyqaY - интересное видео по настройке Gulp + TypeScript + Angular2
-
ENG https://www.youtube.com/watch?v=_4ltNDqusdA&list=PLPCoRccv3E8XdnXJzawgNGRYul-v7C0ZB&index=2 - конвертирование простого js в Type
-
http://johnpapa.net/es5-es2015-typescript/ - неплохая статья про ES5/ES6/TypeScript
-
http://bonsaiden.github.io/JavaScript-Garden/ru/ - не про TypeScript, но про JavaScript - хорошая обучалка/шпаргалка.
-
http://www.hirez.io/ - "Готовимся к Angular2" - забавный, шуточный мини-курс.
-
How is AngularJS different from jQuery http://stackoverflow.com/questions/13151725/how-is-angularjs-different-from-jquery
-
Документ ация https://github.com/AngularjsRUS/angular-doc
-
Tutorial / 0 - Bootstrapping https://docs.angularjs.org/tutorial/step_00
-
A curated list of helpful material to start learning Angular 2 https://github.com/timjacobi/angular2-education
-
Angular Style Guide https://github.com/johnpapa/angular-styleguide
-
Build an Etsy Clone with Angular and Stamplay (Part 1) https://scotch.io/tutorials/build-an-etsy-clone-with-angular-and-stamplay-part-1
-
Build a Real-Time Status Update App with AngularJS & Firebase https://www.sitepoint.com/real-time-status-update-app-angularjs-firebase/
-
The free, weekly newsletter of the best AngularJS content on the web. http://www.ng-newsletter.com/
-
https://egghead.io/
-
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md
-
https://scotch.io/tutorials/creating-a-single-page-todo-app-with-node-and-angular
-
-
Микроразметка
-
http://schema.org - главный сайт по микроразметке. Поддерживается самыми главными поисковиками - Google, Yandex, Yahoo и т.д. И рекомендуетс
-
http://microformats.org/code/hcard/creator - генератор кода для подобия визитной карточки автора с микроразметкой
-
http://microformats.org/code/hcalendar/creator - генератор кода для календарного события с микроразметкой
-
http://microformats.org/code/hreview/creator - генератор кода для отзыва, обзора с микроразметкой
-
http://rdfa.info/play/ - еще один инструмент по работе с микроразметкой
-
-
React + Flux
-
https://facebook.github.io/flux/
-
https://facebook.github.io/react/
-
https://www.youtube.com/watch?list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0v&v=nYkdrAPrdcw
-
https://facebook.github.io/react/docs/getting-started.html
-
React.js Introduction For People Who Know Just Enough jQuery To Get By http://reactfordesigners.com/labs/reactjs-introduction-for-people-who
-
https://facebook.github.io/flux/docs/overview.html
-
https://github.com/enaqx/awesome-react
-
How to Build a Todo App Using React, Redux, and Immutable.js https://www.sitepoint.com/how-to-build-a-todo-app-using-react-redux-and-immutab
-
http://code.tutsplus.com/courses/build-a-microblogging-app-with-flux-and-react
-
https://scotch.io/tutorials/learning-react-getting-started-and-concepts
-
https://egghead.io/courses/react-fundamentals
-
https://facebook.github.io/react/docs/getting-started.html
-
https://css-tricks.com/learning-react-redux/
-
https://scotch.io/tutorials/learning-react-getting-started-and-concepts
-
- 5010
- 15 июля 2016, 23:42
Не пропустите новые записи!
Подпишитесь на цель и следите за ее достижением