Как подключить SCSS к html?
Только что начала изучать scss и столкнулась с такой проблемой — scss и css взаимодействуют только между собой, но не с html. Работаю на компиляторе Prepros. Все файлы находятся на одном уровне, раньше с css таких проблем не возникало. В html все выглядит так:
scss Lorem ipsum
Даже не знаю уже, что сделать, кажется, что все перепробовала)
- Вопрос задан 12 июл.
- 1067 просмотров
3 комментария
Простой 3 комментария
Антон Литвиненко @AntonLitvinenko
такой путь не будет работать
Сергей delphinpro @delphinpro Куратор тега CSS
1. К странице подключается не sass а скомпилированный из него css
2. Так файлы не подключаются. Браузер не позволит их загрузить. Попробуйте просто href=»style.css»
Но я не помню, будет ли оно вообще работать при запуске из файловой системы.
Поставьте web сервер и запускайте через него. Под винду полно WAMP сборок, которые устанавливаются в один клик.
Рабочий стол\Асгард\2023\попытка миллион\
путь с кириллицей будет приносить еще множество проблем,
Prepos — простое, удобное и платное решение, но костыль -костылем.
если хотите препроцессоры и пр. нужно в минимуме осваивать консоль
например в случае scss — https://sass-lang.com/install/#command-line
Решения вопроса 1
Dymok @UnluckySerivelha
К html подключается CSS, а не SCSS.
Если вы работаете с SCSS, вам нужно скомпилировать его в CSS. С помощью gulp, webpack или еще какого-либо таскраннера/сборщика.
Если .css лежит рядом с .html, подключать его лучше так:
Как подключить SCSS
Как вы уже заметили, можно использовать вложения, т.е. как видно на примере, мы задали блоку .content отступ и внутри блока заголовок h3 будет зеленого цвета Так же в языке SCSS есть такие штуки как : Циклы, условия, математика Математика:
.link < padding: $padding / 2; >.link:hover
Условия:
@mixin clearfix($width: 'auto') < // Если переменная не задана, ставим значение auto @if $width == 'auto' < display: block; width: 100px; >@else < // Если переменная width не auto display: inline-block; width: $width; >>
По началу может показаться, что все это сложно и вам не нужно, но если вы разок поработаете с SCSS, уже будет трудно отказаться! Ближе с синтаксисом вы можете ознакомиться на официальном сайте
Как начать работать с SCSS?
Для начало вам нужно установить RUBY, по этому переходим на сайт и жмем на большую красную кнопку download. Открываете инсталятор и все время кликаете next. Главное учесть, что в одном из пунктов, он предложит установить переменную, чтобы можно было работать в консоле (cmd) , это важно, если галочку не поставите, то переменную потом придется ставить вручную! После установки ruby, нужно открыть консоль (Открыть run (window + R) , написать cmd и нажать enter), откроется черное окошко, где надо написать gem install sass и нажать enter, дальше установим framework compass ( В дальнейшем он вам понадобиться ) gem install compass
gem install sass gem install compass
Если все прошло гладко, то в этом же окошке так и будет написано (Successfully installed) Все самое необходимое уже сделали Теперь вы можете создавать файлы с типом .scss и начать писать стили, но как их потом компилировать в обычный css?
Использовать IDE
В основном у всех IDE, уже есть встроенный функционал, программа за вас создаст файл и при сохранении скомпилирует в обычный css
Использовать командую строку
Если вы тру кодер и используете предположим блокнот для работы, то вы можете использовать командную строку для конвертирования и даже для отслеживания изменений в файле. Чтобы инициировать папку для scss, в консоле нужно написать:
compass init
Для того чтобы начать отслеживание и автоматически перебирала все css файлы, нужно написать:
compass watch
Использовать программу помощник Koala
Koala — Это программа, которая делает все тоже самое, что и команды в консоле, только для удобства сделали графический интерфейс, где вы наглядно и даже не трогая клавиатуру, можете указать путь к рабочей папке, отслеживать изменения и компилировать ваши scss файлы.
Основные преимущества SCSS
Вложенность
.content < border: 1px solid red; .block < background: white; >>
Переменные
$green: #3ace62; $padding: 15px; .content < padding: $padding; h3< color: $green; >>
Математика
$block_width: 10px; .block
$class: col_; // 100 раз по кругу @for $i from 1 through 100 < // для каждого $col_#вместо i номер цикла .## < // Устанавливаем задний фон цвета cornflowerblue и // каждый цикл, делаем его чуть чуть светлее background-color: darken(cornflowerblue, 0% + ($i / 2)); >>
Вот и все! Если у вас остались вопросы, пишите в комментариях! Так же можете почитать о кнопках поделиться в социальных сетях
Подключаем SASS к проекту
После того как вы установили SASS, его необходимо подключить к вашему проекту, чтобы этот препроцессор отслеживал все изменения и компилировал конечный файл стиле.
Создаем проект
Если у вас уже есть текущий проект, то вам в папке где хранятся файлы стилей необходимо создать файл с расширением scss, например style.scss.
Теперь в этом файле вы будете писать все стили для вашего сайта, а SASS все будет компилировать в стандартный формат.
В случае, если у вас нет проекта, то вам стоит создать новый, вот скрин структуры моего демо-проекта:
Создайте папку css внутри вашего проекта и в ней два пустых файла: style.scss и style.css.
После того как мы создали пустой проект со всеми необходимыми для работы файлами, мы можем подключать SASS.
Как подключить SASS к проекту?
1. Запускаем командную строку, зажав комбинацию клавиш Win+R, появится такое окошко:
в нем вводим команду cmd и жмем ОК.
Откроется командная строка: 
Теперь нам необходимо перейти в папку вашего проекта в которой находятся файлы style.scss и style.css.
Вводим букву диска на котором находится ваш проект, моем случае — это Х и после буквы диска ставим двоеточие, жмем Enter. 
Пишем команду cd и путь к к папке с файлами стилей, жмем Enter. 
Команда cd — изменяет текущую папку (change directory)
Теперь мы можем сказать SASS отслеживать все изменения в файле style.scss и вносить их в файл style.css.
Для этого нужно написать следующую команду:
sass —watch style.scss:style.css
После того как вы ввели эту команду, на экране появится уведомление, что SASS отслеживает изменения. (как на картинки выше)
Теперь вы можете внести правки в файл style.scss, сохранить их и посмотреть что файл в style.css все скомпилировалось
Как видим из примера на картинке выше, в SASS есть принцип наследование и не только он, а много другого о чем мы поговорим в следующих статьях ��
Sass для самых маленьких — подробное руководство
Это подробное руководство по препроцессору Sass для начинающих. Здесь мы познакомимся с препроцессором Sass, его преимуществами, синтаксисом и рассмотрим возможности использования на примерах.
Поделиться Отправить Класснуть Запинить
Все примеры и настроенный проект данного урока вы можете Скачать с GitHub
Sass — это один из наиболее развитых и стабильных CSS препроцессоров, а также один из самых популярных препроцессоров у профессионалов.
Преимущества Sass
- Совместимость с различными версиями CSS, благодаря которой вы можете использовать любые CSS библиотеки в вашем проекте;
- Огромное количество разнообразных функций на любой случай жизни. Таким богатым функционалом могут похвастаться немногие CSS препроцессоры;
- Sass — это один из самых старых CSS препроцессоров, вобравший большой опыт за долгие годы своего существования;
- Замечательная возможность использовать Sass фреймворки, упрощающие жизнь разработчику. Один из таких фреймворков — Bourbon, который мы используем в некоторых выпусках Джедая верстки при написании Sass;
- Синтаксис. Вы можете выбрать один из двух синтаксисов, который вам ближе — упрощенный (SASS) и развернутый CSS-подобный (SCSS).
Когда я только знакомился с CSS препроцессорами, мне, как и многим другим начинающим веб-разработчикам, была не до конца понятна сама идея использования CSS препроцессоров. Зачем делать дополнительную прослойку, использовать какие-то инструменты, усложнять CSS, думал я. Но со временем начал понимать, что изо дня в день написание CSS становилось пыткой, серой рутиной, многие действия приходилось повторять, копировать селекторы, свойства и даже целые блоки CSS кода для достижения необходимого результата. Сегодня, на примерах, я покажу вам, как можно упростить работу, используя препроцессор Sass, разнообразить разработку и даже немного поразвлечься при написании каких-то более или менее сложных функций.
Настройка окружения
В качестве окружения для работы с Sass в этом уроке, как и в других наших уроках, мы будем использовать версию Sass для таск-менеджера Gulp (gulp-sass). Для использования оригинальной Ruby версии или компиляции Sass посредством специального ПО, вы можете ознакомиться с инструкциями на оф. сайте. Данный урок носит преимущественно практический характер, поэтому останавливаться на возможных вариантах подключения к проекту не будем, подключим Sass наиболее популярным способом, используя Gulp.
Убедитесь, что у вас установлена последняя версия Node.js и Gulp. Если Node.js не установлен, скачайте его и установите. После установки Node.js установите gulp командой «npm i -g gulp» (Windows) или «sudo npm i -g gulp» (Linux, OS X). Почитать: Подробное руководство Gulp.
В папке вашего проекта выполните команду npm init и заполните пошагово информацию о вашем новом проекте. Пример, также, есть на странице руководства Gulp.
Далее установим в проект пакеты gulp, sass и gulp-sass командой:
npm i --save-dev gulp sass gulp-sass
Внимание! Для корректной работы Sass в настоящее время требуется установить дополнительный пакет «sass» (npm i -D sass), а подключать модули Sass в gulpfile.js следует следующим образом:
const sass = require('gulp-sass')(require('sass'));
Далее в папке проекта создадим gulpfile.js следующего содержания:
var gulp = require('gulp'), // Подключаем Gulp sass = require('gulp-sass')(require('sass')); // Подключаем Sass пакет gulp.task('sass', function() < // Создаем таск "sass" return gulp.src(['sass/**/*.sass', 'sass/**/*.scss']) // Берем источник .pipe(sass().on('error', sass.logError)) // Преобразуем Sass в CSS посредством gulp-sass .pipe(gulp.dest('css')) // Выгружаем результата в папку css >); gulp.task('watch', function() < gulp.watch(['sass/**/*.sass', 'sass/**/*.scss'], ['sass']); // Наблюдение за sass файлами в папке sass >); gulp.task('default', ['watch']);
Обратите внимание на строку 6 — здесь мы используем один из стилей вывода в результирующий файл: nested — вложенный, по умолчанию; expanded — развернутый; compact — компактный, когда селектор и его свойства в фигурных скобках выводятся в одну строку; compressed — сжатый. Кроме того, благодаря обработке .on(‘error’, sass.logError), если возникнет ошибка, нам не придется перезагружать команду выполенния Gulpfile и мы будем видеть, в какой строке Sass файла у нас ошибка. В примерах я буду использовать стиль вывода expanded для наглядности.
У вас должна быть следующая структура проекта в вашей файловой системе:
Запускаем выполнение Gulpfile командой gulp в терминале папки проекта.
Здесь мы берем все Sass файлы из директории sass/ вашего проекта и выгружаем готовый CSS результат в папку css/. Кроме того, здесь мы устанавливаем наблюдение watch за изменениями в Sass файлах и автоматическую компиляцию в CSS, если такие изменения имеют место быть. Результирующий css файл подключается в верстку.
Если вам что-то не понятно по настройке Gulp пакетов в данном примере, прочтите руководство Gulp.
После того, как наше окружение настроено и Sass успешно преобразуется в CSS при сохнанении *.sass файлов в директории sass/, можно спокойно продолжать обучение и выполнять примеры, которые мы будем сегодня разбирать, на практике.
Синтаксис Sass
Есть 2 варианта написания Sass, 2 синтаксиса: SASS и SCSS. Самый старый вариант написания Sass — это синтаксис отступов. Именно этот вариант написания мы будем использовать в нашем уроке. Расширение файлов для такого синтаксиса — *.sass. Второй вариант — это синтаксис, расширяющий синтаксис CSS, Sassy CSS. SCSS пишется как обычный CSS, но расширен дополнительными возможностями Sass. Расширение файлов с SCSS синтаксисом — *.scss.
Очень важно! Синтаксис отступов требует очень четкого соблюдения отступов у вложенных свойств и если у вас возникают ошибки при запуске Gulp или неявные ошибки без указания строки в консоли — скорее всего, ошибка именно в неправильных отступах. Еще важная деталь — если у вас в качестве отступов используются табы, компилятор выдаст ошибку при попытке конвертировать Sass, в котором помимо табов, также, исвользуются пробелы в качестве отступов. Либо вы используете только табы, либо только пробелы.
SASS и SCSS синтаксис:
$font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color
$font-stack: Helvetica, sans-serif; $primary-color: #333; body
Кроме базовых правил написания (фигурные скобки, точка с запятой в конце строк), SASS и SCSS различаются также написанием некоторых функций. Так что будьте внимательны при использовании каких-либо примеров из интернета, проверяйте, какой именно синтаксис используется. Если довольно большой пример из интернета выполнен в SCSS стиле, а ваш проект написан в SASS, вы можете его импортировать в ваш основной файл, не меняя синтаксис и расширение файла посредством директивы @import, например, если вы скачали файл carousel.scss, то можете подключить его в ваш main.sass строкой @import «carousel». Также можно поступить в обратной ситуации, когда необходимо импортировать *.sass файлы в файл main.scss. В нашем примере с Гитхаба, мы импортируем все _x.x.sass файлы в один common.sass, где x.x — это номер заголовка примера из данной статьи.
Мы будем использовать синтаксис отступов.
1. Расширение возможностей CSS с помощью Sass
1.1 Правила вложения
Sass дает разработчикам замечательную возможность использовать вложение одних CSS правил в другие, тем самым сокращая время на написание/копирование длинных селекторов и делая код более структурированным, с четкой иерархией.
#main p color: #00ff00 width: 97% .redbox background-color: #ff0000 color: #000000
#main p < color: #00ff00; width: 97%; >#main p .redbox
#main width: 97% p, div font-size: 2em a font-weight: bold pre font-size: 3em
#main < width: 97%; >#main p, #main div < font-size: 2em; >#main p a, #main div a < font-weight: bold; >#main pre
1.2 Привязка к родительскому селектору
Если вы хотите расширить селектор, не создавая нового правила, вы можете привязать к готовому селектору дополнительные селекторы, используя знак &. Внешне это выглядит как создание дочернего селектора в иерархии, но с использованием &, мы расширяем именно родительский селектор, а не создаем дочерний.
#main color: black a font-weight: bold &:hover color: red
#main < color: black; >#main a < font-weight: bold; >#main a:hover
a font-weight: bold text-decoration: none &:hover text-decoration: underline body.firefox & font-weight: normal
a < font-weight: bold; text-decoration: none; >a:hover < text-decoration: underline; >body.firefox a
Обратите внимание на правило body.firefox &, которое позволяет нам получить новую цепочку от любого элемента до текущего, если установить в конце &.
Кроме того, привязку к родителю можно использовать для создания составных селекторов:
#main color: black &-sidebar border: 1px solid
#main < color: black; >#main-sidebar
1.3 Вложенные свойства
Для удобства, вы можете разбивать суффикс пространства имен свойства на вложения. Например, margin-top, margin-bottom, margin-left, margin-right имеют общую основу margin и могут быть разбиты на вложения следующим образом:
.selector margin: top: 10px bottom: 15px left: 20px right: 30px
.selector
1.4 Селекторы-шаблоны
Иногда возникает ситуация, когда несколько элементов на странице используют одинаковую CSS базу, одинаковый набор свойств, характерный только для них. Данные базовые CSS правила можно оформить в виде селектора-шаблона для использования в нескольких местах Sass. Селекторы-шаблоны выводятся посредством директивы @extend.
%item-base display: inline-block transition: all .5s ease max-width: 320px .item-type-one @extend %item-base margin-top: 20px .item-type-two @extend %item-base margin-top: 10px
.item-type-one, .item-type-two < display: inline-block; transition: all .5s ease; max-width: 320px; >.item-type-one < margin-top: 20px; >.item-type-two
2. SassScript
SassScript позволяет значително расширить возможности Sass за счет использования пользовательских переменых, арифметических и прочих функций. SassScript может быть использован для автоматической генерации новых селекторов и свойств.
2.1 Переменные в Sass
Это действительно замечательная возможность — определять переменные, которые можно использовать в любом месте вашего Sass файла. Цвета, дефолтные значения, единицы, все это можно взять в переменную и использовать в дальнейшем. Переменная определяется так: $название: значение.
$accent: #FF9910 .button background-color: $accent color: #fff
.button
2.2 Операции с числами и строками + интерполяция
Внимание! Деление в настоящее время следует выполнять функцией math.div(), а не прямым слешем, как будет показано ниже. Например:
// Неправильно: $summ: 10 + 20 / 2 // Правильно: $summ: 10 + math.div(20, 2)
Обратите внимание, что для использования функции math.div() необходимо указать в самом начале sass-файла директиву подключения «@use ‘sass:math’». Скачиваем и смотрим примеры из урока.
Sass дает возможность использовать стандартные арифметические операции над числами, такие как сложение (+), вычитание (-), деление (/) и остаток от деления по модулю (%). Операторы сравнения (, =, ==, !=) также поддерживаются для чисел.
Кроме того, в Sass есть возможность конкатенировать (соединять) строки.
$summ: 10 + math.div(20, 2) $cn: content .selector margin: top: $summ + px bottom: 12px + 8px background-color: trans + parent #: "con" + "tent"
.selector
Как видим из примера $summ: 10 + math.div(20, 2), соблюдается приоритет в выполнении арифметических операций — сначала деление, потом сложение. Для определения порядка действий, можно использовать круглые скобки, как в математике. Обратите внимание, что при сложении 12px + 8px, мы получим 20px.
Обратите также внимание на строки 2 и 9, здесь мы используем интерполяцию для размещения динамических значений в любом месте Sass файла, в том числе и в месте, где у нас идет название свойства, название селектора или в любой строке.
Интерполяция — это получение нового значения, используя другие.
Чаще всего интерполяция в Sass используется для получения нового значения переменной, благодаря «интегрированию» в значение другой переменной, посредством конструкции #<>, например:
$in: интер .interpol content: "#поляция"
.interpol
Вы не можете просто взять и вставить в строку переменную, без использования интерполяции, как например, это можно сделать в PHP, в двойных кавычках. Обязательно используйте интерполяцию в переменные.
2.3 Операции с цветами
Внимание! Сложение цветов теперь следует выполнять посредством функции color.mix(), а не «+»:
// Неправильно: #440203 + #550506 // Правильно: color.mix(#440203, #550506)
Цвета в Sass можно складывать, вычетать, делить и умножать. Все арифметические операции выполняются для каждого цвета отдельно: красного, зеленого и синего.
$color1: color.mix(#440203, #550506) $color2: color.mix(rgba(180, 0, 0, .75), rgba(20, 255, 0, .75)) body background-color: $color1 color: $color2
body
Обратите внимание, что при сложении rgba цветов, последний параметр непрозрачности 0.75 не должен отличаться от других в выражении, иначе произойдет ошибка сложения. Вместо этого, можно регулировать альфа-канал rgba, используя opacify и transparentize или управлять непрозрачностью HEX цвета, посредством функции rgba.
$translucent-red: rgba(255, 0, 0, 0.5); p color: opacify($translucent-red, 0.3) background-color: transparentize($translucent-red, 0.25) .selector background-color: rgba(#333, 0.75)
p < color: rgba(255, 0, 0, 0.8); background-color: rgba(255, 0, 0, 0.25); >.selector
3. Директивы и правила
3.1 @import
Вы можете импортировать в ваш Sass файл sass, scss и css файлы с помощью директивы @import, при этом все миксины и переменные будут работать в основном файле, в который происходит импорт.
- в пути к файлу присутствует https://;
- файл вызывается через url();
- или в импорте присутствуют медиапараметры.
Для того, чтобы другой файл был полноценно импортирован в основной Sass файл, необходимо, чтобы расширение файла было *.sass, *.scss или *.css.
Давайте рассмотрим некоторые примеры.
Следующие файлы импортированы не будут:
@import "foo" screen; @import "https://foo.com/bar"; @import url(foo);
@import "foo" screen; @import "https://foo.com/bar"; @import url(foo);
Следующие файлы будут импортированы:
@import "foo.css"; @import "media.sass"; @import "media.scss"; @import "media"; // Если импортируем media.css или _media.sass / _media.scss
/* Результат импорта */
Внимание! В новых версиях gulp-sass для импорта CSS файлов в Sass необходимо указывать расширение .css
Возможен импорт нескольких файлов, через запятую: @import «header», «media».
Файлы, которые начинаются с нижнего подчеркивания, называются фрагменты и при импорте не требуют указания подчеркивания и расширения. Например, файл _header.sass можно импортировать так: @import «header».
Обратите внимание, что импорт происходит в том месте, где вы указываете директиву @import. Соответственно, есть возможность делать вложенный импорт в том месте, где это необходимо:
#main @import "example"
3.2 @at-root
Директива @at-root поднимает содержимые в ней правила в корень, отменяя цепочку от родителя. Тут все просто:
.selector margin-top: 10px @at-root .item background-color: #ccc .item background-color: #fff
.selector < margin-top: 10px; >.item < background-color: #ccc; >.selector .item
Мы рассмотрели не все директивы, которые есть в Sass, а только самые используемые на практике. Если вас интересует более глубокое изучение Sass директив, обратитесь к документации.
4. Выражения
Sass поддерживает использование выражений и функций для различных условий, реализации циклов и т.д.
4.1 Директива @if()
Директива @if() позволяет осуществить выполнение SassScript с определенными условиями и имеет следующий синтаксис:
$var: 5 .selector @if $var >= 5 content: '>= 5' @else if $var.selector < content: '>= 5'; >4.2 Директива @for
@for выводит блок со стилями определенное количество раз. Во время выполнения можно задать переменную-счетчик.
@for $i from 1 to 11 //through вместо to, если требуется "включительно" .item-# background-image: url(img/#.jpg).item-1 < background-image: url(img/1.jpg); >.item-2 < background-image: url(img/2.jpg); >.item-3 < background-image: url(img/3.jpg); >.item-4 < background-image: url(img/4.jpg); >.item-5 < background-image: url(img/5.jpg); >.item-6 < background-image: url(img/6.jpg); >.item-7 < background-image: url(img/7.jpg); >.item-8 < background-image: url(img/8.jpg); >.item-9 < background-image: url(img/9.jpg); >.item-10 < background-image: url(img/10.jpg); >Вы можете указать through вместо to, если требуется пройтись от 1 до 11 включительно, а не только до 10, как в примере.
4.3 Директива @each
Если требуется пройтись по списку значений, а не просто чисел, можно использовать директиву @each:
@each $name in carousel, block, vertical, reviews, footer .section-# background-image: url(img/#.jpg).section-carousel < background-image: url(img/carousel.jpg); >.section-block < background-image: url(img/block.jpg); >.section-vertical < background-image: url(img/vertical.jpg); >.section-reviews < background-image: url(img/reviews.jpg); >.section-footer < background-image: url(img/footer.jpg); >4.4 Директива @while
@while циклично выводит блоки стилей, пока выражение является true.
$i: 7 @while $i > 0 .item-# width: 1em * $i $i: $i - 3.item-7 < width: 7em; >.item-4 < width: 4em; >.item-1
5. Миксины
Миксины - блоки Sass кода (или примеси-шаблоны), которые могут принимать аргументы (опционально) и позволяют значительно расширить возможности написания стилей и сократить затраты времени на применении однотипных правил и даже целых CSS блоков. Это что-то вроде функции, которая может принять аргумент, выполнить огромный объем работы и выдать результат в зависимости от входного параметра.
Миксин объявляется директивой @mixin, после объявления должно быть указано имя миксина. Вызывается миксин директивой @include, которая принимает имя миксина и передаваемые аргументы, если такие имеют место быть.
@mixin border($color) border: $color 1px solid p @include border(#333) @mixin transition($time) -webkit-transition: all $time ease; -moz-transition: all $time ease; -o-transition: all $time ease; transition: all $time ease; p @include transition(.25s)Друзья, мы рассмотрели основные возможности Sass, которых достаточно для плодотворной работы с CSS стилями сайта. Некоторые директивы и возмоности не вошли в данное руководство, но если вам интересно узнать обо всех возможностях Sass, почитайте документацию, будет полезно.
Сразу отвечу на вопрос - как работать с Sass стилями на готовом сайте, неужели нужно править готовый CSS и заливать по FTP? Нет, так делать нельзя. Вы должны иметь локальную копию ваших Sass стилей или даже целого сайта и после окончания работы деплоить (выгружать) по FTP готовые стили. Для этого, вы можете использовать Gulp пакет vinyl-ftp. Или настроить Sass окружение на вашем сервере для компиляции загружаемых по FTP/sFTP файлов.
Премиум уроки от WebDesign Master
Создание сайта от А до Я. Комплексный курс
Создание современного интернет-магазина от А до Я
Я - фрилансер! Базовый курс для начинающих
Другие уроки по теме «Инструменты»
- Настройка VS Code для верстки
- Simple Starter - простой стартер для верстки | Материалы урока
- Делаем вкладки в проводнике Windows. Настройка QTTabBar от А до Я
- Хостинг от А до Я: Сайты, базы, домены, SSL, SSH, sFTP, перенос, деплой, секреты, лайфхаки
- Gulp 4 - Актуальное и исчерпывающее руководство для самых маленьких
- Актуальный способ установки и настройки окружения Windows WSL для веб-разработки