Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/edijunior88/codesigners_front-end_design_essencial

Aprenda uma base sólida de HTML, CSS e JS criando um site do zero com foco nos elementos de interface e interações!
https://github.com/edijunior88/codesigners_front-end_design_essencial

css3 curso education hmtl5 javascript site

Last synced: about 1 month ago
JSON representation

Aprenda uma base sólida de HTML, CSS e JS criando um site do zero com foco nos elementos de interface e interações!

Host: GitHub
URL: https://github.com/edijunior88/codesigners_front-end_design_essencial
Owner: EdiJunior88
License: mit
Created: 2021-06-03T18:56:35.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2024-05-02T17:00:37.000Z (8 months ago)
Last Synced: 2024-05-03T02:02:48.221Z (8 months ago)
Topics: css3, curso, education, hmtl5, javascript, site
Language: HTML
Homepage:
Size: 21.5 MB
Stars: 2
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

Codesigners

Front-End Design Essencial - HTML, CSS e JS Completo do Zero

Aprenda uma base sólida de HTML, CSS e JS criando um site do zero com foco nos elementos de interface e interações!

Tecnologias Utilizadas

- [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) – Languages

Para ver todas as tecnologias [clique aqui](/techstack.md)

Seção 1: Introdução

Como tirar melhor proveito deste curso

Seção 2: Introdução ao HTML e CSS

Estágios de um projeto

O que é HTML

Como fazer HTML

Instalando e Configurando o Editor de Código

Tags e Semântica HTML

O que é CSS

Começando no CSS

Folha de estilos externa e cascata

Tipografia na web

Cores na Web

Exercício CSS 01 - Parte 1

Exercício CSS 01 - Parte 2

Exercício CSS 01 - Parte 3

Exercício CSS 01 - Parte 4

Exercício CSS 01 - Parte 5

Design patterns e o Atomic Design

Exercício CSS 02 - Parte 1

Exercício CSS 02 - Parte 2

Exercício CSS 02 - Parte 3

Exercício CSS 02 - Parte 4

Exercício CSS 02 - Parte 5

Exercício CSS 02 - Parte 6

Exercício CSS 02 - Parte 7

Exercício CSS 02 - Parte 8

Seção 3: Layouts, Grids e Flexbox

Tipos de layout web

O que é design responsivo

Fazendo design responsivo com Media Queries

Sistemas de grid

Customizando e Baixando o Bootstrap Grid System

Usando o Bootstrap Grid System

Flexbox - Intro

Flexbox - Display Flex e Flex-Direction

Flexbox - Flex-Wrap

Flexbox - Justify-Content

Flexbox - Align-Items

Flexbox - Align-Content

Flexbox - Order

Flexbox - Flex-Grow

Flexbox - Flex-Shrink

Flexbox - Flex 'Shorthand'

Flexbox - Align-Self

Seção 4: Animações com CSS e SVG

Animações com CSS - Intro

Animações com CSS - Parte 1

Animações com CSS - Parte 2

Animações com CSS - Transform

Animações com CSS - Exemplo de aplicação - Parte 1

Animações com CSS - Exemplo de aplicação - Parte 2

A biblioteca Animate.css

Introdução ao SVG

Criando SVGs - Parte 1

Criando SVGs - Parte 2

Inserindo SVGs no HTML - Parte 1

Inserindo SVGs no HTML - Parte 2

Animando Imagens SVG - Parte 1

Animando Imagens SVG - Parte 2

Seção 5: Javascript

O que é Javascript

Client Side e Processo de Renderização

Conhecendo o Console

Sintaxe e API Javascript

O Objeto Window

Dados primitivos Javascript

Variáveis Javascript

Operadores e precedência

Seletores - Parte 1

Seletores - Parte 2

Condicionais - IF Else - Parte 1

Condicionais - IF Else - Parte 2

Condicionais - Switch Case

Eventos

Funções

Array - Parte 1

Array - Parte 2

Objetos - Parte 1

Objetos - Parte 2

Objetos - Parte 3

Loops

Seção 6: JQuery (opcional)

JQuery - Ressalva

JQuery - Versões

JQuery - Seletores e CSS

JQuery - Exercício Busca Gato - Parte 1

JQuery - Exercício Busca Gato - Parte 2

JQuery - Add, Remove e Toggle Class

Seção 7: Projeto Final

Conhecendo o layout

Estruturando o projeto

Estrutura básica do CSS e Page Wrapper

Topbar - Posicionando o logo

Topbar - Fazendo o menu desktop - Parte 1

Topbar - Fazendo o menu desktop - Parte 2

Complemento - Explicação rápida sobre transform-origin

Contato - Fazendo o botão de contato

Utilitários - Criando as primeiras classes utilitárias

Contato - Fazendo a box de contato - Parte 1

Contato - Fazendo a box de contato - Parte 2

Contato - Fazendo o Toggle Click no botão de contato

Preloader - Fazendo a tela de preloader com HTML e CSS

Preloader - Fazendo o Javascript da tela de preloader

IMPORTANTE! Correção do Preloader que ficou fora da aula anterior

Hero - Grid, texto e imagem - Parte 1

Hero - Grid, texto e imagem - Parte 2

Seta Scroll - Animação de scroll down - Parte 1

Seta Scroll - Animação de scroll down - Parte 2

Botões - Criando um sistema de botões - Parte 1

Botões - Criando um sistema de Botões - Parte 2

Modal - Posicionando o overlay e caixa de modal

Modal - Fazendo o formulário - Parte 1

Modal - Fazendo o formulário - Parte 2

Modal - Fazendo o Javascript

Waypoints - Animando elementos On Scroll

Portfolio Home (Slider) - Organizando colunas da grid

Portfolio Home (Slider) - Posicionando o navigator e seus elementos

Portfolio Home (Slider) - Formatando elementos do navigator

Portfolio Home (Slider) - Formatando setas e números

Portfolio Home (Slider) - Como irá funcionar o slider

Portfolio Home (Slider) - Marcando os blocos do slider

Portfolio Home (Slider) - Passando larguras dinâmicamente para os blocos

Portfolio Home (Slider) - Fazendo o slider funcionar com Anime JS

Portfolio Home (Slider) - Refatorando o código do slider e design patterns

Portfolio Home (Slider) - Slide counter - Parte 1

Portfolio Home (Slider) - Slider counter - Parte 2

Portfolio Home (Slider) - Sincronizando os navigator items

Portfolio Home (Slider) - Animando os navigator items

Portfolio Home (Slider) - Trocando o navigator number

Portfolio Home (Slider) - Complemento - Referência no grid system

Portfolio Home (Slider) - Posicionando o slide info

Portfolio Home (Slider) - Posicionando o slide thumbnail

Portfolio Home (Slider) - Animando elementos do slide - Parte 1

Portfolio Home (Slider) - Animando elementos do slide - Parte 2

Portfolio Home (Slider) - Melhorando botões e finalizando Home

Page Portfolio - Visão geal

Page Portfolio - Complemento - Navegando entre arquivos HTML

Page Portfolio - Estruturando o HTML - Parte 1

Page Portfolio - Estruturando o HTML - Parte 2

Page Portfolio - Iniciando a listagem de projetos

Page Portfolio - Refatorando a listagem de projetos

Page Portfolio - Alternando itens na lista de projetos - Parte 1

Page Portfolio - Alternando itens na lista de projetos - Parte 2

Page Portfolio - Animando itens On Scroll

Page Sobre - Visão geral

Page Sobre - Estruturando as colunas

Page Sobre - Inserindo imagens e textos

Page Sobre - Fazendo imagem responsiva e lista padrão

Page Sobre - Fazendo ícones de contato

Page Detalhes - Visão geral

Page Detalhes - Hero banner - Parte 1

Page Detalhes - Hero banner - Parte 2

Page Detalhes - Hero banner - Parte 3

Page Detalhes - Estruturando post sections

Page Detalhes - Inserindo texto, imagens e parallax

Page Detalhes - Fazendo os thumbs da galeria

Page Detalhes - Refinando o alinhamento dos elementos

Page Detalhes - Fazendo lazy loading dos thumbs - Parte 1

Page Detalhes - Fazendo lazy loading dos thumbs - Parte 2

Page Detalhes - Galeria Overlay - Posicionando o modal

Page Detalhes - Galeria Overlay - Carregando imagem no frame

Page Detalhes - Galeria Overlay - Toggle modal

Page Detalhes - Galeria Overlay - Definindo lógica do Next/Prev

Page Detalhes - Galeria Overlay - Fazendo Next/Prev Javascript

Page Detalhes - Galeria Overlay - Contador de itens

Page Detalhes - Galeria Overlay - Posicionando skeleton loading

Page Detalhes - Galeria Overlay - Animando skeleton loading

Page Detalhes - Galeria Overlay - Skeleton loading Javascript

Responsividade - Introdução

Responsividade - Menu mobile - Parte 1

Responsividade - Menu mobile - Parte 2

Responsividade - Menu mobile - Parte 3

Responsividade - Home - Section apresentação - Parte 1

Responsividade - Home - Section apresentação - Parte 2

Responsividade - Home Slider - Visão geral

Responsividade - Home Slider - Texto e thumb - Parte 1

Pesponsividade - Home Slider - Texto e thumb - Parte 2

Responsividade - Home Slider - Texto e thumb - Parte 3

Responsividade - Home Slider - Texto e thumb - Parte 4

Responsividade - Home Slider - Texto e thumb - Parte 5

Responsividade - Home Slider - Texto e thumb - Parte 6

Responsividade - Home - Ajustando o modal overlay

Home - Corrigindo animação de scroll down

Responsividade - Home - Revisando e corrigindo bugs

Responsividade - Portfolio - Parte 1

Responsividade - Portfolio - Parte 2

Responsividade - Portfolio - Parte 3

Responsividade - Portfolio - Parte 4

Responsividade - Detalhes Projeto - Visão geral

Responsividade - Detalhes Projeto - Banner topo - Parte 1

Responsividade - Detalhes Projeto - Banner topo - Parte 2

Responsividade - Detalhes Projeto - Corpo da página

Responsividade - Detalhes Projeto - Galeria

Responsividade - Sobre - Visão geral

Responsividade - Sobre - Imagem sobre

Responsividade - Sobre - Texto sobre

Responsividade - Sobre - Alinhamento

Melhoramentos - Menu mobile

Melhoramentos - Corrigindo erros e warnings do console

Melhoramentos - Topbar background on scroll - Parte 1

Melhoramentos - Topbar background on scroll - Parte 2

Melhoramentos - Refatorando a borda da página

Melhoramentos - Hover nos thumbs da galeria - Parte 1

Melhoramentos - Hover nos thumbs da galeria - Parte 2

Melhoramentos - Fazendo a página de erro 404

Melhoramentos - Refatorando botões e corrigindo animação de scroll down

Seção 8: Publicando o Site

Entendendo a relação entre Client e Server

Instalando um servidor local

Tornando as URLs amigáveis

Corrigindo e finalizando URLs amigáveis

Critérios de performance do Google Speed Insights

Otimizando e comprimindo imagens

Otimizando e minificando HTML, CSS e Javascript

Adicionando o domínio ao servidor e criando conta FTP

Enviando os arquivos o servidor via FTP

Configurando DNS e apontando o domínio para o servidor

Corrigindo ERR_NAME_NOT_RESOLVED

Configurando a página de Erro 404 no servidor

Revisão Final - Identificando Bugs

Revisão Final - Corrigindo bugs

Publicando arquivos corrigidos