Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/kaysilvha/curso-front-end-descodificadas

Repositório do curso de Front End da Descodificadas.
https://github.com/kaysilvha/curso-front-end-descodificadas

css git github html javascript ux-ui

Last synced: 3 days ago
JSON representation

Repositório do curso de Front End da Descodificadas.

Awesome Lists containing this project

README 

        
Curso-Front-End-Descodificadas





Bem-vindo ao repositório do curso de Front End da Descodificadas! Aqui, você encontrará todo o código fonte e exemplos práticos utilizados durante o curso, cobrindo HTML, CSS e JavaScript. O conteúdo está organizado por módulos e aulas, facilitando o acompanhamento e aprendizado. Aproveite e bons estudos!






  Sobre   |   

  Tecnologias   |   

  Trilhas   |   

  Conteúdos






  Logo





 



>🟡 Projeto em construção



> Deixa uma estrelinha?🙏⭐





## 🌼 Sobre





Este repositório armazena as aulas, materiais e exercícios práticos realizados durante o curso de Front-End. O objetivo é aprender novas habilidades em HTML, CSS, JavaScript, UX/UI e Git e Github.








## 👩‍💻 Tecnologias





Esse projeto foi desenvolvido com as seguintes tecnologias:



- JavaScript

- HTML

- CSS

- UX/UI

- Git e Github








## 🛤️ Trilhas





Os conteúdos foram distribuídos em trilhas e seus materiais se encontram nas respectivas pastas:



- Trilha 1

- Trilha 2

- ...

- ...

- ...








## ⭐ Conteúdos



  

## Trilha 1




### Aula 1

O que é uma landing page?



Nesta aula, exploramos os fundamentos de uma landing page, incluindo conceitos básicos de HTML e CSS, bem como a utilização de plataformas no-code e o Google Sites. Durante o aprendizado, discutimos como criar uma página de destino atraente e funcional sem a necessidade de conhecimentos avançados em programação, destacando a importância da apresentação visual e da experiência do usuário. Além disso, abordamos as vantagens e possibilidades oferecidas por ferramentas no-code, que permitem a criação rápida e intuitiva de sites e páginas, como o Google Sites, que oferece recursos de fácil utilização para construção e publicação de conteúdo online.





Códigos e Materiais: CLIQUE AQUI!








### Aula 2

Organização do ambiente de desenvolvimento e boas práticas



Aprenda a organizar seu ambiente de desenvolvimento, configurando ferramentas essenciais e adotando boas práticas para aumentar a produtividade. Vamos discutir a estrutura de pastas, convenções de nomenclatura e o uso de controle de versão com Git.





Códigos e Materiais: CLIQUE AQUI!








### Aula 3

Estrutura geral de uma página em HTML / Tags Semânticas



Nesta aula, vamos explorar a estrutura básica de uma página HTML e a importância das tags semânticas. Você aprenderá a criar uma página bem estruturada, melhorando a acessibilidade e a otimização para motores de busca.





Códigos e Materiais: CLIQUE AQUI!








### Aula 4

Imagem, som e vídeo



Descubra como incorporar mídia em suas páginas web. Aprenderemos a inserir imagens, áudio e vídeos utilizando as tags HTML apropriadas, garantindo uma experiência rica e interativa para os usuários.





Códigos e Materiais: CLIQUE AQUI!








### Aula 5

Formulários



Aprenda a criar formulários interativos e funcionais. Abordaremos os diversos tipos de campos de formulário, validação de dados e como estilizar seus formulários para melhorar a usabilidade.





Códigos e Materiais: CLIQUE AQUI!








### Aula 6

O que é CSS



Nesta aula, você será introduzido ao CSS, a linguagem de estilos utilizada para estilizar páginas web. Aprenderemos como aplicar estilos básicos a elementos HTML e a importância do CSS para o design web.





Códigos e Materiais: CLIQUE AQUI!








### Aula 7

Seletores



Explore os seletores CSS, que permitem aplicar estilos específicos a elementos HTML. Veremos diferentes tipos de seletores e como utilizá-los para personalizar o design da sua página web de forma eficaz.





Códigos e Materiais: CLIQUE AQUI!








### Aula 8

Box model



Entenda o conceito do box model no CSS, que define como os elementos HTML são renderizados. Aprenderemos sobre margens, bordas, preenchimentos e o conteúdo, e como manipulá-los para criar layouts precisos.





Códigos e Materiais: CLIQUE AQUI!








### Aula 9

Position



Aprenda sobre as diferentes propriedades de posicionamento no CSS, como `static`, `relative`, `absolute` e `fixed`. Descubra como controlar a posição dos elementos na página para criar layouts mais complexos.





Códigos e Materiais: CLIQUE AQUI!








### Aula 10

Flexbox



Explore o Flexbox, um poderoso sistema de layout CSS. Aprenderemos como usar o Flexbox para criar layouts responsivos e flexíveis, alinhando e distribuindo elementos de forma eficaz.





Códigos e Materiais: CLIQUE AQUI!








### Aula 11

Grid



Descubra o CSS Grid, uma ferramenta avançada para criar layouts complexos e responsivos. Aprenderemos a definir áreas de grid e a posicionar elementos de forma precisa em um layout bidimensional.





Códigos e Materiais: CLIQUE AQUI!








### Aula 12

Transições, animações e responsividade



Nesta aula, vamos aprender a criar transições suaves e animações usando CSS. Também abordaremos técnicas para tornar seu design responsivo, adaptando-se a diferentes tamanhos de tela.





Códigos e Materiais: CLIQUE AQUI!








### Aula 13

JavaScript: Introdução e Sintaxe



Inicie sua jornada com JavaScript, a linguagem de programação para a web. Aprenderemos a sintaxe básica e como incorporar JavaScript em suas páginas para adicionar interatividade.





Códigos e Materiais: CLIQUE AQUI!








### Aula 14

Valores, Variáveis e Operadores



Explore os fundamentos do JavaScript, incluindo tipos de valores, variáveis e operadores. Aprenderemos a manipular dados e a realizar operações básicas com JavaScript.





Códigos e Materiais: CLIQUE AQUI!








### Aula 15

Estruturas de controle



Descubra as estruturas de controle em JavaScript, como condicionais e loops. Aprenderemos a controlar o fluxo do seu programa para executar diferentes ações com base em condições específicas.





Códigos e Materiais: CLIQUE AQUI!








### Desafio Final

Desafio Final



Ponha em prática tudo o que aprendeu criando uma Landing Page completa. Este desafio final envolve a utilização de HTML, CSS e JavaScript para construir uma página funcional e visualmente atraente.





Códigos e Materiais: CLIQUE AQUI!











## Trilha 2




### Aula 1

Como a internet funciona



Nesta aula, exploraremos diversos aspectos sobre o funcionamento da internet, desde sua integração em nosso cotidiano até conceitos técnicos como endereços IP, protocolos, DNS, URL e conexões globais. Também abordaremos a história do HTML, noções básicas sobre domínios, publicação de sites e uma tarefa prática para entender melhor como a internet opera.





Códigos e Materiais: CLIQUE AQUI!











### Aula 2

SEO / UX e UI / Hospedagem / Git e GitHub



Nesta aula, aprendemos sobre otimização para mecanismos de busca (SEO), a importância da experiência do usuário (UX) e interface do usuário (UI), como hospedar um site, e os conceitos básicos de Git e GitHub para controle de versão.





Códigos e Materiais: CLIQUE AQUI!








### Aula 3

Meta Tags / Atributos / Tag svg / Tag area



Nesta aula, abordamos a utilização de meta tags para SEO, os diferentes atributos das tags HTML, e a utilização das tags SVG e area para criar gráficos e mapas de imagem.





Códigos e Materiais: CLIQUE AQUI!








### Aula 4

Formulários / Tabelas / Iframe



Nesta aula, aprendemos como criar e estilizar formulários, tabelas, e como integrar conteúdo de outras páginas web usando iframes.





Códigos e Materiais: CLIQUE AQUI!








### Aula 5

História do CSS - revendo conceitos



Nesta aula, revisamos a história do CSS, seus principais conceitos e como ele evoluiu para tornar o desenvolvimento web mais eficiente e estilizado.





Códigos e Materiais: CLIQUE AQUI!








### Aula 6

Menu Dropdown



Nesta aula, aprendemos a criar menus dropdown, que são elementos de navegação interativos que permitem aos usuários escolher entre várias opções.





Códigos e Materiais: CLIQUE AQUI!








### Aula 7

Card



Nesta aula, exploramos a criação e estilização de cards, que são contêineres utilizados para destacar informações importantes de maneira visualmente atraente.





Códigos e Materiais: CLIQUE AQUI!








### Aula 8

Flexbox



Nesta aula, aprendemos sobre o layout Flexbox, uma maneira eficiente de organizar elementos em uma página de maneira flexível e responsiva.





Códigos e Materiais: CLIQUE AQUI!








### Aula 9

Exibição e posicionamento



Nesta aula, abordamos os diferentes métodos de exibição e posicionamento de elementos no CSS, incluindo display, position, float, e z-index.





Códigos e Materiais: CLIQUE AQUI!








### Aula 10

Grid



Nesta aula, exploramos o CSS Grid Layout, uma técnica de layout poderosa que permite a criação de designs de grade complexos e responsivos.





Códigos e Materiais: CLIQUE AQUI!








### Aula 11

Grid



Nesta aula, continuamos a explorar o CSS Grid Layout, aprofundando-se em técnicas avançadas e práticas recomendadas para criar layouts sofisticados.





Códigos e Materiais: CLIQUE AQUI!








### Aula 12

Integração JavaScript com HTML: eventos



Nesta aula, aprendemos como integrar JavaScript com HTML para manipular eventos, permitindo a criação de páginas web interativas e dinâmicas.





Códigos e Materiais: CLIQUE AQUI!








### Aula 13

Funções



Nesta aula, exploramos a criação e utilização de funções em JavaScript, uma das estruturas fundamentais para a construção de programas eficientes e reutilizáveis.





Códigos e Materiais: CLIQUE AQUI!








### Aula 14

VEstruturas de controle



Nesta aula, aprendemos sobre as estruturas de controle em JavaScript, incluindo condicionais e loops, que permitem a criação de fluxos de lógica complexos.





Códigos e Materiais: CLIQUE AQUI!








### Aula 15

Arrays e objetos



Nesta aula, exploramos arrays e objetos em JavaScript, que são estruturas de dados essenciais para armazenar e manipular conjuntos de informações.





Códigos e Materiais: CLIQUE AQUI!








### Desafio Final

Desafio Final



Ponha em prática tudo o que aprendeu criando uma Landing Page completa. Este desafio final envolve a utilização de HTML, CSS e JavaScript para construir uma página funcional e visualmente atraente.





Códigos e Materiais: CLIQUE AQUI!