Introducción

1

Personalización de Blogs con CSS y HTML5

2

Uso de DevTools en Chrome para Desarrollo Web

Análisis y creación del proyecto

3

Creación de un Blog Personal: Análisis de Diseño y Estructura

4

Estructura y Archivos Básicos para Proyecto Web con HTML y CSS

Creando la página principal

5

Maquetación HTML y CSS para un Blog Personal

6

Estilos CSS para Estructurar y Diseñar un Sitio Web

7

Integración de Iconos de Redes Sociales en HTML y CSS

8

CSS: Estilos y Posicionamiento de Elementos HTML

9

Maquetación y Estilos de Sección en HTML y CSS

10

Posicionamiento y Estilo de Imágenes con CSS

11

Integración de Fuentes Web en Proyectos HTML

12

Estilización de Botones y Texto en HTML y CSS

Creando página de Blogs

13

Maquetación de Páginas Web con HTML y CSS

14

Arquitectura de Clases CSS para Blogs en HTML

15

"Estilos CSS para Estructurar un Blog en HTML"

16

Estilos CSS para Imágenes y Textos en Diseño Web

17

Creación de Botón Genérico en HTML y CSS

18

Diseño y Estilo de Blogs con HTML y CSS

19

Centrado de Contenido con CSS: Uso de Contenedores Responsivos

Creando página de Blog

20

Diseño de Pantalla para Blog con HTML y CSS

21

Estilos CSS para Maquetación de Blogs en HTML

Creando página de perfil

22

Maquetación y Estilo de Páginas Web con HTML y CSS

23

Maquetación de Página de Perfil Web con HTML y CSS

24

Diseño de Página de Perfil con HTML y CSS Responsive

Blog responsivo

25

"Creación de Blogs Responsivos con Media Queries"

Cierre

26

Personalización de Blogs con HTML y CSS

Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Creación de un Blog Personal: Análisis de Diseño y Estructura

3/26
Recursos

¿Qué proyecto desarrollaremos durante el curso?

En este curso nos adentraremos en el diseño y desarrollo de un blog personal, un proyecto que te permitirá poner en práctica diversas habilidades y destrezas en frontend. Comenzaremos por analizar los recursos que nos proporciona el equipo de diseño y entender cómo trabajar de manera colaborativa en un entorno profesional.

La implementación de un proyecto como este te dará una sólida comprensión de las buenas prácticas en el desarrollo web, y te preparará para colaborar eficazmente con equipos de diseño y desarrollo como parte de una empresa tecnológica.

¿Cómo está estructurado el blog?

El blog personal que desarrollaremos consta de cuatro pantallas principales. A continuación, desglosamos cada una de ellas:

  1. Pantalla Principal (Home):

    • Es una estructura simple y sin desplazamiento.
    • Integra botones de interacción para navegar a otras partes del blog.
    • Incluye enlaces a redes sociales relacionados.
  2. Pantalla de Blogs:

    • Esta pantalla es más compleja al contar con desplazamiento (scroll).
    • Presenta un blog principal, destacado sobre el resto.
    • Muestra una lista de todos los blogs trabajados.
    • Mantiene los mismos elementos de navegación que la pantalla inicial.
  3. Pantalla de Detalles del Blog:

    • Muestra la imagen y el contenido completo de un blog específico.
    • Incorpora una sección de contacto previa al pie de página.
    • Facilita a los usuarios escribir sus mensajes y conectarse.
  4. Pantalla Sobre Mí:

    • Incluye una foto y una breve descripción personal del autor.
    • Muestra proyectos en los que se ha trabajado anteriormente.
    • Conserva enlaces de navegación y contacto.

¿Qué recursos necesitamos para el desarrollo del blog?

El proyecto también requiere una serie de elementos visuales y técnicos que faciliten su construcción. Estos recursos han sido recopilados por el equipo de diseño y sus detalles son:

  • Imágenes e Iconos: Disponemos de una selección de imágenes y iconos personalizables que se pueden utilizar en diversas secciones del blog.
  • Fuentes y Paleta de Colores: Una selección predefinida que asegura la coherencia y estética visual del blog.
  • Logo Personalizado: Un logo desarrollado específicamente para nuestro proyecto, promoviendo la identidad única del blog.

Todos estos elementos se combinan para ofrecer un proyecto coherente y funcional, lo que nos permite enfocar nuestros esfuerzos en la implementación y personalización del proyecto. En la próxima clase, comenzaremos a estructurar nuestro blog, aplicando todos los conocimientos adquiridos. ¡Mantente motivado y sigue aprendiendo!

Aportes 79

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Me quedó con la frase: "Apreciar el trabajo de los demás" eso siempre es valioso. Muy bonito diseño 💻

soy un cabeza dura y me cuesta muchísimo la parte del diseño de un sitio, por eso, lo que dijo de apreciar mucho que una empresa tenga una área de diseño, lo comprendí bastante.

Verdaderamente este profesor es muy bueno. Es el segundo que empiezo con él. Saludos!

Like si todos los cursos de diseño los debe dar @Degranda 👍👍

me gustaría un figma para sacar todos los recursos

Me parece de muy mal gusto que los recursos los compartan de esa manera porque simplemente el dropbox que tenian se daño. No es justo, delen un soporte a la carpeta del proyecto por favor.

Este es un curso de esos que no se deben dejar pasar.

Estoy super emosionado con este proyecto, siento que el nivel de exigencia sube cada vez más y eso me gusta.

Veremos si en el proyecto usara Grid, el cual me gustaría usarlo y poner en practica mis nuevos skills. 🤓📈💪✅👨🏻‍💻

Al momento de entrar a trabajar como front-end en una empresa, si esta tiene un buen equipo de desarrollo, entonces vamos a tener compañeros que se encargarán de darnos los recursos necesarios, para montar nuestra página.

Esto se puso interesante!!!.. de aquí va a salir otra versión de mi web jaja

Hasta el momento de lo que llevo en la escuela de Platzi, puedo afirmar con seguridad que el profesor Diego de Granda es aquel con quien más he aprendido de una forma verdaderamente increíble. Sin menospreciar a los demás profesores que también han hecho un excelente trabajo, debo decir que considero al profesor Diego como el mejor hasta ahora. Su pasión por la enseñanza se evidencia en cada una de sus clases, logrando transmitir sus conocimientos de manera clara y eficiente, sin ejercer presión sobre sus estudiantes. ¡Realmente es un placer aprender de él!

Emocionado del Proyecto

El sobre mi lo haré como mi portfolio

Y lo demás será blog

Emocionado por el proyecto, sí se puede compañeros!

en esta clase te van a enseñar cual es el proyecto y los materiales que este necesita o assert

hare mi web en svelte!! Deséenme suerte por cada clase iré dejando como voy yendo 😁

No sirve el enlace para descargar los archivos 😦((

Me encanta que nos den la guía de estilos y todos los assets que ocuparemos en el desarrollo del proyecto. Muchas gracias a los diseñadores del Team Platzi 💚

😮

Los que no han podido descargar los elementos aquí les dejo el link directo:

Proyecto Maquetación en CSS

Me encanta el proyecto, creo que será un buen primer portafolio.🚀💚

¿Alguien tiene el zip de esta clase?
El enlace de dropbox está caído.

Muy interesante se ve el proyecto.

Me parecio interesante saber que el equipo de diseño deben aportarte todo los que utilizaras. Excelente!! vamos por mas

Es muy interesante cómo se pueden dar las guías y los recursos antes de empezar a codear como tal.

* [GitHub - degranda/Platzi-blog: Proyecto terminado del curso Practico de HTML y CSS, clase por clase.](https://github.com/degranda/Platzi-blog)

Ya tenemos los assets, lets go xdasdasd

Yo creo que esta increíble que haya texto descriptivo en cada clase porque es mas fácil ver el apunte escrito que el video grabado nuevamente.

Sin duda, que gran proyecto༼ つ ◕_◕ ༽つ

muy bueno eso …

Que emoción!! 😎 El proyecto será de múltiples páginas.

Listo

A ésta clase le vedría muy bien compartir los archivos en 1 sola carpeta, en lugar de descargar los 19 archivos uno a uno.

Buen proyecto!

Siempre humilde causa, aprecia el trabajo de los demás. Veo que critican, les hackeo la cuenta y le pase a alguien más. Saludos comunidad 😄

Listo. Reto completado:

(

Saludos.

Al ingresar al link de Dopbox sale error. Deben Resubir la carpeta!

Recuerden revisar los recursos que nos comparte el instructor en la pestaña de Archivos y Enlaces
Yo ya descargue el diseño 😄

Con expectativas altas!

Excelente, los assets para empezar =)

Muy emocionado, vamos a darle como se debe.
-A codear.

Se ven estupendas las distintas partes que componen el blog y como se disponen.

empecemos

Un proyecto genial.

Muy emocionado con arrancar el proyecto

Muy interesante proyecto para aplicar conocimientos!

Esta genial el diseño!

Genial, vamos con toda

Que chévere ya quiero empezar 😄

Tiene un diseño muy atractivo 😄

Se ve muy interesante ese blog! 🤔

EXCELENTE

Ya quiero empezar a codear!

que cool el blog, me esforzare para seguir aprendiendo

perfecto¡

estupendo sigamos 😄

A aprender mucho mas

Excelente super ordenado!

Se ve genial este projecto!

Todo listo!!!

Estoy listo !!!

Preparado!

Excelente clase!!

vamos con todo pues 😄

Me gusta el proyecto

Genial✔🧔

Excelente, se ve super interesante el proyecto

El orden es clave en este proceso de maquetación y “Codeo” como dice Diego

Continuemos 😄

Interesante, ya estoy intrigada por empezar.

Por gusto propio los iconos de redes sociales me gustan mas cuando son parte del footer y no del header,

Parece que el archivo flaticon.svg está con problemas y no descarga

Es genial cuando nos brindan los diseños de guía antes de iniciar a codear… y grande Diego cuando menciona el hecho que debemos “Apreciar el trabajo de los demás.”

Que gran diseño.

Me apena que ya no esté la carpeta completa, sé que no vamos a usar todos los recursos, pero me hubiese gustado tener el link de dropbox disponible para tener los archivos organizados por carpetas.

Analizamos el blog que desarrollaremos.
Incluye un landing page, redes sociales, proyectos realizados, biografia, contacto, imágenes y más.

m

Aprecia el trabajo de los demas!