5 Projetos para você dominar CSS3
Muitos afirmam que o CSS não é uma linguagem de programação. Eu concordo - é mais difícil . O domínio do CSS requer habilidades em design, determinação, inventividade, experiência e codificação (especialmente ao usar pré-processadores como o Sass ).
O CSS sugere layouts e estilos para o navegador. Um navegador pode interpretar essas sugestões da maneira que escolher e, mesmo assim, o usuário ou dispositivo pode ignorar ou substituir quaisquer propriedades. Criar código de alto desempenho que funcione bem em todos os dispositivos e resoluções de tela é um desafio que poucos tentam ou concluem com êxito. No entanto, as recompensas podem ser emocionantes.
Começando pelo mais fácil, as seguintes sugestões de projeto o ajudarão em sua jornada para o domínio do CSS.
Crie um game com JavaScript
MiniCurso onde te ensino a construir do ZERO um Game incrível usando apenas JavaScript, CSS3 e HTML5, garanta sua vaga totalmente gratuito, clique no botão agora mesmo.
Figura 01 - 5 Projetos para você dominar CSS3
1 - Crie um site para impressão
5 Projetos para você dominar CSS3
Visite um site em que você está trabalhando e tente imprimir (ou pré-visualizar) uma página. Você está satisfeito com os resultados?
As páginas HTML são um meio contínuo que não necessariamente funciona bem na mídia de impressa. Seções inadequadas, dimensionamento, tamanhos de texto, dimensões de coluna e conteúdo ausente ou cortado, tudo leva a uma experiência de impressão inacessível que poucos desenvolvedores consideram.
Felizmente, o esse tipo de projeto pode ser desenvolvido dentro de algumas horas. Geralmente, é uma questão de redefinir estilos (preto e branco), remover seções desnecessárias (menus, imagens, formulários, widgets de mídias sociais etc.), linearizar o layout e reduzir os requisitos de papel e tinta.
Mergulhe nas Ferramentas do desenvolvedor baseadas no navegador e nos Segredos do navegador DevTool para descobrir como examinar e modificar estilos depois de mudar para a renderização de impressão.
Aplicando condicionalmente como definir as regras do recurso de @media, incluindo printfolhas de estilo.
Considere sua estratégias para propriedades personalizadas de CSS (da New Frontiers In Web Design ) para determinar se as variáveis CSS podem ajudar nas propriedades de impressão. Considere também Acessibilidade (da CSS Animation 101 ) para desativar as animações ou imprimi-las no melhor estado.
2 - Procure sites que você considera bonitos e replique-o
5 Projetos para você dominar CSS3
Um esquema de cores único é chato! Todo mundo espera uma opção de modo escuro em seus sistemas operacionais e aplicativos. Por que não adicionar uma ao seu site?
Até recentemente, os alternadores de temas geralmente exigiam um conjunto adicional de estilos com controles de comutação baseados em JavaScript. No entanto, os navegadores modernos facilitam a vida com as Propriedades personalizadas do CSS (variáveis) e a regra.prefers-color-scheme @media
Estratégias de Temas (das Novas Fronteiras em Web Design ) fornece uma gama de idéias e considerações ao projetar seu novo tema.
Eu faço isso comumente, procuro um site ou sistema que considero bacanas e tento replicar-los o mais fiel possível, isso vai lhe trazer desafios bem interessantes e com certeza seu nível de CSS irá da um passo adiante.
3 - Refaça um layout de formulário
5 Projetos para você dominar CSS3
Examine um formulário em algum projeto seu, como um formulário de consulta ou registro. A menos que tenha sido codificado recentemente, é provável que seja implementado com DIVs de contêiner e layouts baseados em float que possivelmente quebram em telas menores. Os formulários mais antigos podem usar JavaScript desnecessário ou ter pouca acessibilidade.
Um formulário de registro (de Padrões de design de formulário ) descreve as melhores maneiras de criar, estilizar e codificar um formulário usando HTML5.
O CSS Grid permite erradicar a marcação desnecessária e criar layouts responsivos à prova de balas sem recorrer a consultas de mídia. Caso você ainda desconheça o CSS Grid aqui no site temos um artigo falando a respeito da uma olhada lá, vale muito apena.
Torne-se um profissional FullStack JavaScript
Você está iniciante agora? Você já tem experiência e deseja desbrava novas áreas? Então esse treinamento é para você, nele você vai do ZERO a desenvolver um app baseado no famoso Evernote. Você vai aprender também (Lógica de programação, JavaScript, HTML5, CSS3, Bulma, Nodejs com Express.js Git e Github, React e muito mais, clique no botão saiba mais e veja mais detalhes. )
4 - Otimize seu projeto, deixe o mais rápido
5 Projetos para você dominar CSS3
No início de 2020, a página média da Web requer um download de 2 MB, que leva 20 segundos para aparecer totalmente em um dispositivo móvel médio. Contas CSS para 65KB espalhadas por sete arquivos. Isso pode não parecer significativo, mas as propriedades da folha de estilo podem fazer a diferença.
Tire algumas horas do seu tempo para examinar site existente para determinar se é possível substituir ou otimizar imagens, fontes e efeitos JavaScript com CSS mais eficiente. Seu código CSS pode aumentar, mas o peso geral cairá e o desempenho melhorará visivelmente.
Existem várias ferramentas de teste e depuração da capacidade de resposta da interface do usuário, o DevTools do navegador pode lhe ajuda também para avaliar o desempenho e descobrir os objetivos de otimização.
Essas ferramentas descreve como usar técnicas como CSS crítico e carregamento progressivo de CSS para garantir que as folhas de estilo sejam carregadas com eficiência. Breve escreverei um artigo explicando tais ferramentas e como usar-las.
Estou escrevendo um artigo com várias sugestões de desenvolvimento rápidos, mais intensivas e transformadoras para garantir que seu site permaneça rápido para todos.
5 - Mais 5 ideias bônus
5 Projetos para você dominar CSS3
Listei algumas sugestões de projetos para lhe fornece um norte:
- Crie um currículo online: Arquivo HTML que pode ser enviado por email. (Dica: evite adicionar JavaScript para garantir que ele não seja bloqueado pelos sistemas de email.);
- Crie seu próprio portfólio: Uma lista gráfica de todos os seus sites com informações adicionais quando um item é clicado. Um layout de grade é ideal, mas, se você realmente quer um desafio, tente um layout de alvenaria . (A CSS Grid ainda não pode implementar isso, mas considere como isso pode ser alcançado usando colunas CSS ou layouts de grade ordenados verticalmente.)
- Faça um Layout bacana: Caso você não tenha nenhuma ideia, recomendo visita o Dribbble ou em uma comunidade de design semelhante e codifique o HTML5 e CSS3.
- Crie imagens só usando CSS: Crie um conjunto de ícones úteis com pseudoelementos e formas CSS ou crie uma imagem usando gradientes e sombras.
- Experimente animações SVG e CSS: Tente criar logotipos atraentes, gráficos, barras de progresso, giradores de atividades e muito mais.
Conclusão
5 Projetos para você dominar CSS3
Por hoje é só, espero que esse artigo lhe ajude de alguma forma, breve teremos mais artigos sobre CSS3 e os novos recursos, temos um artigo bem completo sobre CSS Grid vou deixa os link aqui em baixo, temos também um canal no Youtube onde publico 2 vídeos por semana, da uma olhada lá o link vai está logo abaixo. Ate a próxima.
Crie um game com JavaScript
MiniCurso onde te ensino a construir do ZERO um Game incrível usando apenas JavaScript, CSS3 e HTML5, garanta sua vaga totalmente gratuito, clique no botão agora mesmo.
Veja a série onde estamos criando um replicar do DropBpx - Youtube
5 Projetos para você dominar CSS3
https://www.youtube.com/watch?v=rNaK6oCrXWM&list=PLw608KLEKJz9aXDnpBq7SWpq9tvRdcpP_
