Clicky

Ir para conteúdo

Joao Vitor

[Tutorial] Como criar um Layout Responsivo.

Posts Recomendados

Olá!
 
Aproveitando minha volta ao Portal do Host, gostaria de salientar que estou voltando com os meus trabalhos com desenvolvimento front-end e quero voltar a ajudar a comunidade. Espero que não se incomodem com a minha presença. ^-^
Bom, hoje quero começar um tutorial para desenvolvermos juntos um layout responsivo para empresas de hosting. Posso contar com vocês?
 
Então vamos lá!
 
1º Organizando os arquivos e definindo tags principais.
 
Primeiro vamos criar a pasta do projeto (aqui eu defini a pasta como PDH) e em seguida crie uma sub-pasta chamada bibliotecas. Após, crie as pastas imagens e js dentro da pasta bibliotecas
Posteriormente crie os arquivos index.html estilos.css dentro da pasta do projeto.
 
Agora "chame" esses arquivos para o index.html. Como não temos mais que o estilo.css disponível, vamos chamar somente ele. Após a tag <title></title>, coloque o seguinte código:




[color=#808080]<link rel="stylesheet" href="estilo.css" type="text/css">
[/color]

Agora vamos chamar o Bootstrap, um mega framework que vai nos auxiliar com os resultados em responsive. Insira esses códigos acima do código que acabamos de inserir:




[color=#808080]<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
[/color]

Entre as tags <title></title> você vai definir o título da página correspondente ao seu projeto. O bootstrap permite que você adicione vários elementos como slides, menus de navegação e mais um monte de coisas.
Caso tenha feito tudo de acordo com post, o resultado no código será este:



d8iruX.jpg

 

 
2º Definindo estrutura e cores básicas.
 
Agora vamos definir uma parte importante do layout, o que vai chamar atenção do cliente assim que ele bater os olhos no site. Aqui vai do gosto de cada um, eu já defini minhas cores aqui e então vamos criar um *.css de base somente dedicado a essas cores. Lembrando que esse *.css de base está sujeito a modificações.
 
O resultado aqui é este:
 

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,800,700);
* {margin:0;padding:0;text-decoration:none;list-style:none}
body {border-top:5px solid #da3610;background:#fafafa;font:normal 13px 'Open Sans', sans-serif }
a {color:#da3610}
a:hover {color:#666564}

Obs: acabei importando uma fonte do Google Fonts para termos uma melhor tipografia. Caso queira escolher outra fonte, basta ir ao Google Fonts e escolher a que melhor se adequada ao seu gosto.
 
O resultado até agora foi este:
 

eCws2X.png

Bom pessoal...

 

Essa foi só uma introdução bem básica sobre o tutorial. Em breve publico a segunda parte, já que ainda tenho que escrever a mesma. Espero que gostem disso e que possam contribuir com recursos para podermos desenvolver um template bonito.

 

Inté!.

  • Gostei! 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Meus parabéns, um excelente tutorial, esperava por algo assim a algum tempo. Ficarei aguardando a segunda parte!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Participe da conversa

Você pode postar agora e se cadastrar mais tarde. Se você tem uma conta, faça o login para postar com sua conta.

Visitante
Responder

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emojis são permitidos.

×   Seu link foi automaticamente incorporado.   Mostrar como link

×   Seu conteúdo anterior foi restaurado.   Limpar o editor

×   Não é possível colar imagens diretamente. Carregar ou inserir imagens do URL.


  • Quem Está Navegando   0 membros estão online

    Nenhum usuário registrado visualizando esta página.



×
×
  • Criar Novo...