Executando verificação de segurança...
76
MatheusManuel
6 min de leitura ·

✨FRONT-END -Links de sites íncriveis e ferramentas para você praticar o front end.✨

(Em Construção)Links da alguns site e ferramentas para você praticar o front end

Então esse post foi criado para aqueles que estão começando no front end. Nesse post você vai encontrar sites para treinar o front end para você treinar o html css e javascript, geradores css, ferramentas de desenvolvimento web e muito mais! Boa Leitura.

Se quiser contribuir para essa lista a comunidade agradece!

🎈Sites com desafios front end

  • Dev challenges -Desafios focados em projetos e práticas da vida real.
  • Code Well - Desafios para aprimorar suas habilidades em html e css que você pode navegar por modelos Figma de alta qualidade
  • Front end Pratice - Desafios para elevar suas habilidades de front-end,recriando sites reais de empresas reais
  • Ace Front End - Desafios de programação Front-end. Resultados via texto.
  • AdventoOfCode - Desafios de programação por temporada.
  • App Ideas - Compilado de desafios para você testar seus conhecimentos e aumentar seu portfólio
  • CodePen Challenges - Desafios de Programação Front-end.
  • Codier - Desafios de Programação Front-end, análise dos resultados feita pela comunidade.
  • CSS Battle - Batalhas temporárias de CSS.
  • DevChallenge - Site com desafios de front-end, back-end e mobile
  • Flex Box Defense - Desafio de Programação Front-end focados na propriedade flex box.
  • Flex Box Froggy - Desafio de Programação Front-end focados na propriedade flex box.
  • Front End Challanged Club - Bogs com desafios de programação front-end
  • Frontend Challengens - Repositório no GitHub com vários desafios solicitados reais solicitados por empresas
  • Frontend Mentor - Desafios de Programação Front-end, análise dos resultados feita pela comunidade, sem IDE integrada
  • BR Challenge - Desafios front end

🎈Geradores css

🎈Sites de ícones

🎈Extensões para o seu navegador

  • GoFullPage - Capture uma captura de tela de sua página atual.
  • Web Developer - Um conjunto enorme de funcionalidades que te ajudam no processo de desenvolvimento.
  • React Developer Tools - debug de apps que utilizam ReactJS, e permite verificar componentes, suas props, seus hooks e seus componentes children.
  • Window Resizer - Permite ver tamanhos de telas diferentes para os seus sites.
  • Light house - Monstra o desempenho e a qualidade das suas páginas da web.
  • ColorZilla - Conta gota para pegar qualquer cor que estiver dentro da página web
  • CSS Peeper - Mostra informações da página e não só também mostra as cores usadas na página e permite exportar todas as imagens do site
  • WhatFont - Mostra as propriedades tipograficas(fontes, tamanho da fonte e etc) dos elementos selecionados no site.
  • Responive Viewer - Mostra várias telas do seu site de uma vez, testa a rensponsividade do site.
  • JSON Viewer - Mostras as respostas JSON no navegador

🎈Banco de imagens gratuitos

🎈Geradores de Paleta de cores

🎈Sites para aprender programação de graça

BitDegree - cursos gratuitos que vão desde programação a desenvolvimento de games
Coursera
Code academy
Khan academy - A Khan Academy é uma das plataformas pioneiras no ensino à distância e gratuito de programação
Code wars - Codewars é uma plataforma para quem gosta de desafios e busca refinar suas habilidades praticando e se aperfeiçoando com o tempo.
Code org - Code.org é uma iniciativa para ensinar programação a crianças
Free Code Camp - Ela oferece desafios diários, projecto e como premiação, certificados.
W3Schools - O W3Schools vem equipado com tutoriais de programação, recursos, exemplos e exercícios para ajudar você a programar.
Curso em vídeo
Rocktseat Discover
The odin project

> Vamos nos conectar

Minhas redes sociais

Carregando publicação patrocinada...
2
1
1
1
LeMajstor

Já que ese post está em construção e vai ser atualizado constantemente seria legal uma forma para a gente salvar o post como favorito para poder ir acompanhando e receber notificação quando houver alteração.

Eu poderia salvar o link no navegador, é claro, mas não é a mesma experiência né.

1
1
1
1
1
Scrinnder

Cara você é sensacional, você não faz ideia do quanto isso vai ajudar inúmeras pessoas com isso, e eu sou uma delas, queria agradecer imensamente por mim, e por todos os que tu ajudou e vai ajudar, parabéns pelo conteúdo, acho que tem uma bagagem gigantesca pra quem ta começando, e vai ajudar imensamente, brigadããããão :D

0
1
1
1
1
FalciVitor

Muito útil o post, salvei nos favoritos no notebook da empresa pois contém vários elementos que não conhecia ainda, vai me ajudar bastante no dia a dia!

1
dieegosc

Obrigado pela contribuição!! comecei recentemente a estudar HTML e CSS, e queria ir praticando e treinando minhas habilidades para evoluir cada vez mais rápido.

0
1
1
1
1
1
1
1
thiagoomatheus

Goataria de acrescentar uma ferramenta que descobri a alguns dias e achei interessante.

É o app PowerToys, que pode ser encontrado na loja da Microsoft no Windows.

Uma função interessante é o seletor de cor e o screen ruler que funciona não apenas no navegador, mas no ambiente windows como um todo.

[FRONT-END]

1
1
1
HFLEURY

Muito obrigado pelas dicas !!!!!!!!!!

Porém eu gostaria de saber se você poderia me ajudar com algo mais além do código. Gostaria de ajuda com o Design:

  • Não tenho talento para Design porém gostaria de criar paginas com aparência agradável, algo que custa muita do meu tempo e tem sempre um resultado OK.
  • Você conseguiria me indicar um local onde pudesse apresender mais sobre design de forma objetiva, tipo um framework / um mapa mental para que eu pudesse fazer o básico bem feito.
  • Por exemplo, sofro muito com a aparencia dos botões, tamanho ideal da tab entre outros...

Teria algum caminho para me indicar ?

Desde já grato pela atenção.

2
ajessicavega

Eaí, tudo certo? Eu sou designer há quase 2 anos e um dos meus pontos fracos ainda está em criar o layout de sites e landing pages. Não sou especialista, mas vou tentar compartilhar com você o que me ajudou - e tem ajudado - bastante nessa área e no design em geral.

Então segue uma listinha (em ordem) do que fiz/faço nesse processo de melhorar o design das páginas que produzimos por aqui:


  1. Busque entender os PRINCÍPIOS DE DESIGN - eles são a BASE de tudo para se criar qualquer peça de design, incluindo sites e landing pages (esses 6 são os principais):

    • repetição
    • contraste
    • hierarquia
    • proximidade
    • alinhamento
    • espaço em branco

Alguns vídeos bem introdutórios, que vi só para me familiarizar com os termos quando comecei, foi de uma playlist num canal do Youtube chamado "GCFLearnFree.org" - segue o *link:*

https://www.youtube.com/watch?v=sByzHoiYFX0&list=PLpQQipWcxwt8vVzFpoJS5TtCh8Ktke9TH&ab_channel=GCFLearnFree.org



  1. Tendo entendido os princípios, eu diria que o segundo passo é APRENDER O BÁSICO SOBRE CORES, FONTES E FOTOGRAFIA - é isso que te permitirá criar layouts simples, bonitos e eficientes.

Aprenda o básico sobre o que cada fonte e cor transmite, e como combiná-las.
Aprenda como escolher boas fotografias, elas determinam o tom, e dão vida à página.



  1. Depois da teoria basal, acredito que "a clareza vem no movimento", com a PRÁTICA - é isso que fará você ter ideias melhores e mais rápidas, gastando menos tempo e tendo resultados cada vez melhores.

Para a prático, sempre consumo muitas REFERÊNCIAS, em lugares como: Behance, Pinterest, Dribbble e Instagram.

Além disso, ver vídeos de outras pessoas criando os layouts das suas páginas, entender qual o processo delas, ver como elas pensam, sempre ajuda muito e traz inputs interessantes quando vou criar depois.



  1. Por último, uma área que ainda não me aprofundei e preciso melhor muito, mas que acredito que faz toda a diferença para subir o nível do design das páginas, é:

    • UI DESIGN
    • design focado em conversão (acredito ser importantíssimo para melhorar a performance de landing pages, por exemplo)
    • comportamento humano (como as pessoas agem na internet hoje em dia, o fenômeno do "não me faça pensar", dopamina, etc.)


Acho que é isso, espero ter ajudado de alguma forma. Tmj!

1
2
1
1
1
NENEBR

OK, VOU DAR UMA OLHADA NESSES SITE AINDA ESTOU APRENDENDO FRONT END ESPERO ACHAR ALGO INTERESSANTE PARA PODER TREINAR, ESTOU COMENTANDO PARA TESTAR MESMO O SITE, MAS SÓ DE ENTRAR GOSTEI BASTANTE SEM POLUÇÃO ATÉ O MOMENTO JÁ CURTI DEMAIS!

1
Renanpaes

Nem te conheço e já gostei de você, estou começando a programar e sei que isso vai me ajudar bastante, muito obrigado! 👏🏼✨✨✨✨

1
1
1
Moeb

Legal, gosto bastante de treinar achei inicialmente que eram sites de referência, mas estão mais para sites de desafio frontend o que me deixa bastante empolgado como os sites que eu costumava usar para treinar código tipo o codewars, acaba sendo uma forma mais divertida de aprendizado.

1
1
1
0
1
kleniovieira

Desses, eu só conhecia o frontendmentor. Valeu pela dica @MatheusManuel! É sempre bom poder contar com dicas como essa pra quem tá começando a praticar!

0
1
Birgiman

Esses sites são para qual "nível" de programador front?

@MatheusManuel poderia editar o teu tópico e acrescentar o que o pessoal falou sobre o CSS e o Flex-Box!

1
1
tjfaccipieri

@Birgiman, o FrontEndMentor, tem desafios desde o nivel "newbie", que seria apenas HTML/CSS com um modelo mais simples, até o nivel Advanced, com HTML/CSS/JS e consumo de API.
Pra quem ta no começo, recomendo esse site, pois eles enviam o projeto ja com um readMe do que é esperado para o projeto, paleta de cores, imagens bases e fontes. Os outros sites, também tem bons desafios, mas pelo menos no meu ponto de vista, o FrontEndMentor é o mais amigavel.

1
mhdev

Lista incrível, vai ajudar muita gente com certeza! Tem uma extensão que uso que acredito que pode ser util, se chama Responsive Viewer que permite ver o site de forma responsiva em diversos tipos de tela ao mesmo tempo!

Fica aqui o link caso queriam conferir: Extensão responsive viewer

1
1
IsPaterno

Conhecia uma pequena parte dos sites citados, mas principalmente a parte dos geradores de paletas vai me ser extremamente útil não somente no web-dev, mas também para públicidade e criação de produtos. Muito bom material, caso haja uma atualização futura, poste um edit aqui, vou manter essa publicação nos meus favoritos.

1
1
1
1
1
1
1
1
1
1
1
1
1
1
davisamasoa

Sensacional essas dicas de sites e ferramentas pra estudar frontend. além disso, pra quem deseja praticar lógica de programação independente, sites como leetcode e codewars são incríveis!

1
1
1
2
1
1
1
DenisAugusto

Parabéns pela Iniciativa!

Gostarai de deixar uma contribuição em forma de pitaco já que o pouco que conheço está na lista hahaha.

Caso seja possível seria legal alterar o título para algo que descreva melhor o conteúdo, e também considere a utilização de alguma etiqueta, pois acredito que facilitará muito quem está procurando pelo conteúdo.

Exemplo utilizando o título da própria página:

[FRONTEND] Links de alguns sites e ferramentas para você praticar o front end.

Pode parecer besteira mas acredito que ajude até mesmo na organização aqui do TabNews. ❤️

0
1
1
1
1
1
1
Paulim

Vale adicionar o freeCodeCamp à lista, que além de ensinar HTML, CSS e bibliotecas front-end por desafios, também de desafia a construir projetos inteiros sozinho e por fim te rescompensa com Certificados de Cursos que você pode colocar até mesmo no seu currículo/LinkedIn!

1
1
Joelzin14

Muito obrigado Paulim!Estou me interessando mais ainda agora com essa plataforma em Front end. Vou entrar já agr no FreeCodeCamp👐🏽👐🏽!

1
joelirineu

Já salvando aqui pois não tenho duvidas de que isso vai ajudar bastante na hora de estudar. Já vou aproveitar também e compartilhar com meus amigos! ^^

1
Logistis

##@DESCHAPS!! FAVORITOS JÁ!!
Eu só queria ter um modo de salvar essa postagem em uma espécie de 'coleção'!! SENSACIONAL. Eu não sei pra q serve ou como usa metade de tudo isso, mas o que sei já me enche os olhos de possibilidades.

Agora, de muita utilidade, poderia somar os sites listados nesse link, que condensa 25 sites para se aprender a programar, com conteúdos pagos como Udemy e gratuítos como Khan Academy que me salvou diversas vezes em c1 c2 e c3.

1
JoabBispo

Excelente publicação! Queria agregar com um outro site de comparação e paletas de cores que combinam entre elas, que é o coolors!

Sempre Utilizo em criação/inspiração para cores de sites, ajuda bastante!

1
1
1
lage

Caraca que top só faltou agora ter como favoritar este guia na minha conta (provavelmente feature futura) mas este vou copiar o link e salvar como uma guia no navegador valeu man.

1
1
1
1
1
1
1
1
1
menezs

Obrigado pelas Indicações. Belo Conteúdo, Particularmente não conhecia a maioria!
Se Me permite gostaria de Sugerir um sitezinho massa (gratuito) https://uiverse.io/, ele tem loaders, checkboxes, botoes, toggles, inputs e cards, prontos com codigo HTML e CSS, caso queira alterar algo do elemento fique a vontade.

1
1
0
0
0
0
0
0
0
0
0
0
0