Esse readme tem a versão em português e inglês, caso queria ler em inglês clique em ENGLISH.
O único objetivo desse projeto é de aprender e praticar HTML, CSS e JavaScript.
Esse projeto foi desenvolvido no evento "Mapa-Dev-Week" no canal do youtube "Dev em Dobro", nesse evento os desenvolvedores Ricardo Dias e Roberto Dias desenvolveram o que eles chamaram de "Projeto Marvel", utilizando HTML, CSS e JavaScript.
Agradeço pela atenção e pelo comprometimento do Ricardo e do Roberto por nos mostrar como realizar esse projeto, além de tirar muitas dúvidas e nos auxiliar na criação do nosso próprio projeto.
Eu estive presente no evento inteiro, eu assisti todo o evento sem escrever nenhuma linha de código, e após eu assistir o evento eu fiz o meu projeto fazendo algumas alterações, e testando os conhecimentos que eu aprendi durante o evento.
Esse projeto é um site mostrando character select, onde o jogador 2 já tem o personagem escolhido, e o jogador 1 pode escolher qualquer outro personagem.
Os desenvolvedores Ricardo e Roberto fizeram o projeto utilizando personagens da Marvel, a primeira mudança que eu fiz foi utilizar a temática do anime One Piece, onde os personagens e o fundo é relacionado a esse anime.
Existem duas partes principais nesse projeto, a primeira é o personagem que nós escolhemos, e a segunda parte é a lista dos personagens disponíveis que fica centralizada.
Quando você passa o mouse sobre o personagem da lista, esse personagem especifíco se torna o escolhido, fazendo com que ele apareça do lado esquerdo. Também foi feito algumas animações na parte da lista de personagens utilizando css.
Esse é o meu segundo projeto relacionado ao front-end, e honestamente eu aprendi bem mais do que eu esperava quando eu iniciei esse projeto. Olhando de uma maneira mais superficial, eu acreditava que o projeto one piece era bem semelhante ao meu primeiro projeto, o projeto Pokedex. Porém eu estava muito enganado, a forma que foi realizado esse projeto foi totalmente diferente do que eu esperava.
Primeiro na parte de HTML, enquanto que na Pokedex eu coloquei todas as imagens direto no HTML, nesse projeto o Ricardo e o Roberto colocaram apenas a primeira imagem do personagem, todas as outras seriam trocadas usando o javascript, ou seja, nós conseguimos atingir o resultado desejado utilizando menos linhas de código, se aprofundando e aumentando a dificuldade do javascript.
Já no css também foi utilizado conceitos diferentes que eu não conhecia, como as animações que foi colocado na lista dos personagens, além de outros conceitos de css, como o "::before" por exemplo.
Fico feliz que estou conseguindo aprender muito sobre programação front-end, continuarei estudando e praticando programação front-end.
Estou disponibilizando o link do site na aba de "about".
Obrigado por ler até aqui, te desejo uma ótima semana, até mais. 👋
This project has the only objective to learn and practice html, css and javascript.
This project was developed in the event "Mapa-dev-Week" in the channel "Dev em Dobro", in this event the developers Ricardo Dias and Roberto Dias developed what they called "Project Marvel", using HTML, CSS and JavaScript.
I need to say thank you for Ricardo and Roberto for showing us how to make this project, as well as answering many questions and helping us to create our own project.
I attended the entire event, I watched without writing a single line of code, and after that I made my project by making some changes, and testing the knowledge I learned during the event.
This project is a site showing character select, where player 2 already has the character chosen, and player 1 can choose any other character.
Developers Ricardo and Roberto made the project using Marvel characters, the first change I made was to use the One Piece anime theme, where the characters and background is related to this anime.
There are two main parts to this project, the first is the character we choose, and the second part is the list of available characters that is centered.
When you hover over the character in the list, that specific character becomes the chosen one, causing it to appear on the left side. It was also made some animations in the part of the characters list using css.
This is my second front-end project, and honestly I learned a lot more than I expected when I started this project. Looking at it more superficially, I believed the one piece project was very similar to my first project, the Pokedex project. But I was very wrong, the way this project was carried out was totally different from what I expected.
First in the HTML part, while in the Pokedex I put all the images directly in the HTML, in this project Ricardo and Roberto only put the first image of the character, all the others would be changed using javascript, with that, we were able to reach the desired result using fewer lines of code, deepening and increasing the difficulty of javascript.
In the css, different concepts that I didn't know were also used, such as the animations that were placed in the list of characters, in addition to other css concepts, such as "::before" for example.
I'm providing the website link in the "about" tab.
Thanks for reading, I wish you a great week, see ya. 👋