[Tutorial] Como criar um Layout Responsivo.

[Joao Vitor]

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 e 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:

 

 
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:
 

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é!.

[Joao Vitor]

Parte 2:

Parte 3:

Editado Julho 17, 2015 por Joao Vitor Fernish

[tekobr]

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