Bem-vindo (a) ao meu repositório de projetos front-end! Aqui você encontrará meus primeiros passos em desenvolvimento web, aplicando conceitos aprendidos em HTML, CSS e JavaScript. Tive essa iniciativa como forma de desenvolver, armazenar e controlar melhor o que venho praticando com o passar do tempo. Aqui no caso, conterá projetos de nível: newbie ao júnior.
- Sobre
- Estruturação das pastas do repositório
- Tecnologias Utilizadas
- Links dos Projetos
- Como executar localmente
- Próximos Passos
Este repositório funciona como um hub centralizado para todos os projetos iniciais que estou desenvolvendo durante minha jornada de aprendizado em desenvolvimento web. Ele foi criado para apresentar meu progresso e evolução à medida que exploro os fundamentos do desenvolvimento front-end.
Cada projeto representa um exercício prático com o objetivo de aplicar e reforçar conceitos como:
- HTML: entendimento em como realizar a estrturação de uma página web e também focando em entender e aplicar boas práticas de SEO.
- CSS: entendimento de como funciona a estilização baseada nas características adicionadas em cada tag no HTML, assim como desenvolver um design responsivo que seja usual para diferentes tamanhos de telas.
- JavaScript: interatividade básica e início da lógica de programação.
Esses projetos variam desde páginas estáticas até layouts mais interativos, refletindo uma evolução gradual em complexidade e habilidades (saindo do zero).
frontend-learning-path/ # Repositório
├── Paleolithic_Creatures/ # Pasta Principal do projeto
├── Cloneflix/ # Pasta Principal do projeto
├── Currency_Converter/ # Pasta Principal do projeto
├── Quiz_Structure/ # Pasta Principal do projeto
├── Login_Register_Interface/ # Pasta Principal do projeto
├── Search_Interface_for_Weather_Data/ # Pasta Principal do projeto
├── Bouncing_Ball_Animation/ # Pasta Principal do projeto
├── Recepi_Page/ # Pasta Principal do projeto
├── Social_links_profile_main/ # Pasta Principal do projeto
├── FAQ_Accordion/ # Pasta Principal do projeto
│
└── README.md
└── README_en.md
- Software - Visual Studio Code (escrever/editar o código);
- HTML5 (estrutura da página);
- CSS3 (estilização da página);
- JS (lógica de programação para interação do usuário final e a página);
- Git (para interagir entre local e remoto, via linha de comando);
- GitHub Pages (para hospedar o site de maneira gratuita).
| Projeto | Status | Link |
|---|---|---|
| Paleolithic Creatures | 🟢 Concluído | Paleolithic_Creatures |
| Cloneflix | 🟢 Concluído | Cloneflix |
| Currency Converter | 🟢 Concluído | Currency_Converter |
| Quiz Structure | 🟢 Concluído | Quiz_Structure |
| Login Resgister Interface | 🟢 Concluído | Login_Resgister_Interface |
| Search Interface for Weather Data | 🟢 Concluído | Search_Interface_for_Weather_Data |
| Bouncing Ball Animation | 🟢 Concluído | Bouncing_Ball_Animation |
| Recipe Page | 🟢 Concluído | Recipe_Page |
| Social links profile main | 🟢 Concluído | Social_links_profile_main |
| FAQ Accordion | 🟢 Concluído | FAQ_Accordion |
Antes vale notar, caso seja um iniciante do ZERO como eu, sinta-se a vontade para se quiser, baixar o repositório localmente, se por algum momento se interessar por algum tema e quiser replicá-lo e melhorá-lo.
Para tanto, seguem os passos abaixo:
1. Clone o repositório:
No bash digite o seguinte código:
git clone https://github.com/marcelotb-fewd/frontend-learning-path.git
2. Navegue até a pasta do projeto desejado:
No bash digite o seguinte código:
cd/escolha o diretório que foi clonado/Projeto desejado
3. Abra o arquivo no seu editor de escolha e busqe pelo arquivo:
index.html
Cada pasta de projeto possui o seu próprio index.html na raiz.
-
Continuar estudando e praticando os conceitos básicos para assim poder almejar um nível júnior que já poderei quem sabe estar:
-
Adicionando mais projetos que exploram conceitos intermediários de CSS e JavaScript;
-
Implementar interatividade mais avançada com JS;
-
Explorar bibliotecas como Bootstrap e Tailwind CSS, dentre outras;
-
Adicionar projetos mais complexos conforme avanço no aprendizado.