Curso Práctico de Maquetación en CSS

Curso Práctico de Maquetación en CSS

Instruido por:
Diego De Granda
Diego De Granda
Básico
3 horas de contenido
Ver la ruta de aprendizaje
Tu blog profesional
Proyecto del curso
Tu blog profesional

Construye un blog estático para compartir tus intereses y experiencia profesional. En el home, coloca todas las entradas que generes y una página de detalle para cada contenido. También crea una sección de contacto, para que puedas conectarte con otros profesionales.

Curso Práctico de Maquetación en CSS

Curso Práctico de Maquetación en CSS

Progreso del curso:0/26contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/26contenidos(0%)

Introducción

Material Thumbnail

Introducción del curso

02:19 min

Análisis y creación del proyecto

Material Thumbnail

Diseño del proyecto

04:07 min

Material Thumbnail

Setup del proyecto

04:17 min

Creando la página principal

Material Thumbnail

Arquitectura del header en HTML

06:08 min

Material Thumbnail

Estilos en el header

12:16 min

Material Thumbnail

Agregando íconos

09:00 min

Material Thumbnail

Agregando imágenes al header

08:57 min

Material Thumbnail

Manejo de Grid para posicionar contenedores

10:07 min

Material Thumbnail

Manejo de imágenes de Background

02:23 min

Material Thumbnail

Agregando fuentes

03:35 min

Material Thumbnail

Terminando el Home

04:15 min

Creando página de Blogs

Material Thumbnail

Estilos en blogs html

12:14 min

Material Thumbnail

Estilos del botón

04:31 min

Material Thumbnail

Trabajando la sección de post

11:04 min

Creando página de Blog

Material Thumbnail

Crear la pantalla de blog

10:32 min

Material Thumbnail

Agregando estilos a la página de blog

08:40 min

Creando página de perfil

Material Thumbnail

Sección de contacto

11:00 min

Material Thumbnail

Maquetando perfil HTML

08:16 min

Material Thumbnail

Manejando estilos en la página de perfil

12:19 min

Blog responsivo

Cierre

nuevosmás votadossin responder
Nelson Gonzalez Escalante
Nelson Gonzalez Escalante
Estudiante

Diego, dónde pusiste la carpeta con todos los assets. No la encuentro en ninguna lección.

Puedes ayudarme? porfavor

1
Randy Oswaldo Guerra Padilla
Randy Oswaldo Guerra Padilla
Estudiante

Buen dia,me pueden explicar esta parte del codigo?

.home-main section {
display: grid;
grid-column: 2;
justify-items: center;
height: 350px;
margin-top: 80px;

}

2
Nelson Gonzalez Escalante
Nelson Gonzalez Escalante
Estudiante

Donde puedo descargar los archivos desde Dropbox?

0
Sebastian Moreno
Sebastian Moreno
Estudiante

Hola alguien sabe por qué las imágenes se ponen arriba y no al lado izquierdo, graciass

![](help.png

HTML

<sectionclass="contact-main-container"><divclass="contact-left"><imgsrc="../Assets/Img/013-newsletter.png"alt=""><div><ahref="">Contacto</a><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                    </p></div></div><divclass="contact-right"><imgsrc="../Assets/Img/006-like.png"alt=""><div><ahref="">Escribe</a><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p></div></div></section>

CSS

.contact-main-container {
    display: grid;
    grid-template-columns: repeat(2, 300px);
    justify-content: space-evenly;
    width: 100%;
    min-height: 250px;
    background-color: #e6e9ed;
    padding: 100px0;
}


.contact-main-containerimg {
    height: 90px;
    margin-right: 50px;
}

.contact-main-containerdiva {
    font-size: 1.6rem;
    border-bottom: 1px solid black;
    padding-bottom: 5px;
}
0
Juan Fernando Silva Amoza
Juan Fernando Silva Amoza
Estudiante

Hola, como hicieron para que el footer les quedara abajo siempre tengo el mismo problema T_T.

0
Marta Puca
Marta Puca
Estudiante

como hago para encontrar las imagenes que esta usando en la clase ? o cual es la carpeta correcta para decargar?

2
Marta Puca
Marta Puca
Estudiante

porque en GoogleFonts no me aparece para seleccionar ?

2
Marta Puca
Marta Puca
Estudiante

algien me explica por favor como hago para que los iconos esten en una carpeta del editor de texto

0
Gabriel Hernández Valdez
Gabriel Hernández Valdez
Estudiante

Hola, ¿Qué opción es mejor usar para buenas prácticas: grid-areas o grid-template-columns/rows?

0
Henry Agustín
Henry Agustín
Estudiante

Hola amigos espero alguien me podría ayudar a resolver mi duda.
Tuve problemas para agregar los enlaces a las redes sociales del header de la forma del profesor asi que me anime a hacerlo de otra forma pero me encontré con este error.
1-El texto dentro del <span> esta encima del icono que agregue mediante <background-image> en css y si lo borro desaparece el icono, ¿cuál ha sido mi error usando esa etiqueta?

<html><divclass="icons"><ahref="#"><spanclass="icons-item-fb">FB</span></a><ahref="#"><spanclass="icons-item-tw"></span></a><ahref="#"><spanclass="icons-item-ig">IG</span></a><ahref="#"><spanclass="icons-item-in">IN</span></a><ahref="#"><imgsrc="./assets/youtube.svg"alt="icono-de-youtube"></a></div>
<css> 
.icons-item-tw {
    background-image: url(/curso-de-maquetacionCSS/assets/twitter.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 32px;
    height: 32px;
}

error en sitio web.png
La forma que halle para solucionar fue intercambiar <span> por una etiqueta <img> (3) pero alguien me ayuda a solventar mi duda?

0