Codifique seu próprio site

você já quis aprender a projetar páginas da web ou criar um site online? Hoje, vamos mostrar como construir seu próprio site pessoal! Confira o vídeo tutorial para assistir Juni instrutor Maya orientá-lo através de cada passo do caminho.

continue lendo para obter mais informações sobre a importância de aprender Desenvolvimento web, um guia passo a passo para acompanhar o vídeo e aprender sobre as ferramentas que você pode usar para aprimorar ainda mais sua experiência de desenvolvimento web.

lembrar:

  • o site neste tutorial é apenas um projeto de exemplo para fins de ensino. Antes de começar, lembre-se de que os menores não devem postar informações pessoais on-line, como seu nome completo, endereço ou número de telefone! Também tenha cuidado ao enviar fotos pessoais online.
  • se você não tiver certeza do que é bom fazer o upload, verifique sempre com um adulto.

para quem é isso?

 os resultados de aprendizagem para o site pessoal do projeto de codificação HTML/CSS iniciante.
este resumo de informações do projeto e resultados de aprendizagem irá ajudá-lo a decidir se este projeto de codificação HTML/CSS é certo para você.

este projeto se enquadra na nossa classe de codificação JavaScript Nível 1 para crianças. Este tutorial HTML/CSS para iniciantes é para alunos que desejam um projeto de desafio médio, com cerca de 121 linhas de código de comprimento. Isso ajudará a ter uma compreensão básica de como HTML e CSS funcionam de antemão, mas se você for completamente novo, também explicaremos mais noções básicas neste vídeo!

este tutorial é ótimo para iniciantes em codificação, especialmente aqueles interessados em design ou arte. Recomendamos que os alunos tenham 12 anos ou mais para acompanhar.

para resultados de aprendizagem, você terá muita prática com div, listas, links, posição, exibição, texto (h1/h2/p), fontes e CSS geral. Estima-se que este projeto leve cerca de 40 minutos ou mais, dependendo de quão criativo você é, mas você deve se mover mais rápido ou mais lento no seu próprio ritmo!

Por Que Aprender Desenvolvimento Web?

hoje em dia, Você não precisa saber Desenvolvimento web ou codificação para criar um site. No final deste artigo, mostraremos alguns criadores de sites de arrastar e soltar que tornarão o processo incrivelmente fácil de fazer. Então, por que você deve aprender Desenvolvimento web? Essa é uma ótima pergunta.

personalização ilimitada

todas as ferramentas fáceis de criação de sites são realmente limitadas. Eles oferecem um conjunto de temas e plugins que são muito fáceis de usar para iniciantes – desde que você não precise modificá-los.

quando você precisa modificar um tema ou fazer algo mais personalizado com o seu site, no entanto, você precisará de pelo menos uma compreensão básica do código de desenvolvimento web. Como exemplo, com um pouco de Conhecimento Javascript, você pode integrar quase qualquer feed de mídia social em seu site!

carreiras de codificação& fundações

se você já considerou uma carreira em codificação, web design e conhecimento de desenvolvimento web também lhe dará uma grande vantagem. O desenvolvimento da Web ajuda crianças e novos programadores interessados em arte e design a explorar sua paixão, além de aprender noções básicas de codificação. Carreira à parte, também existem inúmeros benefícios de habilidade de vida para aprender codificação para crianças.

aplicável a muitos campos

por último, ser capaz de construir seu próprio site é uma habilidade valiosa na era digital de hoje. Os blogueiros querem que os desenvolvedores os tornem blogs personalizados. As empresas de Internet estão procurando desenvolvedores para construir sites de comércio eletrônico em vez de apenas postar itens na Amazon.

é uma era de ouro para design e desenvolvimento de sites, e um ótimo momento para aprender a construir seu próprio site!

vamos começar!

vamos usar HTML básico e CSS para aprender como fazer um site pessoal simples.

demonstração do projeto

Antes de começar a escrever código, veja como nosso projeto concluído funciona para referência. Assista ao vídeo para conferir todos os recursos do site do nosso projeto.

você também pode visualizar nosso código de solução de projeto se ficar preso.

o que ter em mente antes de começar:

  • há um cabeçalho de imagem com texto nele. O texto tem tamanhos diferentes e usa duas fontes diferentes. Também tem um contorno branco.
  • a seção branca abaixo tem duas partes lado a lado.
  • temos uma lista de hiperlinks, que apontam para outra página. Quando você passa o mouse sobre eles, eles mudam para azul.
  • há também uma seção sobre mim com texto.
  • abaixo disso, há uma seção de experiência com um fundo de cor diferente.

etapas para codificar o projeto

para construir nosso site, seguiremos esta ordem de etapas. Assista ao tutorial para ver como o instrutor Maya codifica cada parte e siga as explicações abaixo.

  1. adicione o cabeçalho da imagem & o texto que vai sobre ele.
  2. Crie a lista de links que você gostaria de compartilhar.
  3. Crie a seção sobre mim.
  4. Crie a seção Experiência.

Tutorial passo a passo

Passo 1: Adicione o cabeçalho da imagem & o texto que vai sobre ele.

  • crie um div com posicionamento relativo para conter a imagem e o texto.
  • crie um div para conter o texto e use o posicionamento absoluto para colocá-lo na imagem.
  • Use <h1> e <h3> para adicionar o texto.
  • use CSS para modificar a fonte do texto.
  • use CSS para remover a margem extra & preenchimento ao redor da imagem.Etapa 2: Crie a lista de links que você gostaria de compartilhar.
    • crie um div com posicionamento relativo para conter os links e a seção sobre mim.
    • adicionar preenchimento ao div.
    • crie um div com exibição de bloco embutido para conter a lista de links.
    • Use <ul> para criar uma lista.
    • Use <li> e <a> para criar os links.
    • Use <i> e um link incrível para adicionar ícones.
    • modifique o CSS para torná-lo parecido com o original.Etapa 3: Crie a seção sobre mim.
      • crie um div com exibição de bloco embutido para conter a seção sobre mim.
      • Use <h3> e <p> para adicionar texto.Etapa 4: Crie a seção Experiência.
        • crie um div com posicionamento relativo para conter a seção Experiência.
        • crie um div para a primeira experiência e use <h4> e <p> para adicionar texto.
        • adicionar mais divs experiência!

        Próximos passos

        Ótimo trabalho! Agora, Sinta-se à vontade para adicionar mais seções ao seu site. Algumas ideias podem incluir uma seção para projetos em que você trabalhou ou clubes em que está. Você também pode enviar seu novo site para a web usando as páginas Github e Github.

        Ferramentas de criação de páginas da Web

        várias pessoas usam uma ferramenta de criação de páginas da web para construir um site

        como mencionamos anteriormente, existem vários criadores de sites por aí. A maioria dos melhores criadores de sites é feita para agilizar o processo, fornecendo modelos, interfaces de arrastar e soltar e quaisquer outras funcionalidades necessárias para criar um site pessoal gratuito.

        só porque você tem uma compreensão básica do desenvolvimento web não significa que você deve esquecer essas ferramentas. Eles podem ajudá-lo a hospedar seu novo site, Encontrar um domínio personalizado (o nome e o endereço do seu site) e oferecer modelos, temas e plug-ins que acelerarão seu processo de web design.

        ao cuidar do básico, essas ferramentas oferecem a chance de concentrar suas novas habilidades de codificação na personalização perfeita do seu site! Ou-mesmo se você quiser construir tudo do zero-essas ferramentas podem lhe dar ótimas idéias sobre o que construir e como construí-lo.

        Aqui estão algumas das ferramentas mais populares para a criação de páginas da web:

        • Wix

        o Wix é um dos construtores de sites mais fáceis de usar por aí. O plano gratuito é completo o suficiente para torná-lo uma ótima opção para um garoto do construtor de site, contanto que você esteja bem com seus URL de ser um subdomínio do Wix (sitename.wixsite.com). Eles têm planos pagos com preços razoáveis, se você superar o nível gratuito.

        • WordPress

        Embora as pessoas o conhecem como um construtor de site gratuito, o que o WordPress realmente é um sistema de gerenciamento de conteúdo (CMS). Em um sentido simples, a diferença é que um construtor de sites é mais fácil de usar, mas um CMS oferece mais oportunidades de personalização. Embora o WordPress em si seja gratuito, você pode ter que pagar por alguns temas e plug-ins ou por hospedagem se quiser seu próprio nome de domínio.

        • Weebly

        Weebly é um construtor de sites, muito parecido com o Wix. A principal diferença é que o Weebly oferece muito menos personalização, tornando-o uma opção amigável que é ótima para codificação para crianças, mas com menos probabilidade de crescer com você à medida que suas habilidades de construção de sites melhoram.Continue aprendendo: Aulas de desenvolvimento Web para Criançascongratulações, agora você tem seu próprio site! Este é um passo emocionante para o qual você deve se sentir incrivelmente orgulhoso. O aprendizado também não precisa parar por aí.

        continue aprendendo: cursos de Desenvolvimento Web para crianças

        a Juni Learning oferece cursos de programação Web para crianças que lhe darão as habilidades necessárias para sobrecarregar seu novo site ou até mesmo para criar aplicativos e portfólios da web. Fora do desenvolvimento web, também ensinamos cursos de codificação para crianças de 8 a 18 anos em uma variedade de linguagens como Scratch, Python, Java, C++ e muito mais.

        Confira nossos cursos on-line para crianças ou entre em contato com nossa equipe Juni Advisors para saber qual curso é melhor para o seu aluno!

Articles

Deixe uma resposta

O seu endereço de email não será publicado.