Mira mamá estoy aprendiendo ❤️
Introducción
Lo que aprenderás sobre maquetación en CSS
Chrome Devtools
Análisis y creación del proyecto
Diseño del proyecto
Setup del proyecto
Creando la página principal
Arquitectura del header en HTML
Estilos en el header
Agregando íconos
Agregando imágenes al header
Manejo de Grid para posicionar contenedores
Manejo de imágenes de Background
Agregando fuentes
Terminando el Home
Creando página de Blogs
Blog page
Manejo de clases
Estilos en blogs html
Agregando imagen
Estilos del botón
Trabajando la sección de post
Grid Container
Creando página de Blog
Crear la pantalla de blog
Agregando estilos a la página de blog
Creando página de perfil
Sección de contacto
Maquetando perfil HTML
Manejando estilos en la página de perfil
Blog responsivo
Media Queries
Cierre
Cierre del curso
Resources
Transcript
How to get started with the hands-on CSS course?
In the exciting world of web development, mastering CSS is a fundamental skill to effectively bring ideas and designs to life. This hands-on CSS course aims not only to guide you in learning, but also to motivate you to apply this knowledge by creating your own personal blog. Here you will find a brief guide to get you off to the best possible start on your CSS learning journey.
Who is your instructor?
Your guide in this course is going to be Diego De Granda, an experienced frontend developer with more than six years of experience in the web technology industry. Diego currently works at Platzi as part of the Education Department, imparting knowledge that has helped thousands of students grow professionally.
What is the objective of the course?
The goal of this hands-on CSS course is for you, as a student, to develop and customize a personal blog that you can share with the Platzi community. It is about putting into practice the knowledge acquired in previous courses and expanding your skills by customizing and styling a real project.
What should you know before you start?
If you haven't taken Platzi's web development course, it's important that you do so before diving into this CSS practice. Such a course will give you a solid foundation in web development, which will maximize your ability to exploit all the content and generate a functional and well-designed blog.
What tools will you need?
What text editor will you use?
For this course, we recommend using Visual Studio Code as a text editor. It is a robust and versatile tool, ideal for editing and managing web projects efficiently due to its multiple extensions that facilitate development.
Which browser is the most suitable?
Diego will use Google Chrome for the course. Chrome is a browser that offers robust development tools, allowing you to work in real time and review changes instantly. With Chrome, you will be able to analyze, debug and optimize your CSS stylesheets in a convenient and accessible way.
What is CSS and how does it work?
Is CSS a programming language?
CSS, or Cascading Style Sheets, is not a programming language per se, but a styling language. Its main function is to add styles and decorations to HTML5 documents. CSS allows you to format web pages and control their visual appearance.
How is CSS applied to HTML?
CSS is applied through selectors that can be HTML tags, classes or IDs. Selectors allow you to identify the elements to which you want to apply specific styles.
- Tag selectors: these refer to HTML tags directly, such as
<h1>,<p>, etc. - Classes: these are called using a dot (
.) followed by the class name, and allow you to style multiple elements with the same style. - IDs: these are more specific than classes and are selected using a hash
(#), generally applicable to a single element.
Next steps and motivation
Advancing your CSS knowledge will help you express your creative ideas in a tangible way through web design. As you embark on this course, we encourage you to get involved with the community by sharing your progress and projects, as this will enrich your learning experience. Open your text editor, test the code in your browser and start your path to professional web design with confidence and creativity!
Contributions 136
Questions 6
Sort by:
he oido mal o ha dicho que le enviemos un tweet que mañana se va a rasurar?
😕
Lo he repetido 3 veces y escucho eso jajaja
Para los que se preguntan qué pasó con el curso que menciona? Pues ha sido actualizado ahora se llama Curso definitivo Html y Css
Motivadísimo a terminar la carrera como desarrollador frontend.
Siempre me emociono al ver que el profesor es Diego de Granda 😃
Éstos cursos de llevar todo a la práctica son realmente motivadores.
Empecemos! 😄
El mejor profesor de Platzi:
Que bien, estaba esperando este curso.
Vengo de los dos cursos previos de Grid, los cuales se me hicieron sumamente teóricos, espero este sea mucho mejor, comienzo el curso muy entusiasmado 😎
Que emoción arrancar de nuevo un curso con el profe Diego, es muy bueno enseñando!.
Esto les ayudara a trabajar mas rapidpo para la creacion de etiquetas https://docs.emmet.io/cheat-sheet/
Alerta: Otra vez Diego con un nuevo proyecto. Calidad asegurada!
Un curso más con el profe Diego, aprendizaje asegurado!
Muchachos el curso de desarrollo web online es el curso de html y css, lo actualizaron y le cambiaron el nombre
Comencemos Tío DeGranpa🚀
Dieguito el mejor profe
Este profesor es genial, es garantia de aprender y que va hacer las cosas fáciles.
Cuando entro a el curso de desarrollo web online, me aparece un nuevo curso y es el definitivo de HTML y CSS, bueno supongo que cumplí con los requisitos por decirlo de alguna manera, para tomar este curso.
Empezamos!!! 😄
De granda es de los mejores.
Rankiiiitanki tanki tiikitikitaki tii tiii
Pienso que algo que hacen malísimo es que los cursos no tengan fecha.
Here we go Mr De Granda! 👨🏻💻🚀
Emocionado por empezar un curso mas, diego es un gran profesor que te lleva paso a paso con el aprendizaje
Estoy encantado por toda la comunidad de platzi, los profes son excelentes. Sin embargo con Diego tuve el primer curso que me enganchó en este mundo, y lo aprecio mucho porque realmente me motivó y me alegra poder ver mas cursos con este profesor, sin desmeritar el gran trabajo que hacen todos! ❤😃
¡Es un excelente maestro!
😃 Emocionado de tener a Diego de Granda como profesor!! 🔥🔥🔥🔥🔥
Feliz día a todas las madres en su día, son ellas nuestro motor para mejorar y no parar de aprender, se les quiere.
Listo y rasurado!!! ja ja ja
Ya quería comenzar este curso.
llegue hasta aquí pero no uso twitter
Genial, tenia en el calendario este curso. Tengo ganas de reafirmar conocimientos
A seguir con la ruta del front end :)
visual code studio o como era ? 😂
Vamos a repasar las bases para no olvidar
…, ya tenia ansias en llevar este curso, por estrategia de estudio deje pasar 01 semana para llevar cursos de gestión de proyectos…, les recomiendo que lleven:
https://platzi.com/clases/scrum/
https://platzi.com/clases/design-sprint/
Slds.
Sera un gran proyecto!
Despues de leer los comentarios de la comunidad del cambio de nombre del curso desarrollo web online, por el de html y css, empezemos este curso con toda la energia positiva ya que los conocimientos que transmite este profesor en sus cursos son de cinco estrella, y de que se aprende se aprende
esta version de platzi me ayuda a aprender mejor…😃
el chayanne de platzi, el mejor profesor.
nota: ojala que freddy no vea esto v:
ganas de empezar, como siempre con Diego De Granda!!
Estoy muy emocionado en seguir la ruta dev, y este curso siento que va a estar genial!
Genial, me encanta esta parte del curso, tengo aproximadamente unos 10 años haciendo blogs en blogger y en wordpress sin saber mucho de código, entendiendo muy poco de HMTL y de CSS no sabía nada, simplemente bajaba templates las instalaba y me ponía a personalizarlas.
¡Ahora me toca crear un Blog 100% personalizado y eso me emociona!
Apuntes / Notas / Resumen 😊
✨ Hechos en Obsidian con Markdown y subidos a GitHub.
Porfa, ayúdenme a mejorarlos. Agradezco cualquier aporte. ✌
Genial, comencemos!
A seguir practicando maquetación, HTML y CSS, a darle con todo y nunca pares de aprender!!!
LLegamos por acá para nunca parar de aprender
Twitt enviado.
Look mom i can fly 🔥🔥🔥
Curso Practico de CSS Grid o Curso practico de maquetacion CSS? :thin
Resumen
Se trabajara un proyecto final (blog), la idea es personalizarlo al final del curso y asi compartirlo con toda la comunidad.
Necesario tomar el Definitivo de HTML y CSS
- Herramientas que necesitaremos
- Editor de texto (VSCode, Atom, Notepad++,Sublime Text, Vim, …)
- Navegador (Chome, Firefox, Edge, Chromium, Opera, Brave, …)
Recap CSS (Cascading Style Sheets)
No es un lenguaje de programacion, es un lenguaje de estilos, el cual nos ayuda a agregar estilos a la maquetación realizada con HTML, por medio de:
- Selectores: que son las etiquetas de HTML.
- Clases: los cuales se llaman por medio de .(nombre clase)
- ID: selectores mas especificos los cuales se llaman por medio de #(nombre id)
Estoy muy emocionado.
whatthefoco aja 2:10
Los cursos del maestro Diego son lo mejor!
Ahora el curso de desarrollo web se llama definitivo de HTML y CSS, muy recomendado
Que bueno volver a tomar el curso de grid
2:10 Qué?? xD
Excelente inicio
Aqui estamos un curso adicional en este camino de aprender y aprender aun mas…
Iré a dejarle mi tweet haber si si se rasura 😄
Aunque no es necesario, se ve muy bien así Profe!
a darle
Super!!!
Con mucha expectativa
Excelente instrucción. Vamos por la maratón.
Comenzamos a picar.
excelente muy buena vibra profesor ansioso de estudiar con usted
Listo para aprender otro curso más y desarrollar habilidades como desarrollador front-end
Vamos con todo.
vengo del curso de desarrollo web online y está es una ruta de aprendizaje larga , pero las ganas que tengo no me detienen, emocionado de comenzar este curso!!
esta buena la ruta!!
genial
expectativa al 100
ah darle!
Empecemos !!
Así inicia otro gran curso de Platzi !!! 😄
Vamos allá para repasar y practicar.
Lets start!
Vamos a mejorar en CSS 😃
Iniciemos 😎👨💻💻
A empezar el curso! 😄
Excelente. Ya quiero comenzar a crear ese blog!
Erróneamente pensé que .CSS era un lenguaje de programación.
Vamo a darle
Listo!
Con todo!
Es un curso increíble, aquí estoy retomando conceptos 😃
Empecemos con este increíble curso!
Lista para comenzar!
Mis egundo curso de fronted aumentando el lvl
comencemos 😄
Vamos con todo!
Vamos a la siguiente y sin barba 🧔🏻
Estamos al día jaajaj
no te rasures… excelente intro
Go!
ya estamos pues, a seguir con la carrera de profesional fronted
vamos a darle
Ta’ bien, rasurado pa’ la siguiente jajajaja.
Excelente clase!!
Want to see more contributions, questions and answers from the community?