Webpack

[Heidel]

Пособие по webpack https://habrahabr.ru/post/309306/

Создать проект

Инициализировать проект

npm init

Установить Webpack на проект

npm i -D webpack

Установить Webpack глобально

npm -g i webpack

Просмотреть версии Webpack

npm view webpack versions

Установить определенную версию Webpack

npm i -D webpack@2.2.0

@темы: Webpack

---

Screenshots with JavaScript

[Heidel]

https://html2canvas.hertzen.com/

@темы: Верстка, Screenshots with JavaScript

---

Hexagon menu

[Heidel]

https://codepen.io/web-tiki/pen/WvNQpG

https://ru.stackoverflow.com/questions/778110/css-%D0%B0%D0%BD%D0%B8%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%BD%D0%BE%D0%B5-%D1%88%D0%B5%D1%81%D1%82%D0%B8%D1%83%D0%B3%D0%BE%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5-%D0%BC%D0%B5%D0%BD%D1%8E

@темы: Верстка, Hexagon menu

---

Motion UI

[Heidel]

https://zurb.com/playground/motion-ui

@темы: Верстка, Motion UI

---

Svg

[Heidel]

http://css-live.ru/category/svg

@темы: Svg

---

Flexbox

[Heidel]

Aligning Items in a Flex Container

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

@темы: Flexbox

---

[Heidel]

Style for “default” links

a[href]:not([class]) {    
    color: #999;    
    text-decoration: none;  
    transition: all ease-in-out .3s;
}

Style Broken Images

img {    
    display: block;    
    font-family: Helvetica, Arial, sans-serif;    
    font-weight: 300;    
    height: auto;    
    line-height: 2;    
    position: relative;    
    text-align: center;    
    width: 100%;  
}
img:before {    
    content: "We're sorry, the image below is missing :(";    
    display: block;    
    margin-bottom: 10px;  
}    
img:after {    
    content: "(url: " attr(src) ")";   
    display: block;    
    font-size: 12px;  
}

:not(:last-child)

.nav li:not(:last-child) {    
    border-right: 1px solid #666;  
}

@темы: HTML, Верстка, CSS

---

Loaders

[Heidel]

https://codepen.io/nikhil8krishnan/pen/rVoXJa

https://codepen.io/collection/jifIK/

https://codepen.io/TaniaLD/pen/oKxep

https://www.cssdesignawards.com/blog/excellent-css-svg-loaders/165/

@темы: Loaders

---

React

[Heidel]

https://learn.javasсript.ru/screencast/react

https://reactjs.org/tutorial/tutorial.html

https://www.youtube.com/watch?v=ZEBcFvsI8LU

https://github.com/UsulPro/js-stack-from-scratch/blob/master/tutorial/01-node-yarn-package-json_ru.md

https://tproger.ru/translations/react-basic-weather-app/

React Tutorial for Beginners
https://ihatetomatoes.net/react-tutorial-for-beginners/

https://ihatetomatoes.net/rw/

9 принципов, которые должен знать новичок в React.js
https://medium.com/@apolyntsev/9-%D0%BF%D1%80%D0%B8%D0%BD%D1%86%D0%B8%D0%BF%D0%BE%D0%B2-%D0%BA%D0%BE%D1%82%D0%BE%D1%80%D1%8B%D0%B5-%D0%B4%D0%BE%D0%BB%D0%B6%D0%B5%D0%BD-%D0%B7%D0%BD%D0%B0%D1%82%D1%8C-%D0%BD%D0%BE%D0%B2%D0%B8%D1%87%D0%BE%D0%BA-%D0%B2-react-js-454e964062b

React Cheat Sheet
https://ihatetomatoes.net/wp-content/uploads/2017/01/react-cheat-sheet-v1.pdf

Создание приложения React

1. установить create-react-app

npm install -g create-react-app

2. создадим приложение

create-react-app имя_приложения

3. Запустить приложение

cd имя_приложения
npm start

4. установка react-bootstrap (Bootstrap v3!)

npm install --save bootstrap react-bootstrap

5. импорт стилей

import "bootstrap/dist/css/bootstrap.css";

6. установка axios https://github.com/axios/axios

npm install axios

Learn React

https://learn-reactjs.ru/

@темы: React, axios, react-bootstrap

---

Hamburger menu

[Heidel]

Tasty CSS-animated hamburgers
https://jonsuh.com/hamburgers/

Menu "Hamburger" Icon Animations
https://codepen.io/designcouch/pen/Atyop

@темы: Верстка, Hamburger menu, CSS3

---

[Heidel]

Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width
https://www.fourfront.us/blog/jquery-window-width-and-media-queries

$(window).width() not the same as media query
https://stackoverflow.com/questions/19291873/window-width-not-the-same-as-media-query

https://stackoverflow.com/questions/20181219/twitter-bootstrap-how-to-detect-when-media-queries-starts

@темы: Верстка, Bootstrap, jQuery, Bootstrap 4

---

Flexbox

[Heidel]

A Complete Guide to Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Прижать футер к низу
https://codepen.io/html5book/pen/QMLRLR

@темы: Прижать футер к низу, Flexbox

---

Иконки

[Heidel]

https://www.flaticon.com/

@темы: Icons, Иконки

---

Генератор спрайтов

[Heidel]

http://csssprites.org/

@темы: Sprites, Генератор Спрайтов, Спрайты

---

Seo Продвижение

[Heidel]

http://site-auditor.ru

Микроразметка https://yandex.ru/support/webmaster/supported-schemas/address-organization.html

Seo настройка robots.txt
https://seoprofy.ua/blog/optimizaciya-sajtov/robots-txt

(настройка роботс.тхт под вордпресс) http://romanus.ru/robots-txt-kak-sostavit-i-nastroit/

Тестирование мобильной версии сайта
https://ready.mobi/
Тестирование под iPhone http://www.testiphone.com/
https://search.google.com/test/mobile-friendly

Оптимизация вордпресс https://netology.ru/blog/wordpress-seo

@темы: Seo

---

Photoshop. Растровая графика для начинающих

[Heidel]

https://geekbrains.ru/courses/18

@темы: Photoshop

---

Bootstrap 4 Grid System

[Heidel]

https://itchief.ru/lessons/bootstrap-3/bootstrap-4-grid-system

@темы: Bootstrap, Bootstrap 4

---

Bootstrap сетка

[Heidel]

Типичная ошибка сетки (Bootstrap Grid), или почему дизайнер и верстальщик не понимают друг друга
https://habrahabr.ru/sandbox/100135/


bootstrap-grid-only
https://www.npmjs.com/package/bootstrap-grid-only


Bootstrap сетка, PSD
http://webdesign-master.ru/blog/tools/2016-11-26-bootstrap-psd.html

@темы: Bootstrap

---

Оформление группы «Вконтакте»

[Heidel]

https://texterra.ru/blog/oformlenie-gruppy-vkontakte-samoe-podrobnoe-rukovodstvo-v-runete.html

---

Свой мини-хостинг (сервер) на DigitalOcean

[Heidel]

https://niklan.net/blog/69