CRIE seu primeiro SISTEMA WEB! Introdução ao HTML - CSS - JAVASCRIPT

preview_player
Показать описание
Entre hoje na melhor comunidade de programadores do mundo:

Fala, Coders!

Iniciamos uma sequência nova aqui no canal! Vamos fazer agora uma série de desenvolvimento web DO ZERO! Esse é seu primeiro passo na jornada de ser um desenvolvedor front-end, focado em programar aplicações web.

Nesse vídeo, te ensino a construir o passo a passo de uma sistema web simples, usando HTML, CSS e Javascript. A finalidade dessa aplicação é construir uma lista de tarefas simples e dinâmica, a famosa TO DO list. É um desafio inicial interessante para você que está começando no mundo da programação.

O HTML é a linguagem de programação responsável por criar os elementos visuais na tela. Nessa aula, te explico a forma padrão que um documento HTML funciona. Além disso, como nosso app é uma listagem de tarefas, vamos usar alguns elementos, como Div, Input, Button, LI e UL para criar nossa listagem, de forma que o usuario consiga adicionar dinamicamente as tarefas do seu dia.

Além disso, para deixar o app mais bonito, vamos aprender como usar algumas classes e propriedades do CSS, como background-color, padding, marging, font-size e border-radius.

Na parte do JS, criamos uma lógica bem legal, para quando o usuário clicar no botão, adicionarmos o item na lista, buscando no document do html o item correspondente a lista e input, para assim gerarmos os novos items da listagem (li) a partir do texto inserido pelo usuário.

Acredito que essa aula vai te ajudar a dominar os fundamentos necessários para criação de uma aplicação web simples, de forma que você consiga avançar no conteúdo aqui do canal e também na sua carreira.

Não deixe de ver nossa sequência de JavaScript caso ainda não tenha aprendido o básico da melhor linguagem de programação:

#frontend #html #css #javascript #programação #webdevelopment
Рекомендации по теме
Комментарии
Автор

Rapaz, só nessa aula já aprendi mais que em 20 aulas da faculdade.

RafaelBeraldoC
Автор

Nossa muito obrigada, comecei a estudar dia 24/11/24 Sei que tem um caminho longo a seguir.Porem consegui ir até o final.E do jeito que vc fez.Detalhe vendo e fazendo com vc no dia de hoje:08/12/24 as 16:56.Deus lhe abençoe.Falta saber sobre git e github e fazer deploy, mesmo que de graça em um primeiro momento.Detalhe 2 kkk tenho 48 anos.

lu_empreendedora
Автор

Cara, se depender de mim o seu canal vai crescer MUITOOOO… tô compartilhando com geral. Conteúdo riquíssimoo

ubaldotamandare
Автор

Meu primeiro projeto fora do curso! mto bom!!

Losmamelucos_
Автор

Conteudo do vídeo muito bom... so faltou corrigir o pequeno detalhe: o "<tile>lista de tarefas</tile>" acredito que estava se referindo ao "<title></title>" que no caso o texto ficaria na aba do navegador, so nao entendi como ele apareceu no site, já que as unicas coisas que aparecem são as que estão dentro do corpo <body></body> mas enfim show de bola!

SrMedeiros
Автор

mano do ceu, o melhor tutorial q eu ja vi

hellsingsenhordastre
Автор

Nossa você é marivilhoso cara, que explicação top. Explicou cada linha e o pq de cada coisa!!! nem meus professores da faculdade são assim

augustoalmeida
Автор

vou chumbar a desenvolvimento de aplicações computacionais com este video

esteves_
Автор

muito legal as sua apresentaçaão e com conteudos faceis de assimilar obrigada

jefersonandrade
Автор

Cara, parabéns pelo vídeo, assisti até o final e foi muito produtivo!

ficou show!

Athenasarch
Автор

Agradeço muito pela aula! Estou iniciando o aprendizado na área do Desenvolvimento Web e seu conteúdo me ajudou muito!

geffesonbraga
Автор

Tive um entendimento mais satisfatório do que na faculdade 🙌

romariomn
Автор

vei fiquei muito feliz agora kkkk o meu primeiro item da lista não estava ficando com a bolinha do sinal que separa, olhei no código escrito não vi nada, ai fui na pagina inspecionei e vi que tinha o erro era da própria linha (que era obvio mas fui atrás), ai alguns segundos depois ele vai lá e inspeciona a pagina para mostrar o código kkkk, a primeira coisa que pensei foi ''krl to no caminho certo, essa é a linha de raciocínio correta" kkk muito foda

vNiHiLL
Автор

Vc explica bem certinho... To começando agr e ja entendi mts coisas...parabens

thaymartins
Автор

Excelente conteúdo, obrigado por compartilhar.

Everaldobass
Автор

footer é o rodapé, no caso do exemplo é a parte da assinatura.

EsmaelArtur
Автор

És o Diih Lopez da programação
Obrigado pelo conteúdo! Muito bom! Tudo de bom pra você!

edu
Автор

Conteúdo assim abre muito a nossa mente! Parabéns!!!

eliabeweverton
Автор

Tô amandoo voltei a estudar recentemente e me ajudou muito! ♥

thayscarolinne
Автор

Vamos valorizar galera o Brasil está apenas engatinhando ainda na web, em relação a esse tipo de coisa.
Obrigado mano pela aula, estou estudando design gráfico e já vou aproveitar pra aprender isso.

gabrieltobias