Qual é a melhor maneira para um iniciante aprender HTML/CSS?

No 4º trimestre de 2013, depois de muito fascínio pela web e por jogar com o Photoshop para fazer layouts, percebi que tinha de aprender HTML e CSS se quisesse dar vida aos meus designs. Acontece que levou 1 dia(5-6 horas) para aprender o básico e mais 2 dias para poder trabalhar ao meu redor. Isto é para mostrar como é fácil aprender HTML e CSS. No entanto, há mais e eu'discutirei isso mais tarde.

Quando comecei, olhei para a W3schools e não'não gostei do estilo. Então eu procurei mais e encontrei um tutorial legal do site HTML5 Tutorial | HTML 5 Tutorial.
Eu aprendi a partir daí.

Antes de começar, você vai precisar de algumas ferramentas:
1. Um editor de texto. Você pode usar o que vem pré-carregado no seu computador. No Windows it's Notepad ou Wordpad, no Ubuntu it's gedit e eu acho que o Mac tem TextMate. Eu pessoalmente uso o Sublime Text porque ele's é muito legal nos meus olhos. Você pode usar o Notepad++ ou Dreamweaver(que é um pago) ou qualquer coisa que lhe convier. Há uma miríade de editores de texto online. Eu acho que a maioria das pessoas usa os que eu'mencionei aqui.

2. Um web browser (I'nem tenho a certeza se havia algum sentido em colocar isso aqui haha). Bem, no início, it'não vai realmente importar, mas à medida que você progredir, você precisará ter diferentes navegadores para testar sua saída. Você vai perceber logo que você tem que instalar o Chrome, Firefox, Safari, Opera, IE, Edge ou w.e browser para poder ver se a sua página é compatível com cross-browser. Claro que até lá você vai perceber que pode usar frameworks para resolver este problema.

Okay, agora I'lhe dará algumas dicas. Como mencionado acima, eu aprendi muito rápido e você também pode. O truque é que você precisa escrever código enquanto aprende. Algumas pessoas podem argumentar que preferem ler um pedaço inteiro, então comece a escrever código e volte se eles não't se lembram. Isto não'não funciona para mim. Eu acredito que praticar enquanto você lê é a melhor maneira de obter a informação dentro da sua cabeça :)

Do link que eu postei acima, você verá que os tutoriais são muito fáceis de ler e fornecer-lhe com trechos de código simples que você precisa digitar e ver a saída do seu navegador. Então, comece com o básico, certifique-se de entender o que's está acontecendo e trabalhe seu caminho para cima. HTML é basicamente entender como funcionam as tags e os aninhamentos. I'tenho quase certeza que você aprendeu o básico na escola primária. Basicamente, HTML é como conjuntos e subconjuntos. Você simplesmente precisa saber visualizar como funciona o aninhamento. Uma vez que você pode facilmente ver o nesting, você'está pronto para ir :)

Eu aprendi CSS básico no W3schools. Foi fácil de testar o CSS lá. Há definitivamente mais recursos CSS e tutoriais online para você aprender, então sugiro que encontre o que funciona com você. Para CS, você só precisa entender 2 coisas como um iniciante:
1. id
2. class

O id é usado para estilizar uma coisa enquanto a classe é usada para estilizar muitas coisas diferentes. Let's tome um exemplo. Se você tem uma seção principal e uma seção de comentários, você gostaria de ter 2 ids diferentes para cada seção para que você possa dar estilo a elas. Agora você pode ter textos diferentes na sua página. Alguns poderiam ser usados na seção de comentários, outros poderiam ser usados em outro lugar. Se você quiser ter o mesmo estilo de fonte para o mesmo texto em lugares diferentes, então você usa a classe.
Então simplesmente pense no id como seu ID. Você só pode ter 1 número de identificação e não 2 diferentes. Pense na classe como se fosse o seu cartão de crédito. Você pode ter vários cartões de crédito que você usa para comprar o mesmo material. Isso deve cobrir o básico do CSS. Agora você só tem que aplicar o styling.

Após você ter uma compreensão do básico, é's tempo de construir algo que valha a pena. No meu caso eu tinha um design que fiz no Photoshop e eu realmente queria convertê-lo para uma página HTML real, então eu fiz isso. Esta é a parte onde você aprende mais, porque isso's quando você vai perceber que você pode't fazer alguma coisa e você tem que pesquisar no Google uma solução. Isso's é completamente bom. That's como você aprende. Você'vai usar muito o Stackoverflow e vai perceber que a maioria das suas perguntas já foram respondidas com uma solução. Então é assim que você'é como você fica melhor nisso.

Após conseguir construir uma página decente, pode começar a olhar para Web Design Inspiration websites que mostram alguns websites incrivelmente bem desenhados e pode aprender a partir daí também. Veja como eles fazem isso e tente fazer algo similar (apenas para fins educacionais). Note que é antiético copiar o trabalho de outra pessoa e rotulá-lo como seu).

Acho que se você colocar 4-5 horas por dia durante uma semana, você deve ser bom com o básico de HTML e CSS e ser capaz de fazer algumas páginas legais a partir do zero. Após alguma boa prática de quantidade e fazer diferentes tipos de sites, você perceberá que às vezes sua página fica perfeita em um navegador e não em outro navegador. Isso'está bem. É aqui que você vai começar a procurar compatibilidades entre navegadores e frameworks como o Bootstrap, por exemplo. NÃO, eu repito, NÃO aprenda Bootstrap primeiro. Muitas pessoas cometem este erro. Eu acredito que você deve ter uma compreensão de Deus da base e depois passar para frameworks. Sua vida vai ser muito mais fácil.

Mas então, HTML e CSS não são realmente suficientes. Às vezes você vai perceber que você quer alcançar algo e isso pode'não pode ser feito usando apenas HTML e CSS. Por exemplo, você quer esfriar os efeitos. Então eu sugiro aprender Javascript assim que você sentir que tem uma boa base com HTML e CSS. E depois você pode ir para o back-end com uma linguagem como PHP ou Ruby. Ambas são lanaguages muito comuns usadas hoje em dia. À medida que você vai ficando cada vez mais avançado olhar em coisas como Node.js ou Angular.

I guess that's all.

Good luck on your learning path. :)