Site com tutoriais para criação FrontEnd Webdesigner

Boa Noite,

Hoje quero indicar o site do meu amigo Gabriel Costa, ele contém uma série de tutoriais de qualidade oferecidos de forma gratuita para quem está começando a jornada para se tornar um Web designer de sucesso, com dicas sobre Jquery, Php, Wordpress, Bootstrap entre outros.

Um tutorial que me deixou bastante satisfeito pela quantidade de informações relevantes é a série Tutoriais Wordpress com atualmente nove partes e bastante conteúdo.
O nome do site é TutorialWebdesign e no site você também encontra Vagas de Ti, oportunidades de negócio e muita notícia. Então vale apena conferir.

Tutorial Webdesign
http://www.tutorialwebdesign.com.br

Top 10 Webfontes - Bibliotecas ícones de Fontes de Texto Grátis para seu site (.eot .woff .ttf .svg )

São muitas as vantagens de se utilizar bibliotecas de ícones no formato de arquivos FONT DE TEXTO para a interface do seu site, por exemplo, se você é um webdesign já deve ter ouvido falar ou utilizado as chamadas WEBFONTS, preparei uma lista com as mais comuns utilizadas em meus projetos:

Vantagens:

• Produtividade: As bibliotecas já possui os ícones mais utilizados e geralmente poucos serão desenvolvidos.
• Desempenho: Nos testes um arquivo de font carrega mais rapidamente o request é mais rápido do que uma sprit de imagens ou a mesma quantidade de ícones como imagens.
• Qualidade: Como esses arquivos de ícones estão em formato Vetor de Font, podem ser ampliados   sem perder a qualidade.
• Adaptação:  Você consegue encaixar de forma simples no texto, botões e links no html bastando mapear um css e uma classe.
• Customização: É possível criar a própria biblioteca de fontes de ícones que você possui habilidade de webdesign para isso, ou apenas selecionar os ícones disponíveis.

Melhores Bibliotecas Webfont grátis

FontFile .eot .woff .ttf .svg

1. Icomoon - free http://icomoon.io/app/#/select
   (Muito bom, grande variedade de ícones, permite customizar ou criar os próprios ícones e selecionar e gerar uma biblioteca com apenas os ícones que você deseja utilizar, agiliza o CSS)
   
   
2. Font-Awesome - http://fortawesome.github.io/Font-Awesome/  Pode ser instalada no Bootstrap, não utiliza javascript, perfeito em display de retina, visível na impressão, controlado por css class.
   
   
3. Adamwhitcroft http://adamwhitcroft.com/batch/ The download includes: PSD file (shape layers). SVGs (128x128). PNGs (16x16, 32x32, 64x64). Webfont (.eot, .ttf, .woff).
   
   
4. Fontello http://fontello.com/ Como todas as fontes de ícones, possui vetor e sua propaganda tem foco na qualidade ao redimensionar os ícones sem perder qualidade.
   
   
   
5. Shoestrap http://shoestrap.org/downloads/elusive-icons-webfont/
   
   
6. Entypo Icons - http://www.entypo.com/ Projeto com ícones gratuitos para sites e blogs.
   
   
7. Ligature Symbols http://kudakurage.com/ligature_symbols/ Grande variedade de ícones de fonte com qualidade permitindo criar sites responsivos, possui suporte para multi plataforma.
   
   
8. Typicons http://typicons.com/ - A biblioteca atual possui 220 web icons para download
   
   
9. MapBox - https://www.mapbox.com/maki/ -  Permite utilização em projetos de geoprocessamento, mapeamento, google maps icons...
   
   
10. Glyphicons - http://glyphicons.com/ ou http://getbootstrap.com/components/ - Um dos melhores tanto na quantidade quanto na facilidade de utilização, o Bootstrap Twitter incorporou essa biblioteca de fontes no seu projeto.

Novas fontes, tendências e tecnologias estão surgindo a todo instante, se você acha que eu esqueci de citar uma boa alternativa de webfontes, informe aqui nos comentários ;)

Bootstrap 3 Cursos e Tutoriais Gratis Online do Youtube

Uma nova tendência no desenvolvimento web é o desenvolvimento de sites multiplataformas, responsivo que se adapte em vários formatos de mídia, celular, tablet, mobile, smart tv e outros. Para facilitar esse desenvolvimento o Twitter lidera um projeto chamado Bootstrap que é um Guia de Interface de Usuário que permite utilizar componentes comuns utilizados em sites para agilizar esse desenvolvimento.  Por exemplo, Grid de layout, botões, ícones, formulários etc.

Lista de componentes prontos em Bootstrap:

1. Glyphicons
2. Dropdowns
3. Button groups
4. Button dropdowns
5. Input groups
6. Navs
7. Navbar
8. Breadcrumbs
9. Pagination
10. Labels
11. Badges
12. Jumbotron
13. Page header
14. Thumbnails
15. Default example
16. Custom content
17. Alerts
18. Progress bars
19. Media object
20. List group
21. Panels
22. Wells

Curos de Bootstrap 2 oferecido gratuitamente pelo JCursos (Português)

Curso de Bootstrap 3 oferecido de graça pelo Aprendiendoando (Espanhol)




Tutorial de Bootstrap 3 - Oferecido gratuitamente pelo CodersGuide (Inglês)



Esses cursos são excelentes para dar um start nessa tecnologia, siga o blog e fique Ligado, novas tecnologias de desenvolvimentos e tendência de mercado serão indicados aqui.