Passo 1: HTML5 e CSS3

• O HTML é uma linguagem de marcação responsável pela estrutura de páginas web, dando significado para cada parte que a compõe. https://www.digitalhouse.com/br/blog/html5/

• O CSS é aquela tecnologia que aplica um atrativo estético na estrutura da página criada. https://kenzie.com.br/blog/css3/?amp=1

• Saber criar um web site responsivo, aquele com páginas que se adaptam do mobile ao desktop, é prática do mercado, não mais um plus. https://www.digitalhouse.com/br/blog/design-responsivo/

Passo 2: lógica de programação e JavaScript

JavaScript é a única linguagem efetivamente de programação (podemos declarar variáveis, loops, funções...) suportada pelos navegadores do mercado, sendo necessário conhecimento de lógica de programação, aquele que uma vez aprendido pode ser aplicado nas mais diversas linguagens do mercado.

• https://aws.amazon.com/pt/what-is/javascript/
• https://www.hostgator.com.br/blog/logica-de-programacao/
• https://www.alura.com.br/artigos/algoritmos-e-logica-de-programacao

Passo 3: bibliotecas

Ter contato com bibliotecas e frameworks populares do mercado aumentará o seu índice de empregabilidade, além de dar subsídios para criar mais facilmente aplicações. https://blog.tecnospeed.com.br/framework-biblioteca-api/

O Bootstrap é sem dúvidas o framework HTML, CSS e JavaScript mais popular para criação de projetos mobile first, aquele no qual primeiro pensamos em nossas páginas em dispositivos móveis para depois adaptá-la em dispositivos maiores. Porém, ele faz uso de outra biblioteca que está no coletivo imaginário dos desenvolvedores, o jQuery. https://kenzie.com.br/blog/bootstrap/?amp=1

O jQuery é uma biblioteca que permite o programador front-end realizar mais facilmente modificações na página através das ações do usuário. https://www.hostgator.com.br/blog/aprenda-o-que-e-jquery/

Passo 4: mais JavaScript

A versão ES2015 (ES6) do JavaScript se popularizou rapidamente devido a introdução de novos recursos da linguagem que visam ajudar o desenvolvedor a resolver problemas do dia a dia. https://kenzie.com.br/blog/ecmascript/?amp=1

Passo 5: frameworks

Uma biblioteca resolve um problema bem específico, já um framework pode ser considerado um conjunto de bibliotecas que visam resolver um problema maior.

Hoje no mercado há uma explosão de Single Page Applications, páginas que não recarregam durante seu uso e que fazem uso pesado de JavaScript. https://www.google.com.br/amp/s/www.iugu.com/iugu4devs/blog/single-page-applications%3fhs_amp=true

Frameworks como Angular 1, Angular 2 (hoje, chamado de Angular!) e React são os que invadem o coletivo imaginário dos desenvolvedores e das empresas. https://www.hostinger.com.br/tutoriais/o-que-e-angular https://kenzie.com.br/blog/react/?amp=1

Passo 6: (desejável): pré-processador

Um pré-processador CSS (SASS ou LESS) nada mais é do que um compilador que traduz uma sintaxe rebuscada que pode trabalhar com varíaveis e funções para um código CSS, aquele compreendido pelo navegador. Em suma, a ideia é darmos ao CSS poder semelhante das linguagens de programação como o próprio JavaScript que vimos. E podem ser utilizados para tornar o trabalho mais produtivo. https://www.infoq.com/br/news/2009/07/dry-css-less-yass/

Passo 7: (desejável): ferramenta de build

Um site depois de pronto precisa ainda passar por uma série de otimizações. Dominar alguma ferramente de build como Gulp pode ser um diferencial. Essas ferramentas utilizam a linguagem JavaScript, aliás, uma linguagem bem onipresente no universo do desenvolvimento. https://blog.sw9.com.br/2017/06/20/gulp-automatizando-tarefas-build-e-deploy-guia-definitivo-introducao/

Passo 8: (desejável): noção de como funciona um back-end

Ter uma noção de como funciona um back-end e como o seu trabalho de programador front-end se integra com ele o ajudará a ter mais confiança ao trabalhar dentro de uma equipe. https://www.google.com.br/amp/s/blog.somostera.com/carreiras-digitais/front-end-e-back-end%3fhs_amp=true