Com o desenvolvimento de tantas linguagens de programação, estilo e marcação, aprender web design está se tornando mais complicado do que nunca. Felizmente, existem inúmeras ferramentas disponíveis para ajudá-lo a começar. Procure alguns recursos básicos, como tutoriais online ou um livro atualizado sobre web design. Quando estiver pronto para começar, comece dominando os fundamentos de HTML e CSS. Então você pode começar a explorar linguagens de design da web mais avançadas, como JavaScript!
Passos
Método 1 de 4: Encontrando Recursos de Web Design
Etapa 1. Verifique online os cursos e tutoriais de web design
A Internet está repleta de informações detalhadas sobre web design, e muitas delas estão disponíveis gratuitamente. Você pode começar fazendo alguns cursos online gratuitos na Udemy ou CodeCademy, ou ingressar em uma comunidade de programação como o freeCodeCamp. Você também pode encontrar tutoriais em vídeo de web design no YouTube.
- Se você sabe exatamente o que está procurando, tente fazer uma pesquisa usando termos específicos (por exemplo, "seletores de classe no tutorial CSS").
- Se você é um iniciante sem experiência em web design, comece aprendendo sobre o básico de codificação em HTML e CSS.
Etapa 2. Considere fazer um curso em uma faculdade ou universidade local
Se você está frequentando uma faculdade ou universidade, verifique com o departamento de ciência da computação da sua escola ou consulte o catálogo de cursos para descobrir se algum curso de web design está disponível. Se você não está na escola, verifique se alguma faculdade ou universidade perto de você oferece aulas de educação continuada em web design.
Algumas universidades oferecem aulas de web design online que estão abertas a todos que desejam se inscrever. Verifique sites como Coursera.org para encontrar aulas de web design gratuitas ou acessíveis ministradas por professores universitários
Etapa 3. Obtenha alguns livros de web design na livraria ou biblioteca
Um bom livro sobre web design pode ser uma referência inestimável enquanto você aprende e aplica sua arte. Procure livros atualizados sobre web design geral ou formatos de codificação e linguagens específicos que você gostaria de aprender.
Ler revistas e artigos de blog sobre web design também é uma boa maneira de aprender novas técnicas, obter inspiração e acompanhar as últimas tendências
Etapa 4. Baixe ou adquira algum software de design de web
Um bom software de design da web pode ajudá-lo a construir sites com mais eficiência e eficácia, e também é ótimo para ajudá-lo a aprender os prós e contras da aplicação de codificação, script e outros elementos-chave de design. Você pode se beneficiar do uso de ferramentas como:
- Programas de design gráfico, como Adobe Photoshop, GIMP ou Sketch.
- Ferramentas de construção de sites, como WordPress, Chrome DevTools ou Adobe Dreamweaver.
- Software de FTP para transferir seus arquivos finalizados para o servidor.
Etapa 5. Encontre alguns modelos de site para brincar ao começar
Não há nada de errado em usar modelos conforme você aprende o básico do web design. Faça uma pesquisa por modelos de página da web que você goste e observe o código de perto para ter uma ideia de como o designer montou a página. Você também pode experimentar alterar o código e adicionar seus próprios elementos ao modelo.
Faça uma pesquisa por modelos de sites gratuitos para começar ou experimente os modelos que vêm com seu software de design da web
Método 2 de 4: Dominar HTML
Etapa 1. Familiarize-se com as tags HTML básicas
HTML é uma linguagem de marcação simples usada para formatar os elementos básicos de um site. Você pode formatar diferentes elementos do seu site usando tags. As tags aparecem entre colchetes antes e depois de cada elemento e fornecem instruções sobre como esse elemento funcionará na página. Para fechar a tag, coloque um / na frente da tag final dentro dos colchetes angulares.
- Por exemplo, se você quiser que parte do seu texto seja negrito, você envolveria o elemento com a tag, assim: Este texto está em negrito.
- Algumas marcas comuns incluem (parágrafo), (âncora, que define o texto vinculado) e (fonte, que pode ajudar a definir vários atributos do texto, como tamanho e cor).
- Outras tags definem as diferentes partes do próprio documento HTML. Por exemplo, é usado para conter informações sobre a página que não serão visíveis para o visualizador, como palavras-chave ou uma descrição da página que aparecerá nos resultados do mecanismo de pesquisa.
Etapa 2. Aprenda a usar atributos de tag
Algumas tags precisam de informações adicionais para especificar como devem funcionar. Essas informações adicionais aparecem na tag de abertura e são chamadas de “atributo”. O nome do atributo aparece imediatamente após o nome da tag, separado por um espaço. O valor do atributo é anexado ao nome do atributo por um sinal = e entre aspas.
- Por exemplo, se você quiser fazer parte do seu texto vermelho, pode fazê-lo usando a tag e um atributo de cor de fonte apropriado, como este: Este texto é vermelho.
- Muitos dos efeitos que antes eram rotineiramente obtidos com atributos de tag HTML, como definir cores de fonte diferentes, agora são normalmente feitos com codificação CSS.
Etapa 3. Experimente elementos aninhados
O HTML também permite que você coloque elementos dentro de outros elementos para criar uma formatação mais complexa. Por exemplo, se você quiser definir um parágrafo e, em seguida, colocar em itálico parte do texto dentro do parágrafo, pode fazer assim:
Eu amo programar!
Etapa 4. Familiarize-se com os elementos vazios
Alguns elementos em HTML não precisam de tags de abertura e fechamento. Por exemplo, se você estiver inserindo uma imagem, você só precisa de uma única tag “img” contendo o nome da tag e quaisquer outros atributos necessários (como o nome do arquivo de imagem e qualquer texto alternativo que você deseja adicionar para fins de acessibilidade). Por exemplo:
Etapa 5. Explorar o layout básico de um documento HTML
Para que seu site baseado em HTML funcione corretamente, você precisa saber como formatar a página inteira. Isso envolve definir onde seu código html começa e termina, bem como usar tags para determinar quais partes do código serão exibidas e quais estão lá para fornecer informações de fundo ocultas. Por exemplo:
- Use a tag para definir sua página como um documento HTML.
- Em seguida, contenha sua página inteira dentro das tags para definir onde seu código começa e termina.
- Coloque todas as informações que não serão exibidas para o visualizador, como o título da página, palavras-chave e a descrição da página, dentro das tags.
- Defina o corpo da sua página (ou seja, qualquer texto e imagens que você deseja que o visualizador veja) com as tags.
Método 3 de 4: familiarizando-se com CSS
Etapa 1. Use CSS para aplicar estilos aos seus documentos HTML
CSS é uma linguagem de folha de estilo que permite aplicar diferentes estilos e elementos de design à sua página da web. Por exemplo, se você deseja aplicar seletivamente uma fonte ou cor de texto específica a alguns dos elementos de texto em sua página, pode criar um arquivo CSS para fazer isso. Em seguida, você pode inserir o arquivo CSS em seu documento HTML onde quiser.
-
Por exemplo, se você quiser que um arquivo CSS torne todos os elementos de parágrafo em seu documento HTML verdes, poderá criar um arquivo.css contendo as linhas:
- p {
- cor verde;
- }
- Em seguida, você salvaria o arquivo com um nome como style.css.
- Para aplicar a folha de estilo ao seu documento HTML, você deve inseri-la como um elemento de link vazio dentro das tags. Por exemplo:
Etapa 2. Familiarize-se com os elementos de um conjunto de regras CSS
Uma parte individual do código CSS é chamada de "conjunto de regras". O conjunto de regras contém os diferentes elementos que definem o que você deseja que seu código faça. Esses incluem:
- O seletor, que define o elemento HTML que você deseja estilizar. Por exemplo, se você deseja que seu conjunto de regras afete os elementos do parágrafo, você deve iniciar seu conjunto de regras com a letra “p”.
- A declaração, que define as propriedades que você gostaria de estilizar (como a cor da fonte). A declaração está contida entre chaves {}.
- A propriedade, que especifica qual propriedade do elemento HTML você deseja estilizar. Por exemplo, dentro da tag, você pode especificar que deseja estilizar a cor do texto.
- O valor da propriedade define especificamente como você deseja alterar a propriedade (por exemplo, se a propriedade for a cor da fonte, o valor da propriedade seria “verde”).
- Você pode modificar várias propriedades diferentes em uma única declaração.
Etapa 3. Aplique CSS ao seu texto para fazer com que sua composição tenha uma boa aparência
CSS é útil para aplicar uma variedade de efeitos ao seu texto sem ter que codificar individualmente cada propriedade em HTML. Experimente alterar diferentes propriedades de composição em CSS, incluindo:
- Cor da fonte
- Tamanho da fonte
- Família de fontes (por exemplo, a gama de fontes que você deseja usar em seu texto)
- Alinhamento de texto
- Altura da linha
- Espaçamento entre letras
Etapa 4. Experimente caixas e outras ferramentas de layout CSS
CSS também é útil para adicionar elementos visuais atraentes à sua página, como caixas de texto e tabelas. Além disso, você pode usá-lo para alterar o layout geral de sua página e definir onde os diferentes elementos são posicionados em relação uns aos outros.
Por exemplo, você pode definir atributos como largura e cor de fundo de um elemento, adicionar uma borda ou definir margens que criarão espaço entre os vários elementos em sua página
Método 4 de 4: trabalhando com outras linguagens de design
Etapa 1. Aprenda JavaScript se quiser adicionar elementos interativos às suas páginas
JavaScript é uma ótima linguagem para aprender se você estiver interessado em adicionar mais recursos avançados aos seus sites, como animações e pop-ups. Faça um curso ou procure tutoriais online sobre como codificar em JavaScript e incorporar esses elementos codificados em suas páginas da web | usando HTML.
Antes de se familiarizar com o JavaScript, você precisará se familiarizar com os fundamentos da construção de páginas em HTML e CSS
Etapa 2. Familiarize-se com jQuery para facilitar a codificação em JavaScript
jQuery é uma biblioteca JavaScript que pode simplificar a programação Java, permitindo que você acesse uma variedade de elementos JavaScript pré-codificados. jQuery é uma ótima ferramenta se você já estiver familiarizado com os fundamentos da codificação JavaScript.
Você pode acessar a biblioteca jQuery e muitos outros recursos valiosos por meio do jQuery.org, o site da jQuery Foundation
Etapa 3. Estude linguagens do lado do servidor se você estiver interessado no desenvolvimento de back-end
Embora HTML, CSS e JavaScript sejam ideais para web designers que se concentram no que o usuário vê e faz no site, as linguagens do lado do servidor são úteis se você estiver mais interessado no trabalho de bastidores. Se você quiser aprender sobre desenvolvimento de back-end, concentre-se em aprender linguagens como Python, PHP e Ruby on Rails.
Essas linguagens são úteis para gerenciar e processar dados que o usuário não vê. Por exemplo, o PHP pode ser usado para construir ferramentas seguras de criação de senha em sites que requerem um login
Arquivos de ajuda
Folha de referências em HTML
Folha de referências de CSS
