Primeros Estilos CSS al nuevo Proyecto

Trabajaremos con esta carpeta:

 Primeros Estilos CSS al nuevo Proyecto
Comenzaremos con el Index:
 Primeros Estilos CSS al nuevo Proyecto
Para este proyecto utilizaremos dos fuentes de google font:
 Primeros Estilos CSS al nuevo Proyecto
Luego marcamos lo siguiente:
 Primeros Estilos CSS al nuevo Proyecto
Copiamos el link:
 Primeros Estilos CSS al nuevo Proyecto
Y lo pegamos en el index:
 Primeros Estilos CSS al nuevo Proyecto
Siguiente paso agregaremos Normalize.css:
 Primeros Estilos CSS al nuevo Proyecto
Lo descargamos, copiamos todo el código, creamos un archivo
Normalize en css y lo pegamos:
 Primeros Estilos CSS al nuevo Proyecto
Luego lo agregamos en el index:
 Primeros Estilos CSS al nuevo Proyecto
Luego agregamos el box-sizing: border-box:
 Creando el Header y Estilos para el Mobile
Luego agregamos el box-sizing: border-box:
 Creando el Header y Estilos para el Mobile
Luego implementamos el body:
 Creando el Header y Estilos para el Mobile
Estilos globales:
 Creando el Header y Estilos para el Mobile
Implementando html:
 Creando el Header y Estilos para el Mobile
Implementando Clases en css:

Cambiar a
5rem
 Creando el Header y Estilos para el Mobile
Resultado para dispositivo móvil:
 Finalizando el Header y como crear un Snippet en VS Code
Una vez listo el diseño para dispositivo móvil vamos a enfocarnos en
la parte más grande, es decir para otros dispositivos con tamaños
más grandes, ya que lo necesitamos de esta manera.
 Finalizando el Header y como crear un Snippet en VS Code

Comenzaremos trabajando con los media queries

 Finalizando el Header y como crear un Snippet en VS Code
Resultado
 Como crear un Snippet en VS Code
Resultado: permiten crear código para media queries de manera fácil

Presionamos las teclas ctrl-shift-p, nos sale el siguiente menú y hacemos la

búsqueda con user si está en ingles y damos clic en lo señalado.
 Como crear un Snippet en VS Code
Luego nos sale un menú donde tenemos que escoger lo señalado en el
recuadro
 Como crear un Snippet en VS Code
Nos abre este archivo json donde escribiremos el código que nos ayudará
a escribir la estructura de un media queries de manera más rápida y ganar
tiempo
 Como crear un Snippet en VS Code
Aquí ya tenemos escrito nuestro snippet de hoy en adelante con solo
escribir mq y presionar tab (en estilos css)se creará la estructura del mq
Creación del resto de media queries
 Creación del resto de media queries
Resultado
 Creando el Contenido Principal y Barra Lateral con html
Lo primero es agregar código html para poder agregar la información
requerida
Creando el Contenido Principal y Barra Lateral con html
Creando el Contenido Principal y Barra Lateral con html
Posicionando el Blog y la barra lateral con css

También se hizo este

cambio en el contenedor
Posicionando el Blog y la barra lateral con css
Resultado