teste de frontend da hardcode, minha versão da landing page
- Live Site URL: exame-hardcode.vercel.app
comecei a desenvolver pelo workflow web-first depois de um tempo utilizando esse workflow, percebi que eu teria que utilizar mais regras de estilos para remover alguns componentes que não estava na versão mobile. então comecei a utilizar mobile-first. primeiro estruturava de uma maneira simples e depois revisava o código estrutuva melhor do que o código anterior. as seções de hero (que a primeira página) e a de invest (seção que tem um slide com gráfico) foram as mais dificies de terminar, por que a seção hero estruturei o html errado e na invest por causa da biblioteca em si que eu não comprendi direito.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- grid-layout
- Mobile-first workflow
- swiper.js
eu aprendi a utilizar o rem invés em, como posicionar a imagem com o transform. um seletor novo que seria selecionar todos os filhos da tag, além de outras tag que eu não utilizava normalmente. além de utilizar swiper.js que vai me ajudar a fazer depois uma biblioteca de fotos para apresentações.
footer * {
transform: transalate(x, y);
/*seleciona todos filhos de footer*/
}- transform - é um artigo sobre a propriedade transform, que foi utiliza para posicionar algumas imagens.
- swiperjs - é uma bibioteca javascript para criação slides, utilizei para fazer o carrosel e o slide da seção de investimentos
- grid.layoutit - isso é um gerador de grid layout que me ajudou a utilizar ele na seção de investimentos
- Como Fazer um Menu Navbar Responsivo - Tutorial HTML, CSS e JavaScript para Iniciantes - isso é o video que me ajudou a fazer a navbar.