Como eu posso começar aprender front-end?

Olá galera, tô querendo virar programador Alguém sabe como eu devo começar no front-end?

Eu devo começar a aprendendo algoritmo?

Eu devo começar a aprendendo HTML e CSS e dps algoritmo e javascript?

E se alguém souber me fala por favor.

Guia passo a passo para se tornar um desenvolvedor front-end moderno em 2022


Trilha de estudos para Desenvolvedor Web Front-end

você acha que antes disso é bom eu estudar algoritmo?


Eu vi nesse site para eu aprender primeiro o básico da programação em algoritmo Alguém sabe um curso de algoritmo e básico da programação grátis,por favor?

Alguém sabe?

Bem, não irei me estender, mas aprender logica de programação, certamente te trará uma compreensão melhor… Então como solicitou segue abaixo o curso gratuito…



Segue Mais Cursos Gratuitos - Curso em Vídeo

1 curtida

Olá @yago_tank19, tudo bem contigo?

Existem possivelmente algumas centenas de possibilidades para se tornar um “dev-frontend” e entender de lógica e algoritmos, certamente será algo útil. Porém, por mais que as pessoas consigam te apontar uma direção por onde começar a estudar, você vai precisar investir algum tempo para entender melhor o cenário de programação e definir alguns objetivos.

Sem um objetivo claro ou um currículo para seguir, você pode acabar investindo tempo em coisas não produtivas.

Eu sugiro fortemente o conteúdo do Fábio Akita, ele tem uma playlist completa abordando essa temática de “o que eu devo estudar”. O Akita é meio duro algumas vezes, mas, geralmente o mercado será “ordens de grandeza” mais duro, então é melhor ir se acostumando. :slight_smile:

Outro profissional que eu recomendo seguir é o Marco Bruno, ele trabalha com Frontend e faz lives codificando.

:vulcan_salute:

1 curtida

Assim, eu comecei estudando HTML e CSS apenas pegando a sintaxe, a princípio, e tentando replicar estilos. HTML e CSS não são exatamente linguagens de programação, então aprender algorítimo só seria interessante se não soubesse estruturar instruções em, no máximo, javascript, já que HTML e CSS não fazem uso disso.

Na real, HTML é uma linguagem de notação de hipertexto, algo similar a Markdown, por exemplo. Não é usado para progamar. Com o uso contemporâneo de HTML e CSS, HTML só é usado, a grosso modo, para colocar elementos na tela. CSS fica encarregado de por estilos customizados em cima desses elementos. Seria mais ou menos como dizer que eu quero que tal título tenha tal fonte, tamanho, cor e coisas assim. Ainda dá para definir comportamento quando é clicado, passa o mouse por cima e etc.

Então significa que HTML não passa de um documento de texto, como se tivesse vindo de um processador de texto como o Microsoft Word mesmo. Tudo é organizado de cima para baixo, esquerda para direita. CSS irá apenas permitir como esses elementos, uma vez estáticos, se comportarão. Mesmo assim, antes de chegar em código, eu aprendi a usar o Figma para prototipagem, até porque o Figma também dá uma ajuda em alguns estilos CSS, algo que o Canva não faz, pelo menos até onde sei. Recomendo dar uma olhada no auto layout no Figma e dominar essa funcionalidade porque é o mesmo princípio de boa parte de como CSS é usado para organizar coisas na tela, no caso, o Display Flex. Depois tem evoluções, como Display Grid, posicionamento absoluto, relativo e coisas do tipo. Recomendo brincar com o Grid Garden para aprender coisas desse tipo.

Ainda falando do Figma, esse é uma baita mão na roda quando se trata de Design por ser uma ferramenta excepcional para prototipagem. Funciona de uma forma parecida ao Canva na parte de design mas é justamente na prototipagem que fica acima da concorrência. Não precisa saber código para criar designs no Figma e ele já tem essas funcionalidades de camadas, grupos e auto layout para saber como o site irá se comportar antes de por em código. Isso é essencial porque layoutar em código dá uma dor de cabeça danada, enquanto fazer o layout só com mouse ajuda muito. É uma obra de design, no fim das contas, então melhor começar nessa parte antes de partir para o código.

Após isso, hora de codificar! Dá para fazer muita coisa apenas com HTML e CSS. Javascript é mais usado para a interatividade do site, como fazer um menu aparecer ou facilitar o uso de frameworks para a construção de um site. Claro que estou super simplificando a explicação, afinal eu ainda estou estudando frontend. Mas se quiser uma iniciada, dê uma olhada nas tags HTML mais utilizadas, aprenda onde utilizar, como utilizar e se deve utilizar em favor de outra. O resto pode ser feito com CSS. Até o momento, uso JavaScript apenas para adicionar ou remover classes HTML de acordo com cliques do mouse ou armazenar informações de formulários em variáveis para afetar o comportamento do frontend.

Acho que só com javascript que saber um pouco de algorítimo vai ajudar, mas não ao ponto de ter de aprender aqueles trens inúteis como Portugol e tals. Tu nunca vai programar com portugol. Pode pular o VisualG sem peso na consciência. Usa o Scratch no lugar. Esse é bem simples de aprender algorítimo. Só precisa saber estruturar instruções, como matemática básica, lógic gates, variáveis e os tipos de variáveis, já que JavaScript não possue declaração do tipo da variável como C possue, por exemplo. O numeral 1 pode ser interpretado como um boolean True no lugar de um número, então é necessário saber tipos de variáveis. Mas não é um bicho de sete cabeças. Por enquanto, foque apenas em HTML e CSS. Quando dominar esses dois, aí pode se preocupar com javascript.

Claro que se eu falei alguma baboseira, os devs podem me corrigir, afinal sou só estudante de Web Design. Mas talvez tenha coberto o essencial

2 curtidas

Cara obrigado e você é muito bom ensinando viu :clap::clap:
Então tipo assim é bom procurar algoritmo depois que eu aprender HTML e CSS aí depois eu aprendo algoritmo Javascript?

Sim. Algorítimo Javascript se trata apenas da sintaxe usada para fazer qualquer coisa em Javascript. Um exemplo é quando eu quero que ele reconheça os seletores CSS, aí eu uso uma variável para facilitar para cada uma delas. Pode existir uma forma melhor de fazer isso? Se existe, ainda não conheço. Mas é como eu aprendi a fazer coisas com javascript em frontend:

Tipo assim, se eu quero que tal ação aconteça quando eu clicar em uma imagem com ID “logo”, primeiro eu preciso de uma variável apontando para minha logo. Aí eu digito:

var logo = document.querySelector("#logo");

Agora é usar essa variável como eu precisar. JavaScript pode ser usado para um bocado de coisa, então quando for estudar frontend, busque por sintaxe javascript no contexto de HTML e CSS, assim você terá foco. Não há necessidade de dominar tudo que JavaScript pode fazer quando tem coisa que não é usada em frontend mas aí é buscar um bom curso. Eu faço curso presencial aqui em Brasília, então não sei qual curso pela internet recomendar.

Se você é muito novo em programação no geral, a ferramenta Scratch é boa para introduzir aos conceitos de algorítimo, como instruções, condicionais, variáveis, listas, objetos e funções.

Aí se quiser se aprofundar, existem outras ferramentas que podem ajudar bastante, como o SCSS, uma evolução do CSS que permite uma organização um pouco melhor dos seletores, propriedades e tudo mais, facilitando a vida de quem trabalha com isso, embora precisa compilar de volta para CSS, o que não é difícil. Eu uso extensões do Visual Studio Code para mexer com frontend, mais especificamente o Watch SASS, que faz essa compilação que eu mencionei, e o Live Server, que executa o código HTML, CSS e Javascript no contexto de um site, atualiza quando o código é salvo com modificações, assim é bem prático.

Recomendo dar uma olhada no canal do Jefferson Sales. É com ele que eu aprendi muito de frontend.

2 curtidas

Obrigado, explicação melhor do que dos meus professor :clap::clap::clap:
Eu tô fazendo curso em vídeo de html e CSS

Cara tu pode me chamar no zap o professor recomenda que eu fique conversando com alguém de programação para entender melhor, (71)98896-5282

Só uma dica para o OP: não comece a ver JS por DOM, comece pela lógica fazendo console app usando node para se acostumar com a sintaxe e entender como funciona desde o básico por trás dos panos, decorar comando te quebra lá na frente. Além da documentação da Mozilla, recomendo o https://www.w3schools.com/ e https://www.sololearn.com/home

Eu estou nessa também. Estou no processo de transição de carreira, buscando uma oportunidade como Product Designer e comecei a estudar HTML e CSS para complementar meus conhecimentos.

Assisti alguns módulos do curso do Guanabara, que é muito bom! Só que a demora para lançar os módulos restantes me fez buscar outros cursos. Aí achei o site freeCodeCamp, com várias certificações. Minha intenção inicial era terminar as certificações de front-end.

Comecei pelo curso Web Responsive Design, que trata de conhecimento em HTML e CSS. Curti bastante a dinâmica do curso. Agora estou fazendo o de Algoritmos e estruturas de dados em JavaScript, mas estou indo devagar demais, não está rendendo muito. Acho que é por estar no início aprendendo mais sobre os conceitos e não desenvolvendo algo com um feedback visual como foi no anterior.

Já vi um pouco do Grasshopper, alguém já fez? Vale a pena?

1 curtida

O ruim é que no freeCodeCamp TD em inglês e meu inglês não é tão bom ainda :pensive:

Você pode mudar o idioma. No canto superior direito clica onde está escrito menu e depois em change language. Agora só selecionar português.

O curso de Web Responsive Design foi traduzido recentemente.

1 curtida

Obrigado vocês são fera mesmo :clap::clap::clap:

Eu já tinha começado de Guanabara de HTML e CSS eu vou acabar de Guanabara porque ele ensina muito bem depois vou fazer esse do freeCodeCamp.

minha dúvida era essa se eu começava no algoritmo depois html e CSS,
ou HTML e CSS depois algoritmo e javascript

Agora eu sei primeiro vou fazer HTML e CSS depois vou fazer algoritmo e javascript.

Tu pode me mandar o link desse curso e o do algoritmo no freecodecamp,por favor.

Entre no Design responsivo para a web (novo) que é a versão atualizada. Os outros estão logo abaixo.

Se você não criou uma conta, crie. Com a conta você salva o seu processo lá.

Algoritmo é o nome da abstração do processo de resolver um problema (realizar uma tarefa) computacional por meio de pequenos passos que, juntos, formam o algoritmo em si.

Conhecimento é sempre bem-vindo mas não creio que front-end requeira, por exemplo, conhecer e aplicar estratégias de criação de algoritmos, como greedy ou divice-and-conquer.

Front-end é mais próximo a design e menos a programação que implemente algoritmos. HTML, por exemplo, é uma linguagem mas não de programação (HTML is a markup language, geralmente traduzido como linguagem de “marcação”)

Se a você for delegada alguma tarefa que se pareça mais com programação nesse sentido, você achará mais fácil resolver a partir da linguagem (programação meio que implica JavaScript aqui, já que é o front-end), pensando em termos dela e suas características, do que seguir o Knuth ou o Cormen.

Todavia, longe de mim desencorajar alguém a aprender sobre algoritmos (estou me formando em CS justamente na área de análise e complexidade de algoritmos…), só levantei um ponto que você pode achar válido como pragmático.

Vou fazer php também eu quero aprender agaritmo porque dizem que com algoritmo você aprende qualquer língua

PHP presta para fazer o quê?

Talvez seja do seu interesse uma visão empresarial também.

Primeiro ponto, aprenda muito bem mesmo conceitos como componentes, templates, design dinâmico, frameworks modernos como React e Vue, concorrência complexa envolvendo observadores e promessas, assim como alguns conceitos básicos sobre backends (tipos de databases e suas características, tipos de comunicação e suas características, autenticação, etc).

O segundo é um amplo conhecimento em computação. Confiança ao lidar com repositórios GIT, automação de testes, frameworks de teste, ferramentas de CI/CD de produtos como github e gitlab, Travis, um pouco de docker, além dos fundamentos em geral (design patterns, noções de complexibilidade, etc).

Em termos de frontend é isso que nossa empresa busca, e se for junior, não exigimos que saiba estas coisas, mas avaliamos profundamente a interação social e força de vontade (se esforça para resolver os problemas propostos, não tem medo de assumir que não sabe, não tem medo de pedir ajuda e interagir com os colegas, não tem medo de aprender coisas completamente novas e não se auto impõe limites de conhecimento, tendo conhecimento de problemas que precisam ser resolvidos na sua área/escopo, proativamente decide resolver antes que alguém cobre, sempre mantendo a equipe informada dos seus passos previamente).

1 curtida