Spiderverse website - DIO

🇧🇷 Essa é a minha versão do Aranhaverso criado por uma live coding da DIO. A DIO é uma plataforma que ajuda os estudantes de programação a melhorar suas habilidades por meio de cursos gratuitos, lives, entrevistas, projetos realistas e muito mais.

🇺🇸 This is my version of the Spiderverse created by a live coding of DIO. DIO help the programming students to improve their coding skills with free courses, lives, interviews, realistic projects and more.

Table of contents

• Overview
  • The challenge / O desafio
  • Links
• My process / Meu processo
  • Built with / Construído com
  • What I learned / O que eu aprendi
  • Continued development / Próximos passos
• Acknowledgments / Agradecimentos

Overview

The challenge

O desafio

🇧🇷 Os usuários devem ser capazes de:

• Ver o layout otimizado para cada uma das páginas do website independente do tamanho da tela
• Observar mudanças de foco conforme interação com todos os elementos interativos da página
• Ver cada página e ser capaz de alternar entre as abas para ver novas informações

🇺🇸 Users should be able to:

• View the optimal layout for each of the website's pages depending on their device's screen size
• See hover states for all interactive elements on the page
• View each page and be able to toggle between the tabs to see new information

Links

• Live Site URL: Spiderverse website

My process

Built with

Construído com

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Vanilla JavaScript
• Fancybox - jQuery lightbox (for gallery)
• Fontawesome - For some icons

What I learned

O que eu aprendi

🇧🇷

Sumário:

1. Tornar um site com a estilização tão delicada responsivo
2. Criar a partir de um código arquitetado por outras pessoas
3. Fazer um carrossel a partir de uma array e o index dos elementos necessários
4. Usar um vídeo como background de uma página

Pontos de vista:

1. O projeto original da DIO não era responsivo. Tomei essa tarefa como desafio pessoal para dar ainda mais dinamicidade ao site.

2. Para um dev júnior, é um desafio criar features a partir de um código que não foi projetado por ele e, por isso, já possui uma lógica própria que ele tenta dominar. É muito legal vermos as nossas próprias soluções e acréscimos se integrarem ao que já estava consolidado, formando um só corpo.

3. A maioria dos projetos que começo demandam pelo menos um carrossel. Por isso, procuro formas diferentes de criá-lo com JavaScript, para garantir que estou aprendendo algo novo toda vez que faço. Dessa vez, usei como base uma array e o carrossel gira a partir do index dos elementos. O carrossel se integra às funções originais de ativação dos elementos, que adaptei para servir a ambos os carrosseis (o original e o criado por mim).

4. Eu nunca tinha usado um vídeo como background antes e amei o resultado final. Ficou demais!

🇺🇸

Summary:

1. Make a responsive website, even with such a delicated design patterns
2. Code from code archtected by others
3. Build a carousel with an array and the index of the necessary elements
4. Use a video as the page background

Points of view:

1. The DIO's original design was not responsive. I took this task as a personal challenge to make the site even more dynamic.

2. For a junior developer, it's a challenge to create features from code that wasn't designed by him and, therefore, it has its own logic that he tries to master. It's really cool to see our own solutions and additions integrate with what was already consolidated, forming a single body.

3. Most projects I start require at least one carousel. So I search different ways to build it using JavaScript, to assure I'm learning something new every time I do it. This time, I used an array and the carousel rotates using the elements indexes. This carousel integrates with the original elements activation functions, which I adapted to suit both carousels (the original and the one I made).

4. I had never used a video as a background before and I loved the end result. It was amazing!

Continued development

Próximos passos

🇧🇷

Áreas que eu quero refinar mais nos próximos projetos:

• Aprender a usar melhor positions e CSS Grid para complementar o Flexbox
• Me tornar cada vez mais familiar com o JavaScript (Spoiler: o próximo projeto do portfólio já usará Vue.js!!)
• Me tornar expert em elencar prioridades dentro do projeto: quais ideias manter e quais descartar e por quê?
• Tornar o uso do Git e do GitHub obrigatórios e mais constantes: dar commit e push a cada fase para evitar prejuízos.

🇺🇸

What I want t refine more in upcoming projects:

• Improve my knowledge about positions and CSS Grid to complement Flexbox
• Become even more familiar with JavaScript (Spoiler: the next project will already use Vue.js!!)
• Become an expert in prioritizing inside the project: which ideas to keep and which to discard and why?
• Make the use of Git and GitHub mandatory and more constant: commit and push each phase to avoid losses.

Acknowledgments

Agradecimentos

🇧🇷

Eu gostaria de agradecer especialmente à DIO e aos professores que criaram e ensinaram a versão original desse projeto em duas lives maravilhosas:

🇺🇸

I would specially like to thank DIO and the greatest teachers who created and taught the original version of this project in two wonderfull lives:

GitHub Michele Ambrosio GitHub Diogo Mainardes