HTML--CSS--Learning GitHub Details, Stars and Alternatives

REPOSITORY OVERVIEW

Live repository statistics

★ 2Stars

⑂ 0Forks

◯ 0Open issues

◉ 2Watchers

README preview

Aprendiendo HTML y CSS

Este repositorio contiene ejercicios, prácticas, ejemplos y proyectos de aprendizaje en HTML y CSS.

Objetivo

Mejorar mis habilidades en el desarrollo frontend, aprender buenas prácticas y entender diferentes conceptos con el fin de completar mis conocimientos de Backend.

Tecnologías

HTML5
CSS3
VS Code

Estructura del Repositorio

Este repositorio está organizado en dos carpetas principales, una para cada tecnología usada:

CURSOHTML/ → Contiene ejercicios y ejemplos de HTML (manejo de enlaces, manejo de imágenes, listas, párrafos, etiquetas, etc).
CURSOCSS/ → Contiene ejercicios y ejemplos de CSS (bordes, box-sizing, colores, fondos, gradientes, padding y margin, propiedades de texto, selectores, sombras, unidades de medida, width y height).

Conceptos básicos de HTML y CSS

HTML – Estructura y etiquetas básicas

Etiqueta raíz

<html></html> → Todo lo que está dentro hace parte de la página web.

Cabecera

<head></head> → Contiene la información de la página (no visible).
<title></title> → Título de la página.
<meta charset> → Define la codificación de caracteres.
<meta name> → Información adicional no visible.

Cuerpo

<body></body> → Todo lo visible de la página web.

Texto

<p></p> → Párrafos.
<h1>…<h6> → Títulos y subtítulos.

Enlaces

<a href="direccion"></a> → Enlaces para redireccionar.
target="_self" → Abre el enlace en la misma pestaña (valor por defecto).
target="_blank" → Abre el enlace en una nueva pestaña.
title="descripcion" → Muestra una descripción al pasar el cursor.

Imágenes

<img src="ruta"> → Inserta una imagen.
alt="descripcion" → Texto alternativo si la imagen no carga.

Rutas

Rutas relativas y absolutas (dependen de la ubicación del archivo).

Inputs

<input type=""> → Campos de entrada de datos.
Atributos importantes:
- required → Campo obligatorio
- name → Identificador del input
- placeholder → Texto de ayuda
- value → Valor enviado al servidor

Introducción a CSS

Estilos en línea → Estilos aplicados directamente a un elemento.
Clases → Permiten asignar un nombre a los elementos para aplicar estilos.

Propiedades básicas

font-family → Tipografía
font-size → Tamaño del texto
font-weight → Grosor del texto

Box Model Describe cómo se diseñan y distribuyen los elementos:

Content → Contenido (texto o imágenes)
Padding → Espacio interno entre contenido y borde
Border → Borde que rodea el contenido
Margin → Espacio externo entre elementos

Colores en CSS (HEX)

Rojo: #FF0000
Amarillo: #FFBF00
Verde: #99FF00
Cian bonito: #00FF84
Cian puro: #00FFA6
Azul claro: #0077FF
Azul oscuro: #0022FF
Violeta: #4400FF
Morado: #5E0063

Lo que he aprendido

Estructura semántica en HTML
Uso de selectores y propiedades CSS
Diseño con sombras y gradientes
Posicionamiento (Flexbox)
Buenas prácticas (organización de CSS y nombres claros)

Próximos pasos

Añadir JavaScript
Hacer proyectos más avanzados
Optimización de imágenes y mejor manejo del frontend

Recursos y referencias

Soy Dalto

ALGORITHMICALLY RELATED

Similar Open-Source Projects

Selected from shared topics, language and repository description—not editorial ratings.

userThaliaoliveira /

Tags_html

★ 7

Este repositório tem como objetivo fornecer uma referência completa das tags HTML mais comumente utilizadas. Se você é um desenvolvedor(a) web em busca de informações claras e diretas sobre as tags HTML, este é o lugar certo! Navegue pelos arquivos para encontrar a tag HTML específica que deseja aprender. Cada arquivo contém informações detalhadas

Active repository

HTMLMIT#button#h1#html#select

⑂ 1 forks◯ 0 issuesUpdated Jul 29, 2024

View details View on GitHub ↗

rafael-figueiredo-alves /

WebExperiments

★ 3

Repositório destinado a conter experimentos no mundo Web (HTML5, CSS3, JavaScript, ReactJS) para aprender tudo sobre este universo de programação.