Front-end moderno: Gulp, SASS, NPM-script, Git e Git-bash
5.0 (2 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
17 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Front-end moderno: Gulp, SASS, NPM-script, Git e Git-bash to your Wishlist.

Add to Wishlist

Front-end moderno: Gulp, SASS, NPM-script, Git e Git-bash

Workflow Front-end: evolua seu próximo projeto para além do HTML, CSS e Javascript com este curso 100% prático
5.0 (2 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
17 students enrolled
Last updated 8/2017
Portuguese
Curiosity Sale
Current price: $10 Original price: $70 Discount: 86% off
30-Day Money-Back Guarantee
Includes:
  • 12.5 hours on-demand video
  • 4 Articles
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Otimizar o workflow frontend
  • Interagir através de uma terminal que simula comandos UNIX no windows
  • Executar diversos tipos de tarefas automatizadas usando o Gulp
  • Utilizar npm-scripts em seu workflow
  • Desenvolver suas folhas de estilos com a ajuda do pré-processador Sass
View Curriculum
Requirements
  • O aluno deve possuir alguma vivência com HTML e CSS
  • O aluno deve ter uma noção básica de Javascript
Description

Visando atender a demanda do mercado por profissionais qualificados, este treinamento aborda vários aspectos do desenvolvimento front-end, como por exemplo: programas de linha de comando; utilizando o node.js no ambiente de desenvolvimento; Trabalhando com um pré-processador de CSS (Sass) e Automatizando tarefas repetidas (gulp e npm-scripts).

Além disso, este curso aborda aspectos importantes na hora do projeto como: performance do site/aplicação; acessibilidade; semântica entre outros.

Este curso apresenta a você, que já possui conhecimentos de HTML, CSS e Javascript, todo o fluxo de desenvolvimento front-end com um projeto real. Que será construído do zero, desde a primeira tag.

Estes são alguns itens abordados:

  • Compilação SASS (SCSS) para otimizar o desenvolvimento das nossas folhas de estilo
  • Criar um servidor localhost pela linha de comando
  • Live Reload
  • Incluir prefixos dos browsers automaticamente
  • Criar componentes html para facilitar a manutenção
  • Minificar e concatenar Javascript
  • Otimizar imagens
  • Avaliar performance e acessibilidade do site

Ao final deste treinamento, você terá condições de utilizar  o workflow apresentado neste treinamento ou até mesmo criar o seu próprio visando atender as suas necessidades.

Who is the target audience?
  • Desenvolvedores front-end
  • web-designers
  • profissionais da web em geral
Students Who Viewed This Course Also Viewed
Curriculum For This Course
84 Lectures
12:43:40
+
Introdução
3 Lectures 33:09

Principais comandos UNIX no ambiente windows
08:42

Mais comandos Unix
10:48
+
Preparando o ambiente de trabalho
6 Lectures 01:01:31
Primeiros commits
18:36

commitar alterações
05:15

Escrevendo HTML mais produtivo com o Emmet
08:32

Começar o html da index - parte 1
18:16

Começar o html da index - parte 2
09:49

Começar o html da index - parte 3
01:03
+
NodeJS, Gerenciamento de pacotes e npm-scripts
9 Lectures 47:33
Gerenciamento de dependência no front-end
06:45

Instalação do NodeJS no ambiente windows
02:19

Criar um projeto do NodeJS e instalar o Bootstrap
05:43

Mas onde entra o "gerenciamento de dependências"?
07:12

Versionar ou não versionar os pacotes instalados?
04:30

Os arquivos de desenvolvimento são os mesmos arquivos de produção?
05:40

Conhecendo scripts de automatização usando o npm-scripts
11:17

Errata: corrigindo os caminhos dos arquivos no npm script e na index.html
00:34

Criando nossos npm-scripts customizados
03:33
+
Pré-processador SASS
7 Lectures 01:31:31
Compilador Sass no Windows (sem Ruby instalado)
19:43

Compilar Sass pelo terminal
12:19

Especificidade, mixins e include
17:05

Monitorar os arquivos do sass para gerar arquivos css automaticamente
07:51

Nesting
12:42

Diferença entre mixins e extend
04:14

functions
17:37
+
Automatização de tarefas com o Gulp
3 Lectures 30:04
Conceitos sobre o Gulp.
09:49

Criar a primeira tarefa do Gulp (compilar Sass)
12:30

Monitorar alterações com o Gulp
07:45
+
Projeto Final: Sass
2 Lectures 14:31
Errata: link para download das imagens
00:09

Estrutura dos arquivos Sass no projeto final
14:22
+
Projeto Final: Menu de navegação
7 Lectures 44:03
Progressive enhacement
05:20

Mobile First
04:43

Como o menu deve se comportar quando não houver suporte do javascript?
09:23

Como o menu deve ser comportar quando o javascript estiver habilitado no browser
06:10

Acessibilidade: como o menu deve se comportar em leitores de telas
08:10

Incluir logo SVG
08:19

Menu de navegação: palavras finais
01:58
+
Projeto Final: Jumbotron
11 Lectures 01:44:46
Um pouco sobre a semântica: Hierarquia da informação
09:40

O problema de vazamento de CSS
05:40

Jumbotron: primeiras regras de CSS e a especificidade do Bootstrap
17:27

Jumbotron: Avançando a formatação com o Sass
13:08

Jumbotron: dando um tempo do mobile first para ficar mais animado
02:19

Jumbotron: criando as media queries
05:23

Jumbotron: criando o html e css das imagens animadas
07:01

Jumbotron: animando as nuvens
11:09

Jumbotron: animando os demais elementos
06:41

Jumbotron: usando mixins para escrever menos código
13:48

Jumbotron: usando maps para escrever menos ainda
12:30
+
Projeto Final: Card Portifólio
3 Lectures 44:38
Card Portifólio: estrutura básico do sass
19:13

Card Portifólio: se beneficiando dos mixins para gerar a sombra "curva"
17:26

Card Portifólio: finalizando o css com a transição da propriedade transform
07:59
+
Projeto Final: Footer
3 Lectures 13:26
Criar css para formatar o rodapé
10:27

Refatoração do html
01:32

Seria melhor escrever BEM?
01:27
6 More Sections
About the Instructor
Daniel Tapias Morales
5.0 Average rating
2 Reviews
17 Students
1 Course
Desenvolvedor Front-end e Instrutor

Formado em comunicação visual mas atuo com desenvolvedor front-end.

Escrevi meu primeiro <h1>Hello World</h1> lá pelos anos 2000, mas foi em 2011 que comecei a trabalhar com Javascript de verdade.

Atualmente trabalho numa startup como desenvolvedor front-end atuando principalmente com Javascript e AngularJS 1.x (de vez em quando dá uma saudadezinha do Jquery).

Também sou instrutor de disciplinas relacionadas ao desenvolvimento front-end, principalmente Javascript, HTML e CSS.