Estoy emocionado de compartir este curso de cuatro horas sobre HTML y CSS con usted (<- enlace al curso).
Si tiene curiosidad por el desarrollo web, pero no sabe por dónde empezar, ¡este es el curso perfecto para usted!
No hay absolutamente ningún requisito previo para ello, ¡y ni siquiera necesita instalar un editor de código! Scrimba te cubrirá allí.
El instructor del curso es el brillante Kevin Powell. Es un gran fanático de CSS, un instructor de YouTube muy popular y también enseña HTML y CSS en las aulas. En otras palabras, estás en buenas manos.
Durante el curso, aprenderá los conceptos básicos de HTML y CSS y comenzará a crear sus primeras páginas web. Todas las lecciones serán prácticas y comenzarán a escribir código real de inmediato.
Una vez que haya completado este curso y esté listo para más desafíos, también puede consultar el bootcamp de diseño web receptivo de Kevin. Es un curso masivo de 15 horas que le enseña CSS avanzado y cómo crear sitios web receptivos a nivel profesional.
Pero por ahora, echemos un vistazo más de cerca a las lecciones del curso de introducción.
1. Introducción
En la primera lección, Kevin ofrece una pequeña introducción a lo que puede esperar del curso y algunos consejos para aprender todo lo que pueda de él.
2. ¿Qué son HTML y CSS?
En el segundo elenco, Kevin nos presenta HTML y CSS, qué significan estas siglas y cómo HTML y CSS están estrechamente entrelazados.
3. Terminología y sintaxis básicas
Kevin usa un libro como ejemplo de cómo funciona el marcado HTML e introduce conceptos como elementsy tags, y cómo usarlos.
4. ¡Escribamos algo de HTML!
En este screencast, Kevin presenta para que el navegador sepa que el contenido es HTML y escribimos nuestra primera página web HTML y aprendemos algunos elementos fundamentales en el camino.
My first website My very first webpage
Websites are built with HTML
HTML is a markup language that tells the browser what everything is
They also use CSS
I can't wait to start learning CSS!
5. strongyemphasis
Podemos usar para agregar énfasis a nuestro texto y agregar importancia .
6. Denominación y organización de archivos
En esta parte, Kevin nos enseña algunas buenas prácticas en torno a la denominación de archivos y da buenos consejos sobre cómo organizar nuestros archivos.
7. Anclajes y atributos
Podemos usar el elemento de anclaje para enlazar a una ubicación diferente en la misma página oa otra página. Para decir dónde enlazar, usamos attributes, y para anclajes, es href.
Link to Scrimba 8. Introducción a CSS
Kevin nos presenta la sintaxis CSS y la noción de propiedades y valores en CSS. Cómo mediante la property: valuesintaxis podemos diseñar nuestras páginas web e introducir estilos en línea para que los elementos individuales se vean bien en la página.
9. Conceptos básicos de CSS
En este video, aprenderemos sobre el tamaño de fuente, los colores, los colores de fondo y la alineación del texto. Kevin nos introducirá en cuatro formas diferentes de la especificación de colores en el CSS, utilizando palabras clave, hex, rgby hslvalores.
10. ¡Tiempo de práctica!
Bien, es hora de practicar individualmente. Kevin nos asigna la tarea de crear una página sobre nosotros mismos y nos plantea algunos desafíos de HTML / CSS en el camino.
11. Recapitulando hasta este punto
En este elenco, repasaremos rápidamente todo lo que hemos aprendido sobre HTML y CSS hasta este punto. ¡La repetición es la madre del aprendizaje!
12. Listas
Now, Kevin shows us how to create lists in HTML using
-
for ordered lists and
- List item one
- a second list item
- bullet point
- another bullet
13. Images
Images are self-closing and both src and alt attributes and how alt helps improve accessibility.
14. Practice time!
Alright, time for our second practice screencast. Kevin sets us a challenge to convert some markdown files to HTML/CSS webpage. No worries if you're not sure what markdown is because in this practice session Kevin will walk us through the completion of the task.
15. Internal CSS
In this chapter, Kevin introduces internal CSS, an alternative to writing inline CSS.
Internal CSS is written in the same file as HTML, but within a separate tag
All about Earth and Mars h1 { font-size: 60px; } p { font-size: 24px; color: steelblue; } Earth and Mars
Earth and Mars are two planets within our solar system.
16. External CSS
External CSS is another approach to managing CSS. This time Kevin shows us how we can extract CSS into a separate file and how to link CSS stylesheets to our HTML files with a tag
17. Classes and IDs
In this screencast, Kevin focuses on three types of selectors in CSS and when you might want to use which.
/* Element selector */ a { color: darksalmon; } /* Class selector */ .intro { font-size: 24px; } /* ID selector */ #earth-title { color: lightgreen; } 18. Comments in HTML and CSS
We can add comments in HTML:
Comments! Comments!
And in CSS:
/* TODO: change the color of the text to white */ body { background: #333; color: white; } /* Some more comments */ h1 { color: red; } 19. The only tags you need to know (for now)
In this part of the course, Kevin reminds us that we don't need to know everything at this point and at this stage we really need to know only the following tags:
h1 -> h6 p strong and em a ul, ol, li img And it would be good if we can tell the difference between the following tags:
header main section footer nav div 20. Intro to the box model
It's now time to discover the box model.
Most elements are block elements, which means they are 100% width of their parent and have a height of 0.
This is a brilliant cast, where Kevin not just simply and succinctly explains how the box model works, but also saves us from the common pitfalls that even experienced developers fall into from time to time.
21. Margin and Padding
Up next are margins and paddings.
Margins are used to control the position of an element relative to those around it, while padding is used to control the positioning of content inside our element.
Kevin does a great job explaining many different ways padding and margins can be set in CSS.
/* */ padding-top: 20px; padding-right: 30px; padding-bottom: 40px; padding-left: 50px; /* Shorthand version would be */ padding: 20px 30px 40px 50px; margin-top: 500px; margin-left: 100px; margin-right: 100px; margin-bottom: 10px; /* Shorthand version would be */ margin: 500px 100px 10px; 22. Borders
The last piece in the box model - borders. Borders are added around your elements. And they can be set in a similar way to margins and padding.
border-color: yellow; border-width: 20px; border-style: solid; /* Shorthand version would be */ border: solid yellow 20px; 23. Box model wrap up
In this chapter, Kevin helps us review CSS box model and provides a nice visualisation for future reference.
24. A basic layout
We are now ready to create a very basic layout.
Kevin will guide us through creating a page about dinosaurs, where we will be able to put everything we've learned so far to practice.
25. A basic layout - centring an element on the page
In this chapter, Kevin shows us how to centre the main element. It's not too difficult, but there are a few tricky bits to it.
26. Creating columns with flexbox
We are doing pretty well, so far.
Over these last cast, Kevin introduces a mini-capstone project to create this HTML layout from scratch.
Oftentimes, a lot of designs use columns in the footer. In this cast, Kevin shows us how to use display: flex to create this neat layout.
27. Creating the layout from scratch - the HTML
In this screencast, Kevin slices the design into manageable pieces and walks us through the HTML implementation.
In this screencast, we are creating the HTML markup.
28. Creating the Layout - The CSS
And in the final part of this course, we're writing CSS to create the final layout.
29. What's next?
If you reach all the way to this cast, then give your self a pat on the back. Congratulations on finishing the course! We've covered a LOT, and you have every reason to be proud of yourself.
Where can you go from here? Kevin's first recommendation is to install a text editor. Any of them at this stage would be good and you can always change later. VS Code is very popular and for a good reason.
You should also keep an eye on Kevin's upcoming advanced course on how to build responsive websites, so be sure to sign up for Kevin's newsletter.
Happy coding :)
Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.