Dicas Úteis

Tutoriais em HTML e CSS

Pin
Send
Share
Send
Send


Na verdade, se você quiser aprender e começar a usar HTML e CSS, poderá fazê-lo em um dia ou dois. É preciso apenas abordar com competência o processo de aprendizagem e escolher a fonte correta de informações.

Neste artigo, gostaria de dar alguns conselhos àqueles que decidiram reabastecer seus conhecimentos e ultrapassar o limite do desenvolvimento de sites visuais e olhar pelo menos um pouco para entender o que e como funciona.

Sim WordPress nos agrada e nos permite criar projetos simples sem o conhecimento de linguagens de programação.

Embora as linguagens HTML e CSS dificilmente possam ser chamadas de programáticas, elas provavelmente são linguagens de marcação hipertextuais, mas, no entanto, elas são subjacentes a tudo o que vemos na Internet.

Não vou te agitar para comprar este ou aquele super-curso ou treino. Não, darei algumas dicas sobre como aprender melhor HTML e CSS e como alcançar resultados.

Além disso, neste artigo vou abrir uma nova seção no Info-m em que vou publicar a utilidade do layout, design e outros recursos.

Então vamos lá, por onde começar?

1. Eu acho que você deve primeiro instalar um editor conveniente e confortável para o código. Um dos líderes no momento é o código VSC ou Visual Studio da Microsoft.

Eu recomendo baixar o editor de. site e aqui está o link de download.

Como instalar o idioma desejado, acho que você vai encontrar instruções sobre a rede, há mais do que suficiente deles. O VSC é flexível e extensível. Milhares de extensões já foram escritas. Mas acho que você terá uma versão em caixa no começo.

Para aqueles que querem se desculpar para personalizar o editor, aqui está o vídeo, não é meu, mas tenho preguiça de fotografar e Alexey (o autor do vídeo) explicou muito bem e mostrou ser muito legal.

A partir deste post, decidi que vale a pena publicar vídeos de outras pessoas no meu site, especialmente se forem vídeos de alta qualidade feitos por profissionais.

1. Academia de HTML

Um recurso legal para quem começa do zero.

Registre-se gratuitamente e em um formulário de jogo interativo, faça o primeiro curso, depois mais difícil e assim por diante. Os cursos são na maioria gratuitos, há uma verificação de tarefa interativa. Em geral, recomendo o início para iniciantes.

Uma vez eu pensei em conseguir uma conta para manter meus assinantes, mas como de costume não há tempo suficiente))

HTML, CSS para iniciantes do zero e além.

Lembre-se, nos últimos artigos eu já disse que em breve vou falar sobre todos os recursos, sites, serviços, cursos que considero úteis e eficazes para aprender HTML e CSS? Chegou a hora, hoje direi o que usei e onde continuo a fazer no momento atual.

O que vou falar é verificado na minha experiência pessoal e garanto a qualidade. Se você usar minhas recomendações, o tempo gasto não passará em vão.

Vou supor que, pelo menos em termos gerais, você sabe o que são HTML e CSS, o que você pode fazer com eles e por que você precisa de tudo isso. A eficácia de minhas recomendações e seu treinamento dependerá de quão bem você já domina essas disciplinas, quais metas você definiu para si mesmo e que nível de habilidade você planeja alcançar.

Neste artigo, vou me concentrar em iniciantes, naqueles que estão apenas dando seus primeiros passos no aprendizado de HTML e CSS, é para eles que meu conselho será mais relevante. Depois de passar por esses estágios, você definitivamente entenderá se está interessado em continuar estudando e melhorando suas habilidades. Se assim for, continue praticando e compreendendo todas as sutilezas e novas oportunidades.

Eu mesmo estou neste estágio, gradualmente passo em cursos e lições avançadas, estudo as possibilidades do HTML5 e do CSS3. Ao mesmo tempo, tenho grande prazer com as aulas, bem como com a sensação de flexibilidade, grandes oportunidades e novas ideias que nascem neste processo fascinante.

2. cursos de vídeo.

No começo eu queria postar uma lista inteira de peças gratuitas, mas infelizmente quase todas elas estão desatualizadas e os autores não se incomodam em atualizar. Sim, muita coisa mudou com a transição para o HTML5.

Portanto, eu recomendo até agora apenas um que vale a pena passar e obter as primeiras habilidades.

O curso de Mikhail Rusakov é bastante informativo e que ele é bom em lição de casa.

Curso Livre de HTML e CSS

Mais de 6 horas de aulas + exercícios

Eu até planejei postar todas as lições deste curso no meu site com a análise do DZ, se você estiver interessado, escreva nos comentários.

Minha maneira de aprender HTML e CSS

Meu primeiro contato com HTML e CSS aconteceu nos primeiros cursos do instituto (embora eu tenha me envolvido em programação muito antes), então percebi pelo que cada um deles era responsável. Naquela época, era costume usar ativamente os estilos internos e construir uma grade de páginas usando tabelas. Apenas alguns mudaram para os divs, sobre os quais eu não sabia nada e não atribuíam importância a esses pontos.

Tendo resolvido alguns pontos básicos, vivi com esse conhecimento inferior e ultrapassado por muito tempo. Eu tentei criar minhas próprias páginas, para prescrever estilos para elas. Mais recentemente, reformulei o modelo desse blog, e como resultado, o design também mudou.

E então, cavando o código por muitos dias, percebi o quão limitado e insuficiente meu conhecimento era. É como uma estrutura invisível na qual você se coloca e vive neles, se acostumando com esse estado de coisas. Não houve liberdade na implementação de ideias e pensamentos criativos.

Havia perguntas intermináveis: "como fazer isso e não estragar tudo o resto?" Isso eu decidi. Não me lembro de meus pensamentos se demorando nessas perguntas por um longo tempo: "É correto fazer isso nesta situação e não estou inventando uma segunda bicicleta com minhas mãos ineptas?"

Chegou a hora em que esse estado de coisas deixou de ser adequado para mim e finalmente decidi assumir o controle da situação. No final do ano, essa ideia apareceu nas páginas de um artigo sobre planos para o próximo ano. Mas agora esses planos estão sendo implementados, e só posso pensar: "o que me incomodou e por que não fiz isso antes?" Isso é semelhante a como recentemente dominei a habilidade de digitar no teclado com todos os dez dedos e agora consigo consertar pensamentos na forma de sentenças.

Treinamentos online!

Talvez um dos métodos de ensino mais produtivos. Código excelente, você primeiro assiste ao vídeo, então eles te dão uma tarefa e depois também conferem.

Eu darei links para dois, um livre e o segundo por uma taxa nominal, mas com mentores legais.

Eu não participo de programas afiliados desses recursos, simplesmente os recomendo como boas fontes de conhecimento.

Um curso bastante informativo, começamos a estudar do zero e antes de colocar o site HTML na hospedagem. Há respostas DZ simples nas quais você postou nos comentários das lições e Artem as verifica.

É claro que há atrasos na verificação, mas você precisa entender que o projeto é gratuito e que Artem não pode se sentar e “pastar” todos os comentários.

No entanto, o curso é bastante volumoso, com 55 vídeos, então há algo para se trabalhar.

O segundo treinamento que eu quero recomendar é o Layout da Web. Como começar por wayup.in

É pago, custa, na minha opinião, US $ 9. Mas esse dinheiro você paga pela ajuda de um mentor que verifica seu TK e o leva.

No total, estou ciente de 7 lições volumosas, mas ao final do treinamento você será capaz de escrever seu primeiro website em HTML puro com CSS e até mesmo entender como os comandos simples funcionam em JS.

Eu dou um link, não é um afiliado, o Wayup ainda está "devorando" e não conectará um programa de afiliados.

Mas o curso é muito bom e funciona, então recomendo com segurança para iniciantes.

Isso é provavelmente tudo que eu queria te contar hoje.

No final, mais algumas dicas sobre a melhor forma de aprender e o que fazer a seguir.

  1. Não desanime se você não entender nada desde o início, tente escrever código e ver o resultado no navegador
  2. Não tente aprender e entender tudo em 1 hora. Você pode aprender tags HTML, mas precisa mexer no CSS.
  3. Pratique mais. Pegue, crie um documento HTML limpo e comece a criar a estrutura da primeira página.
  4. Crie uma pasta de marcadores no seu navegador e coloque dicas e truques úteis que você encontra na rede
  5. O que não está claro, pergunte, eu ficarei feliz em lhe dizer.

Estágios de aprendizado de HTML e CSS

É mais conveniente dividir todo o processo em etapas:

  • Apresentando o HTML e aprendendo o básico
  • Apresentando CSS e conceitos básicos
  • Nível avançado. Aprendendo HTML5 e CSS3

É bem conhecido e todos nós repetidamente verificamos que a repetição é necessária para lembrar. Mas para que o processo não seja chato, não repetiremos a mesma coisa muitas vezes. Em vez disso, nos voltaremos para diferentes fontes em cada estágio, expandindo assim nosso conhecimento e compreensão.

E mesmo que em algum lugar um dos momentos não pareça totalmente claro, em outro lugar você fechará todas as manchas brancas, se sentirá confiante e será capaz de seguir em frente facilmente.

Aderindo a este plano, você gradualmente se familiarizará com as tecnologias, facilmente se lembrará de tudo na prática, como resultado você se tornará especialistas fortes em HTML e CSS, conhecerá as novas tecnologias HTML5, CSS3, bem como as melhores e mais modernas abordagens de layout de página.

Melhores tutoriais de HTML e CSS

E aqui estão os recursos em si, aos quais vou me referir e que eu desejo usar ativamente:

  • Cursos de Evgeny Popov
  • Curso Codecademy, HTML e CSS. Nós usaremos apenas as lições. Testes e Projetos são pagos, podemos fazer sem eles.
  • Academia de HTML. Você pode usar meu código de afiliado 1115104d039 para obter um bom desconto em cursos avançados.

Devemos mencionar também a Escola de Código, onde a qualidade do material é alta, mas é paga e só será conveniente para quem conhece bem o inglês.

Talvez eu também mencione o diretório htmlbook.ru, que você encontrará no futuro, usando um mecanismo de pesquisa.

Não é por acaso que os cursos de E. Popov vêm em primeiro lugar. Essa pessoa será seu guia nos estágios iniciais.

Eu recomendo Codecademy para fixar. Aqui as tarefas estão em inglês, mas são bem simples e não devem causar complicações.

Considero a HTML Academy como a escola mais forte e mais séria de recursos de língua russa, é lá que eu faço cursos avançados que estão disponíveis apenas por assinatura, mas não são caros (300 rublos por mês) comparados à Code School (o preço é de 20 a 30 dólares, dependendo das ações detidas). Usando meu código de afiliado na HTML Academy - 1115104d039, você obtém um desconto na sua assinatura.

Entraremos em contato com a HTML Academy todas as vezes após os cursos de Popov e Codecademy, isso permitirá que você se sinta mais calmo e mais confiante ao resolver problemas, alguns dos quais são muito sérios. Afinal, nem todo mundo tem nervos de ferro.

Plano de Aprendizagem para Fácil Masterização de HTML e CSS

Eu sugiro que você siga esse plano. Eu mesmo fiz isso, gostei do resultado e do próprio processo de aprendizagem.

  1. Curso de HTML de E. Popov. O que você aprendeu lá e como consegui-lo, veja meu artigo.
  2. Curso Codecademy, HTML e CSS. Unidade 1, Unidade 2, Unidade 3
  3. HTML Academy, os primeiros seis cursos antes do curso "Conheça o CSS", mais tarde
  4. Curso de CSS de Popov. Veja detalhes no meu artigo.
  5. Curso Codecademy, HTML e CSS. Unidade 4, Unidade 5, Unidade 6. Neste ponto, vamos terminar de usar o Codecademy.
  6. HTML Academy, Começando no curso de Conhecimento com CSS de 5 anos, terminando com o curso de Digitação de Texto CSS
  7. Curso: Pratique HTML5 e CSS3
  8. HTML Academy, todos os cursos restantes do nível básico, começando com o "modelo de bloco do documento" e terminando com o curso "Testes de acabamento". Pode parecer a alguns que o curso de layout de Popov deve ser seguido após a HTML Academy (ou seja, trocar as duas últimas etapas). Este ponto de vista também é digno de respeito, mas parece-me que você será mais responsável em fazer cursos na HTML Academy depois de terminar as páginas propostas por Eugene, e será lembrado cada vez melhor.
  9. Nível avançado. Nós só temos a escola da Academia de HTML, onde precisamos passar por níveis adicionais por assinatura. Não se esqueça do meu código de afiliado, que mencionei acima. Aprenda cursos avançados e pré-processadores. No momento da redação deste artigo, estou no curso de gradientes lineares. Eu pretendo levar todos esses cursos até o fim.

Aqui está um plano de trabalho para aqueles que querem aprender a entender bem HTML e CSS. Pode parecer que tudo isso é muito longo e difícil. O medo, como você sabe, tem olhos grandes. Tudo começa com o primeiro passo. Se você não é preguiçoso e trabalha diligentemente em seu tempo livre, então a lista será encurtada.

Sem dúvida, não falei sobre outros recursos que também podem ser úteis. Se você conhece essas informações, não necessariamente apenas em HTML e CSS, fale sobre elas! Será ótimo se você deixar as informações nos comentários.

Cursos em HTML5 e CSS3, layout moderno e web design

Eu decidi falar sobre vários outros cursos sobre HTML e CSS, bem como sobre tópicos de diagramação moderna, web design e desenvolvimento de sites. Meu plano de treinamento para HTML e CSS, que eu propus acima, é testado e dá excelentes resultados. Mas, talvez, seja inconveniente para alguém pular para diferentes fontes, quero que tudo esteja em um só lugar. Nesse caso, envolver-se em cursos de autores profissionais com lições detalhadas sobre as quais falarei será mais agradável e ainda mais eficaz.
Abaixo eu vou te dar uma lista de cursos de treinamento, e você mesmo verá quem gosta.

  • Noções básicas de layout adaptativo em HTML5 e CSS3
  • HTML5 e CSS3 do Scratch to Pro
  • Prática de layout do site para dispositivos móveis
  • Web design: um curso prático na criação de uma landing page
  • Web designer é um profissional. Crie layouts populares
  • Tendências de Desenvolvimento Web
  • Tudo sobre como criar sites
  • Plano de criação de site passo a passo
  • JavaScript e jQuery do zero para os profissionais
  • Segredos do SEO Prático
  • PHP moderno: trabalhe com o VKontakte
  • Aprenda a criar páginas de assinatura e vendas bonitas e modernas.
  • Escola de blogs

Eu acho que uma seleção tão grande que você não vai encontrar em nenhum outro lugar. Eu mesmo os colecionei por um longo tempo, o que torna ainda mais agradável para mim compartilhá-los com você. Melhor marcar a página para que você não se arrependa mais tarde.

Mais um minuto. Eu pensei, e se o tópico de ganhar dinheiro na Internet também lhe interessar.

Você sabe que há muito trabalho remoto relacionado a HTML e CSS? Hoje, muitos trabalham através da Internet e viajam pelo mundo! Quais são as profissões online mais procuradas? Quanto tempo leva para aprender? Aprenda com o livro

Obrigado pela sua atenção, espero que o artigo seja útil. Expresse seus pensamentos, compartilhe suas impressões! Tudo isso é bem vindo.

Primeiro estágio

Deve ser entendido que HTML e CSS não são linguagens de programação, mas uma linguagem de marcação e folhas de estilo em cascata, respectivamente. Em outras palavras, com essas linguagens, você especifica o layout dos elementos (títulos, parágrafos, links etc.) e os cria um estilo. Também é muito importante lembrar que sem uma boa base teórica você não pode começar a praticar.

Estágio Quatro:

Depois de ter dominado todo o material HTML / CSS, comece. Quanto mais prática, melhor. Aqui você vai precisar de um editor de texto, layouts do PSD e, como escrevi acima, paciência e perseverança. Você pode usar qualquer editor de texto que desejar. Eu destacarei estes:

  • Texto sublime
  • Átomo
  • Código do Visual Studio

Você pode encontrar facilmente layouts PSD gratuitos no Google.

Estágio Cinco:

E finalmente, alguns recursos mais úteis:

E algumas recomendações: quanto mais prática você tiver, mais rápido você aprenderá todas as armadilhas e apenas vencerá sua mão. Faça o download de layouts e diagramas PSD, layout e diagramação novamente. Acredite, todo mundo tem um momento assim: "nada acontece, eu vou desistir de tudo e fazer outra coisa", mas não ceda a isso, leve-o até o fim. O mundo do desenvolvimento web é muito amplo e o layout é apenas o começo.

Desenvolvedor front-end no N-iX,
Professor na Hillel Computer School.

Assista ao vídeo: Curso de HTML e CSS para iniciantes - Aula 1 (Dezembro 2020).

Pin
Send
Share
Send
Send