Você pode acessar o projeto clicando aqui.
Projeto desenvolvido durante o curso de CSS Avançado da Origamid, com duração de 9 horas.
Ao longo do curso colocamos em prática de forma exaustiva os principais métodos de posicionamento no CSS, desenvolvendo a mesma página de quatro formas diferentes:
- A primeira partindo dos fundamentos do CSS para determinar de forma pura a posição dos elementos da página, definindo width's, height's e utilizando float, uma propriedade que se tornou obsoleta depois do surgimento de layouts como Flexbox e CSS Grid mas que é fundamental entender seu funcionamento, tanto para agradecer a evolução tecnológica (ainda bem que não preciso declarar clear both nos containers hoje em dia) quanto para trabalhar em browsers mais antigos.
- A segunda utilizando Flexbox, que agora posso dizer com propriedade que é minha forma favorita de posicionar elementos (não fica muito atrás do Grid Layout). Aqui, se torna muito simples definir o tamanho e o alinhamento de itens na página, além da responsividade automática dos contêiners.
- A terceira com um arquivo de grid, onde divimos a tela em 12 colunas e definimos os tamanhos máximos em porcentagens, facilitando na hora de aplicar as classes e na adaptação das telas.
- E por último usando Bootstrap, o famoso framework de CSS, onde temos diversas classes pré-prontas com estilos definidos, uma forma de reduzir o código escrito e facilitar na hora de construir páginas. Posso dizer que foi o método mais simples de utilizar, pois depois que você entende o funcionamento do CSS, se torna fácil entender como o Bootstrap age.
Esse projeto foi desenvolvido com as seguintes tecnologias:
- HTML
- CSS3
- Bootstrap
- Flexbox
- Grid
Você pode acessar o projeto clicando aqui.
Desenvolvido com 💛 por Rhuan Bello 👁️🗨️