Como aprender css: 4 passos (com imagens)

Como Aprender CSS: 4 Passos (com Imagens)Sabe aquela história de que a cada projeto WEB é necessário começar tudo do zero, escrever linhas e mais linhas de CSS, Javascript, etc para fazer provavelmente coisas similares que já foram feitas em outros projetos? Usando este framework, isso não é mais necessário!!

Bootstrap é um framework front-end que ajuda no desenvolvimento de sites e aplicações WEB. É uma coleção de vários elementos e funções para desenvolvimento WEB, como HTML, CSS e Javascript disponibilizados em uma única ferramenta.

A idéia é que ao iniciar um novo projeto você já tenha uma estrutura pronta com os elementos mais comuns que são utilizados, não precisando começar do zero e escrever várias linhas de código para fazer a mesma coisa novamente.

Outra grande característica do Bootstrap é que ele é responsivo, o que isso significa? Significa que quando você criar uma página HTML usando Bootstrap ela vai se adequar corretamente ao tamanho da tela de um celular, tablet ou computador sem que seja necessário adicionar um código específico para cada layout de tela.

Para configurar e começar a usar o Bootstrap no seu projeto, é muito simples e rápido, o primeiro passo é fazer o download dos arquivos pelo site do Bootstrap.

Ao descompactar o pacote está será a estrutura criada:

Como Aprender CSS: 4 Passos (com Imagens)Figura 1 – Estrutura dos arquivos Bootstrap

A estrutura do Bootstsrap é muito simples de entender e de se usar, cada pasta corresponde aos tipos de arquivos que são oferecidos pelo framework.

Para começar a usar basta criar, por exemplo, uma página HTML na raiz do diretório e no código fazer a chamada para os arquivos do Bootstrap.

Listagem 1 – Adicionando Bootstrap a uma página HTML

Pronto! Com essas poucas linhas o Bootstrap está configurando na página HTML. Notem que esse trecho do código é onde apontamos os arquivos da pasta descompactada.

Listagem 2 – Link para os arquivos Bootstrap

Para ilustrar que o uso do Bootstrap pode fazer milagres na criação de front-end e que o tempo de desenvolvimento será otimizado, segue um exemplo de uma tabela onde é usado o feito de cores alternadas nas linhas:

Table

#
Nomes
1 Carlos
2 Maria
3 Pedro

Listagem 3 – Página HTML usando Bootstrap

O resultado pode ser visto na imagem abaixo:

Como Aprender CSS: 4 Passos (com Imagens)

Figura 2 – Tabela criada com CSS do Bootstrap

Todas as classes CSS que foram usadas nesse código fazem parte da biblioteca do framework, não foi preciso escrever nenhuma linha de CSS para obter esse resultado! Notem que a classe usada na tabela table-responsive já trabalha com o conceito de responsivo, portanto, essa tabela criada se adapta ao tamanho da tela em que a página for acessada. Abaixo segue uma imagem de como a página é exibida quando acessada pelo celular.

Como Aprender CSS: 4 Passos (com Imagens)

Figura 3 – Exemplo que o Bootstrap é responsivo

Vimos até aqui o uso do CSS pelo framework.

Agora veremos um exemplo bem simples de como fazer com que ao passar o mouse em cima de uma das linhas da tabela, ela fique selecionada com outra cor, sem precisar escrever nenhum código Javascript ou Jquery.

Para fazer essa funcionalidade basta trocar o nome da classe da table de table-striped para table-hover, pronto! Em 1 segundo você tem uma funcionalidade muito usada implementada na sua página.

Como Aprender CSS: 4 Passos (com Imagens)

Figura 4 – Exemplo usando Bootstrap para deixar a linha selecionada com uma cor diferente

Agora vamos supor que precisamos colocar outra tabela ao lado da que criamos anteriormente, com o Bootstrap basta criarmos uma div com a classe row e colocarmos a nossa tabela dentro de uma div com a classe col-md-4 e a outra tabela dentro de uma div usando também a classe col-md-4, fácil assim ????

Table

#
Nomes
1 Carlos
2 Maria
3 Pedro
#
Nomes 2
1 Renato
2 Lucas
3 Paulo

Listagem 4 – Código para colocar duas tabelas lado a lado

Abaixo a imagem de como ficaram as tabelas:

Como Aprender CSS: 4 Passos (com Imagens)

Figura 5 – Tabelas posicionadas lado a lado usando classes do Bootstrap

O Bootstrap é um framework com várias vantagens que devem ser levadas em consideração no momento de se iniciar um projeto. Neste post o objetivo foi mostrar de forma bem sucinta como começar a utilizá-lo. Para explorar mais a ferramenta, entender os conceitos para construir os elementos e utilizar os recursos disponíveis, vale a pena uma leitura no site oficial do Bootstrap.

Referência

http://getbootstrap.com/

5 aplicações que podem ser criadas aprendendo apenas HTML, CSS e JS

Desenvolver uma aplicação pode ser considerado algo muito difícil. Principalmente quando estamos no início de tudo, ou seja, dando os primeiros passos. Geralmente, nesse momento, quase sempre começamos aprendendo a trinca de ouro: HTML, CSS e JavaScript.

Contudo, quando comparamos essas 3 tecnologias com as demais restantes no mercado de TI. De vez em quando dá até um certo desânimo, pois acabamos por lembrar das outras milhares de siglas existentes nessa área.

Só para citar algumas:

C, C++, Java, Delphi, Basic, VB, C#, Python, Pearl, Objective C, HTML, CSS, JavaScript, PHP, ASP, .

Net, Ajax, JSON, jQuery, Bootstrap, NodeJS, AngularJS, Knockout, Hibernate, Struts, ORM, DAO, SQL, MySQL, PostgreSQL, Oracle, SQL Server, NoSQL, MongoDB, Cassandra, Orientação a Objetos, MVC, REST, Web Services, CodeIgniter PHP, Zend, PhoneGap, Appcelerator, WordPress, CMS, Joomla, Drupal, SVN, Git, SourceForge, front-end, back-end…

Parece muita coisa, não? A partir disso, acabamos tomando a falsa conclusão de que precisamos aprender tudo isso para só então começarmos a criar algo prático e funcional. Bom, eu tenho uma boa notícia para você: isso é mentira!

PS: para você ser um especialista você vai SIM precisar saber de muita coisa, mas não TUDO. Você precisa aprender e praticar o que é relevante para a sua área de atuação. Por exemplo, se você trabalha com front-end, saber JavaScript é essencial. Agora, dependendo do projeto que você esteja atuando, aprender C# pode (ou não) ser necessário.

“OK, para ser um especialista é preciso estudar e praticar muito, isso já ficou claro. Mas e se eu estou iniciando e quero criar algo prático e funcional?”

Excelente, muito obrigado por perguntar!

A resposta para essa pergunta é muito simples. Com muito pouco (muito pouco mesmo!) já é possível criar algo bonito, prático e funcional. Sim, agora estou falando sobre o título do post: “aplicações que você pode criar aprendendo apenas HTML, CSS e JavaScript”. Quer saber mais sobre quais são essas aplicações? Então é só continuar lendo!

HTML, CSS e JavaScript: o que cada um faz?

Antes de partirmos para os exemplos de fato, é preciso explicar o básico sobre HTML, CSS e JavaScript para o pessoal que está caindo de paraquedas aqui no blog da Becode. Leitores assíduos podem pular essa etapa.

Mas então, sendo bem direto, o HTML é o responsável pelo esqueleto dos sites, o CSS pela aparência e o JavaScript pelas habilidades adicionais (comportamento). Vamos explicar isso melhor abaixo:

HTML, o esqueleto

Quando você quer desenvolver um site, é o HTML que cuidará de estruturar suas páginas. Essa é a tecnologia responsável por inserir conteúdo: textos, imagens, tabelas e/ou os demais tipos de conteúdos. Feito isso, quando o HTML estiver pronto, o site não terá cores, padrões nem uma aparência interessante e é nesse ponto que entra o CSS.

CSS, a maquiagem

O CSS é uma linguagem de estilização. Portanto, fontes, cores e efeitos serão atribuídos através das regras inseridas nas folhas de estilo (.css) do site. Quando o assunto é CSS, é interessante você saber que existem diversas tecnologias auxiliares a ele, como os pré-processadores e os frameworks front-end.

Estas tecnologias permitem que o CSS seja ainda melhor utilizado. Contudo, não são tecnologias essenciais no ínicio de uma carreira. Em outras palavras, nesse primeiro momento, foque seus estudos na versão pura do CSS.

JavaScript, os músculos

O JavaScript entra no final, sendo o responsável pelas funcionalidades e comportamento do site. Sabe aqueles menus que abrem e fecham quando você clica? Então, esse é um bom exemplo da utilização do JavaScript! Além disso, ele pode ser utilizado para automatizar uma série de operações e trazer funcionalidades extras para o site (comportamento).

Leia também:  Como calcular a ingestão de sal: 13 passos (com imagens)

Para mais exemplos sobre o uso de JavaScript, dê uma olhada nesse post que criamos sobre a linguagem.

Por que é importante aprender os três?

Uma das melhores coisas em se aprender essas três linguagens é que isso pode ser o marco de um início de carreira no mundo do desenvolvimento de software, já que a curva de aprendizado para essas linguagens tende a ser menor.

Bom, agora que você sabe a diferença entre cada um deles, vamos conhecer os 5 tipos de aplicações que podemos criar conhecendo APENAS essas três linguagens!

1. Landing Pages e Hotsites

Como Aprender CSS: 4 Passos (com Imagens)

Já ouviu falar em Landing Pages e Hotsites? Ambos os termos se referem a sites que possuem apenas uma página e visam objetivos específicos:

  • Landing Pages são muito utilizadas em ações de marketing digital. Nesse formato de página, o objetivo final geralmente é fazer com que o usuário preencha um formulário em troca de algo. Esse algo pode ser uma promoção, um ebook, acesso a um webinar, enfim. Não há limites para a criatividade. Nesse cenário, o usuário fica feliz, pois conseguiu acessar o material desejado e a empresa também atinge o seu objetivo, pois conquistou o usuário para realizar futuras ações de Marketing. Nós, por exemplo, possuímos diversas Landing Pages aqui na Becode, dê uma olhada.
  • Já, os Hotsites, são páginas temporárias ou pequenos websites que não necessariamente possuem o objetivo de levar o usuário a realizar uma ação (como é o caso das Landing Pages). Atualmente, Hotsites são muito utilizados para a divulgação de eventos e campanhas avulsas de Marketing (marcas grandes como Coca-Cola e Pepsi costumam fazer isso), entre outras aplicações possíveis. Entretanto, é inegável que os Hotsites são, em sua maioria, utilizados para eventos, visando a divulgação de programações e atrações temporais. Veja um exemplo de Hotsite abaixo.

Como Aprender CSS: 4 Passos (com Imagens)

Nos dois casos, o desenvolvimento dessas páginas é mais fácil e rápido, já que não existe muita complexidade em seu processo de criação. O desenvolvimento costuma ter um início, meio e fim descomplicado.

Em outras palavras, tendo experiência e prática, é possível criar e finalizar tudo em um dia só.

E, como prometido, trata-se de uma aplicação que, em projetos menores, pode ser criada apenas com HTML, CSS e JavaScript.

2. Sites Estáticos

Assim como landing pages e hotsites, sites estáticos são uma forma fácil de começar a desenvolver com HTML, CSS e JavaScript. Nesse tipo de aplicação, tudo é feito no carregamento da página e não existem funções complexas de back-end (estas presentes em sites dinâmicos).

“OK, mas o que é um site dinâmico e o que é um site estático?”

Para ficar mais fácil de entender o que é um site estático, vamos explicar o que é um site dinâmico. Bom, uma página web é considerada dinâmica quando ela permite que o conteúdo seja gerenciado (como um blog, um site completo ou até um ecommerce), quando aceita comentários, possui login, busca e outras funções mais complexas.

Para que um site dinâmico seja desenvolvido, são necessárias mais ferramentas como um CMS, um SGBD e uma linguagem de back-end (veja o item bônus). Já, no site estático não há essa necessidade. O site estático precisa apenas de HTML, CSS e JavaScript.

Tudo claro agora? Se não, para mais informações sobre a diferença entre um site estático e um site dinâmico, dê uma olhada nesse artigo que está bem mais completo e ainda conta com um tutorial incrível para desenvolver a sua primeira página dinâmica. Agora, se o seu interesse é aprender a desenvolver um site estático, dê uma olhada no nosso ebook de HTML e CSS (imagem abaixo). Ao final da leitura, você terá tido um passo-a-passo para criar uma página exatamente igual a essa.

Como Aprender CSS: 4 Passos (com Imagens)

3. Portfólio Pessoal

Já pensou em usar a internet para vender seu peixe e desenvolver seu CV de uma forma diferente? Seja para jobs freelancers ou empregos formais. Então, criar um portfólio online, bonito e moderno usando HTML, CSS e JavaScript tem sido um diferencial entre muitos candidatos, pois isso trás vantagens frente a outros profissionais. Os benefícios são inúmeros!

Introdução a HTML e CSS | Desenvolvimento Web com HTML, CSS e JavaScript

“Quanto mais nos elevamos, menores parecemos aos olhos daqueles que não
sabem voar.” — Friedrich Wilhelm Nietzsche

A única linguagem que o navegador consegue interpretar para a exibição de
conteúdo é o HTML. Para iniciar a exploração do HTML, vamos imaginar o seguinte caso: o
navegador realizou uma requisição e recebeu como corpo da resposta o seguinte conteúdo:

Mirror Fashion

Bem-vindo à Mirror Fashion, sua loja de roupas e acessórios.

Confira nossas promoções.
Receba informações sobre nossos lançamentos por email.
Navegue por todos nossos produtos em catálogo.
Compre sem sair de casa.

Para conhecer o comportamento dos navegadores quanto ao conteúdo descrito antes, vamos
reproduzir esse conteúdo em um arquivo de texto comum, que pode ser criado com qualquer
editor de texto puro. Salve o arquivo como index.html e abra-o a partir do navegador
à sua escolha.

Como Aprender CSS: 4 Passos (com Imagens)

Parece que obtemos um resultado um pouco diferente do esperado, não? Apesar de ser capaz de
exibir texto puro em sua área principal, algumas regras devem ser seguidas caso desejemos
que esse texto seja exibido com alguma formatação, para facilitar a leitura pelo usuário final.

Usando o resultado acima podemos concluir que o navegador por padrão:

  • Pode não exibir caracteres acentuados corretamente;
  • Não exibe quebras de linha.

Para que possamos exibir as informações desejadas com a formatação, é necessário que cada
trecho de texto tenha uma marcação indicando qual é o significado dele. Essa marcação
também influencia a maneira com que cada trecho do texto será exibido. A seguir é listado
o texto com uma marcação correta:

Mirror Fashion Mirror Fashion Bem-vindo à Mirror Fashion, sua loja de roupas e acessórios. Confira nossas promoções. Receba informações sobre nossos lançamentos por email. Navegue por todos nossos produtos em catálogo. Compre sem sair de casa.

Reproduza o código anterior em um novo arquivo de texto puro e salve-o como
index-2.html. Não se preocupe com a sintaxe, vamos conhecer detalhadamente cada
característica do HTML nos próximos capítulos. Abra o arquivo no navegador.

Como Aprender CSS: 4 Passos (com Imagens)

Agora, o resultado é exibido de maneira muito mais agradável e legível. Para isso, tivemos
que utilizar algumas marcações do HTML. Essas marcações são chamadas de tags, e elas
basicamente dão significado ao texto contido entre sua abertura e fechamento.

Apesar de estarem corretamente marcadas, as informações não apresentam nenhum atrativo
estético e, nessa deficiência do HTML, reside o primeiro e maior desafio do programador
front-end.

O HTML foi desenvolvido para exibição de documentos científicos.

Para termos
uma comparação, é como se a Web fosse desenvolvida para exibir monografias redigidas e
formatadas pela Metodologia do Trabalho Científico da ABNT.

Porém, com o tempo e a evolução
da Web e de seu potencial comercial, tornou-se necessária a exibição de informações com
grande riqueza de elementos gráficos e de interação.

Começaremos por partes, primeiro entenderemos como o HTML funciona, para depois
aprendermos estilos, elementos gráficos e interações.

2.2 Sintaxe do HTML

O HTML é um conjunto de tags responsáveis pela marcação do conteúdo de uma página
no navegador. No código que vimos antes, as tags são os elementos a mais que escrevemos usando
a sintaxe . Diversas tags são disponibilizadas pela linguagem HTML e
cada uma possui uma funcionalidade específica.

No código de antes, vimos por exemplo o uso da tag

. Ela representa o título principal
da página.

Mirror Fashion

Note a sintaxe. Uma tag é definida com caracteres , e seu nome (h1 no caso). Muitas
tags possuem conteúdo, como o texto do título (“Mirror Fashion”). Nesse caso, para determinar
onde o conteúdo acaba, usamos uma tag de fechamento com a barra antes do nome:

.

Algumas tags podem receber atributos dentro de sua definição. São parâmetros usando a sintaxe
de nome=valor. Para definir uma imagem, por exemplo, usamos a tag e, para indicar
qual imagem carregar, usamos o atributo src:

Repare que a tag img não possui conteúdo por si só. Nesses casos, não é necessário usar uma
tag de fechamento como antes no h1.

2.3 Estrutura de um documento HTML

Um documento HTML válido precisa seguir obrigatoriamente a estrutura composta pelas tags
, e e a instrução . Vejamos cada uma delas:

A tag

Primeiros passos no HTML5, JavaScript e CSS3

Este artigo apresentará alguns dos recursos trazidos pelas tecnologias HTML5, JavaScript e CSS3. Dentre os recursos abordados estão: campos de dados, validação de formulário, armazenamento de dados com JavaScript, efeitos de texto e bordas redondas com CSS3.

Este tema é útil a todos os desenvolvedores que desejam conhecer melhor as novidades das tecnologias client-side que vão revolucionar a maneira de desenvolver aplicações atraentes e interativas para a web.

Este artigo introduzirá os recursos das tecnologias HTML, JavaScript e CSS sendo estudados numa abordagem prática.

O objetivo das versões das tecnologias tratadas é facilitar a compreensão e manutenção do código, dar suporte a conteúdos que anteriormente só eram apresentados com plug-ins adicionais (vídeos, por exemplo) e auxiliar o desenvolvimento web baseado em padrões compatíveis com todos os tipos de dispositivos.

Através dos anos a internet passou por inúmeras mudanças. Os primeiros web sites que surgiram continham apenas conteúdo estático, ou seja, eram constituídos por páginas HTML expondo somente textos, imagens e links (sem muita interação com o usuário).

Relacionado: Carreira Programador Front-end

A necessidade de mais dinamismo nas páginas web culminou na criação do JavaScript, que chegou ao mercado em 1996. Com esta tecnologia foi possível mais interação nas páginas, uma vez que o JavaScript possui recursos como manipulação de conteúdos, elementos e eventos HTML.

Também em 1996 surgiu a primeira versão do CSS, uma linguagem de estilo utilizada para definir a apresentação de documentos HTML e XML. Seu principal benefício é separar a aparência do conteúdo de um documento.

Assim, ao invés da formatação ficar dentro do documento HTML, neste haverá apenas uma ligação para o arquivo CSS, que contém os estilos.

Deste modo, várias páginas podem utilizar o mesmo arquivo de formatação, e quando o programador quiser alterar a aparência do site, é necessário modificar apenas um arquivo.

Apesar dos vários recursos e funcionalidades do JavaScript e pelo CSS, ainda havia algumas deficiências. Por exemplo, devido às limitações das primeiras versões do HTML, não existia o suporte à apresentação de vídeos, e criar aplicações visualmente ricas ainda não era possível.

Para suprir tais deficiências, comumente se faz uso de plug-ins como o Adobe Flash.

Porém, com o intuito de não depender de plug-ins externos para tais tarefas, facilitar a manutenção e compreensão, e auxiliar o desenvolvimento web baseado em padrões compatíveis com todos os dispositivos, surgiu o HTML5 e o CSS3.

O HTML5 inclui novas tags que fornecem suporte a arquivos de vídeo e áudio, tipos de campos de dados, validação de formulários e outros recursos que veremos no decorrer do artigo.

Também há novidades em sua API JavaScript, dentre elas, a possibilidade de salvar dados no computador do usuário de forma mais segura e rápida do que usando cookies.

Já o CSS 3 possui uma série de recursos visuais para incrementar a aparência de suas aplicações.

Curso: O que é HTML?

Apesar do HTML5 e do CSS3 ainda estarem em desenvolvimento, as versões recentes dos navegadores mais populares já incorporam muitas das novas funcionalidades. Para testar o suporte de seu navegador, você pode acessar o site: http://html5test.com.

Curso: O que é CSS?

Com a finalidade de demonstrar um pouco dessas novidades, no decorrer deste artigo serão abordados recursos do HTML5, JavaScript e CSS3.

Para isso, o conteúdo foi dividido quatro seções: a primeira seção trata de HTML5 e JavaScript, a segunda aborda CSS3, a terceira demonstra como configurar o ambiente de desenvolvimento para uma aplicação Java para web e, a última seção apresenta o HTML5 integrado em um sistema web Java.

Como este artigo é focado nas tecnologias utilizadas no desenvolvimento web do lado cliente (parte da aplicação que roda no navegador), é importante conhecer melhor o papel de cada uma para um melhor entendimento dos assuntos tratados nas próximas seções.

Essas tecnologias se dividem em:

  • Marcação: trata-se da linguagem de marcação HTML, responsável por definir o que representa cada conteúdo em uma página e criar as ligações (links) para outros conteúdos;
  • Apresentação: refere-se à tecnologia CSS, que é uma linguagem de estilo utilizada para definir a aparência de documentos escritos em HTML. Como já mencionado, seu principal benefício é prover a separação entre o formato visual e o conteúdo de um documento;
  • Comportamento: trata-se do JavaScript, utilizado para trazer mais dinamismo às páginas web através de recursos como controle de eventos, manipulação de elementos DOM e seus conteúdos, entre outras funcionalidades.

O HTML5 vem para revolucionar a maneira de se programar para web, com novos recursos que antes só eram disponíveis utilizando outras tecnologias. Sua finalidade é trazer suporte para os mais recentes tipos de multimídia e mantendo uma sintaxe legível, consistente e também bem compreendida por computadores e outros dispositivos.

O que é e como começar com HTML e CSS?

Mesmo se você for iniciante no meio da programação provavelmente já deve ter ouvido falar sobre HTML. O HTML é uma linguagem muito fácil de se aprender e em pouco tempo você já poderá criar um website com facilidade. Com um pouquinho mais de tempo e dedicação, você poderá estilizar suas páginas utilizando o CSS, conseguindo um resultado mais profissional.

O HTML e o CSS são utilizados para criar páginas web e atuam de forma complementar. Neste artigo você poderá conhecer mais sobre eles e como iniciar seus estudos, principalmente se você está dando os primeiros passos nessa área.

O que é HTML?

O HTML é a linguagem base para se desenvolver qualquer site. É uma linguagem baseada em marcação, onde marcamos os elementos para definir quais informações a página vai exibir. A linguagem HTML foi criada na década de 1990 e suas especificações são controladas pela W3C (World Wide Web Consortium).

O que é CSS?

O CSS é uma linguagem de folha de estilo composta por “camadas”, criado com o propósito de estilizar as páginas HTML, ou seja, definir a aparência das páginas, para deixá-las visualmente mais bonitas e agradáveis, podendo alterar a fonte, cor, posicionamento dos elementos, layout e muito mais.

Uma das maiores vantagens de se utilizar o CSS é que ele efetua a separação entre o formato da página e o conteúdo de um documento, proporcionando assim uma maior flexibilidade e controle de como as características serão exibidas, além de reduzir a duplicação no conteúdo estrutural de uma página.

Quem usa HTML e CSS?

Todos os sites utilizam HTML e CSS de uma forma ou de outra. Você se lembra da época do Orkut quando enviávamos recados e depoimentos? Nessa época gostávamos de deixar eles mais bonitinhos… Com fontes, cores, diferentes tamanhos, negrito, itálico, e mais uma infinidade de tags que podiam ser utilizadas… Sim, aquilo era HTML.

Sintaxe do HTML

A sintaxe do HTML foi criada para ser de fácil entendimento tanto para nós quanto para a máquina, além disso você não precisa de nada mais do que um editor simples. Como vimos, HTML é uma linguagem de marcação.

Essas marcações são chamadas de tags, que são abertas e depois fechadas. É com as tags que dizemos para o navegador o que é um título, parágrafo, botão, formulário, dentre outros.

Primeiramente vamos ver como é a estrutura básica do HTML:

Seu código aqui

Essa é a estrutura que sempre será utilizada. Se quisermos exibir na página o nosso clássico “Hello World”, temos que escrever o texto dentro de um parágrafo e colocá-lo dentro da tag “body”.

Hello World

Para criar um texto com link, você pode definir a url que será acessada ao clicar, através do atributo href:

TreinaWeb

Sintaxe do CSS

Com o CSS você pode criar folhas de estilo, que são muito úteis e fáceis de serem utilizadas. Por exemplo, vamos criar uma folha de estilo chamada style.css e com os seguintes atributos:

strong {
color: blue;
}

h1 {
font-style: italic;
}

Hello World

Seja bem-vindo ao TreinaWeb!

Quando abrirmos a página ele vai nos mostrar a frase “Hello World”. A palavra “World” está dentro da tag “strong”, então ela vai se comportar da maneira que estilizamos no arquivo CSS: em negrito e na cor azul. Já a frase “Seja bem-vindo ao TreinaWeb!” aparecerá em itálico, conforme colocamos no nosso arquivo CSS.

Mercado de trabalho

A maioria das páginas da Internet são escritas em HTML e estilizadas usando CSS, daí podemos ver a sua incontornável importância. Você pode começar a aprender a criar suas próprias páginas e, mais para frente, ter a capacidade de desenvolver telas para sites, aplicativos mobile, sistemas web e desktop.

Saber HTML e CSS é pré-requisito para qualquer desenvolvedor, mesmo se você não desenvolve diretamente para a Web.

Como aprender HTML e CSS?

Como você já pode ver nesse artigo, o HTML e o CSS são extremamente importante de serem estudados e são de fácil aprendizagem. O HTML5 e o CSS3 são as versões mais atuais.

Aqui no TreinaWeb temos o curso “Desenvolvimento web com HTML5 e CSS3 Básico” que foi desenvolvido com o objetivo de ser uma porta de entrada para você entrar para o mundo do desenvolvimento, seja web ou mobile.

Conheça nossa metodologia

Nosso ambiente de aprendizagem é 100% online. Nossa metodologia de ensino é baseada em vídeo aulas, apostilas, exercícios aula-a-aula e exemplos completos. Você estuda no seu tempo e ao final pode baixar o seu certificado digital ou solicitar o certificado impresso.

Na parte escrita, fornecemos um material totalmente atualizado e completo para que você possa usufruir do conteúdo, utilizando-se de textos e imagens. Já as vídeo-aulas são bem explicativas e práticas, abordando todo o conteúdo passo-a-passo, para que você entenda tudo da melhor maneira possível.

Além disso, você encontrará exercícios para poder fixar, praticar e aplicar todo o conteúdo aprendido. São exercícios que são propostos em cada aula do curso. Eles podem variar entre alguns formatos, como por exemplo questões de escolha única, questões de múltipla escolha e complemento de trechos de código.

Se ainda assim você tiver alguma dúvida, você poderá pedir ajuda aos nossos professores através de tickets de atendimento. Funciona como um canal direto entre você e o professor, onde você poderá realizar perguntas que serão respondidas muito brevemente!

Além disso, ainda pelo sistema suporte, você também poderá consultar todas as perguntas que já foram respondidas a outros alunos! =)

Quais conhecimentos preciso ter para iniciar este curso?

Você não precisa de nenhum conhecimento prévio para iniciar neste curso, apenas sua força de vontade. =)

Gostou do que viu?

Se entusiasmou com o HTML e o CSS? Gostaria de conhecê-los com mais detalhes? Sim, você pode dar uma espiadinha. Acesse o link do curso de HTML5 e CSS3 e veja algumas aulas de exemplo.

Bons estudos!

Como dar início ao FRONT-END em 2018?

Talvez um dos tópicos mais pesquisados pelos iniciantes na área. Mas não se desespere em aprender rápido, as coisas levam tempo para se consolidarem e devem ser respeitadas.

Você já deve ter se perguntado: Qual a maneira mais fácil e rápida de aprender front-end? A verdade é que não há atalhos e muito menos fórmulas mágicas para ser um desenvolvedor front-end, basta ter persistência e dedicação.

Todos nós algum dia de nossas vidas nos perguntamos: “Será que realmente estou no caminho certo aprendendo isso? É realmente necessário?”

Começando

Independente se você vai querer ser um front end engineer ou front end design, a primeira coisa que você deve aprender e levar para vida são os fundamentos de HTML5 e CSS3, sem essa dupla fantástica e crucial dominada logo à frente encontrará problemas..

Após ter dominado a dupla, é importante conhecer e praticar o famoso mobile-first. Mobile-First, para quem não conhece, é um conceito onde é desenvolvido primeiramente para telas menores (celulares e tablets), ou seja, você escreve HTML e CSS de forma que eles respeitem telas menores e depois vá se ajustando para telas maiores (desktop).

Beleza, já domino HTML5, CSS3 e sei aplicar Mobile-First. E agora? Agora é importante estudar o Get BEM ou apenas BEM. BEM é uma metodologia que tem o intuito de ajudar o desenvolvedor a escrever classes de maneira mais rápida, auto-explicativa e auxiliar na manutenção de códigos. Portanto, isso irá lhe diferenciar dos demais.

Aliado ao BEM, é necessário você aprender SASS. SASS é um pré-processador CSS que auxilia (MUITO) a escrever css. Nele é possível declarar variáveis para poupar escrita e ctrl+c ctrl+v de códigos.

Ok, SASS já meu novo amigo mas como compilo ele? Bom, você deve aprender algum Task Builder . Sugiro Gulp, pois é simples e fácil.

Depois de aprender tudo isso, você pode partir para um framework Javascript. Sim, como eu falei no início desse post, demora e a sua força de vontade pode aumentar ou diminuir esse tempo.

Importante frisar que ANTES de tentar se aventurar em frameworks JavaScript é bom você estudar, com calma, o JS puro mais conhecido como Vanilla. A partir dele, você vai começar a entender diversas funções que vão te auxiliar quando for usar um framework.

  • Então, resumindo a curva de aprendizado:
  • 1º- HTML5 / CSS3
  • 2º- Mobile-First
  • 3º- BEM
  • 4º- SASS
  • 5º- GULP
  • 6º- JAVASCRIPT
  • 7º- Frameworks JS

Mas Léo, é muita coisa!!!

Sim de fato, é muita para ser estudada e, as vezes, bate um desanimo por conta disso. Mas aqui vão algumas dicas:

  • Comece pelo básico e não tenha vergonha disso. Não é porque as pessoas estão usando frameworks que você também deve. Se você se basear nos outros você irá se desanimar. Portanto, pense no quanto evoluiu até aqui e siga firme!
  • Estude uma coisa de cada vez e evite se distrair com conteúdos que não agreguem tanto valor ao que você quer aprender.
  • Faça projetos. Por mais “toscos” que possam parecer no inicio. Fazer projetos é como trabalhar sem trabalhar e é um ótimo exercicío para melhorar suas habilidades.
  • Se você não consegue se concentrar por muito tempo em frente ao computador, existem técnicas como por exemplo Pomodoro entre outras e que são comprovadas eficazes.

Há também os adeptos de planos de estudos. Particularmente, gosto bastante pois ajuda a ter um norte. Para isso, pode-se usar o Trello e adicionar cards para cada conteúdo a ser estudado, movendo-os quando estiver terminado.

  1. Como dica de planos de estudos, sugiro:
  2. 1º – Leia a documentação do que deseja aprender.
  3. 2º – Tente montar algo a partir da documentação lida
  4. 3º – Faça alguma video-aula sobre o assunto
  5. 4º – Tente a partir da video-aula assistida, elaborar um projeto semelhante ao feito mas customizado por você

5º – NÃO DESISTA!!

Lembre-se de uma coisa: O caminho pode ser longo e desgastante mas no fim você terá um futuro brilhante!

Bons estudos !

Seja o primeiro a comentar

Faça um comentário

Seu e-mail não será publicado.


*