Listas anidadas y enlaces en HTML para recetas

Contenido del curso

Web Developer Fundamentals

HTML

Etiquetas multimedia

Formularios

CSS

Responsive Design

Accesibilidad

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:001:08

Listas anidadas y enlaces en HTML para recetas

Curso Definitivo de HTML y CSS

Clase 10 de 56

Clase 10 / 56

Recursos

Usuario anónimo

User

Hace 6 años

<code>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="vivimos por una experiencia"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="index,follow"/>
    <title>SAGIC: Ux for life</title>
    <style>
        body 
        {
            background-color: #301b4d;
            color: antiquewhite;
            font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        } 
        strong
        {
            background-color: black;
        }
        main 
        {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 900px;
            margin: -50px auto;
        } 
    </style>
    
</head>
<body>
    <header>
        <img src="D:\giocs\Documents\2. Work\1. Sagic\1. Imagen\Imagotipo_B.png" 
        alt="Imgagotipo de sagic"
        width="217"
        height="60"
        title="Vivimos por una experiencia">       
    </header>
    <main>
        <section>
            <article></article>
        </section>
        <h1> <a href="https://www.revistaagenda.net/blog/que-es-el-diseno-ux-y-como-mejora-la-educacion-superior/" target="blank"> UX for life</a> </h1>
        <h3>ux en la paternidad</h3>    
        <p>Ésta es mi visión de como puedo mejorar la experencia de vida en mi hijo</p>
        <ol>
            <li>Investigación</li>
                <ul>
                    <li>Preguntarle qué es lo que más le divierte✨</li>
                    <li>Analizar sus juegos🥇</li>
                    <li>Analizar los programas que ve📺</li>
                    <strong>Toda la información es útil</strong>
                </ul>
            <li>Organización</li>
                <p>Relacionaremos el propósito del negocio (papá mentor👨🏻‍🏫) y las necesidades del usuario (Simón feliz👱🏻‍♂️)</p>
                <ul>
                    <li>Lluvia de ideas de proyectos a ralizar, deben cumplir con el propósito y el contenido💡</li>
                    <li>Programación de actividades📕</li>
                    <li>Establecer objetivos al terminar los proyectos📈</li>
                </ul>
            <li>Prototipo</li>
                <ul>
                    <li>Integración de conceptos nuevos para nutrir su aprendizaje por medio del juego</li>
                    <li>Esquema básico de los proyectos (simon siempre participá en cada paso)🖍</li>
                    <li>Ampliamos el nivel de detalle, ejecutando las mejoras percibidas✂</li>
                </ul>
            <li>Pruebas</li>
                <ul>
                    <li>Pruebas de los prototipos🔦📖</li>
                    <li>Análisis del nivel de aceptación de Simón con respecto a los prototipos</li>
                </ul>
            <li>Ejecucución</li>
                <ul>
                    <li>Desarrollo de los proyectos</li>
                </ul>
            <li>Análisis de los resultados</li>
        </ol>
    </main>
    
</body>
</html>

Usuario anónimo

User

Hace 6 años

Solo te tengo una recomendación! Cuando pones los <ul> después de los <li> dejalos al mismo nivel, esto debido a que así se ve todo con la estructura de árbol... porque ahí estás dejando doble tabulación!

Usuario anónimo

User

Hace 6 años

Yo no considero que necesite ponerlos al mismo nivel, ya que <ul> es una lista anidada dentro de <li> respetando la estructura de árbol.

Web Developer Fundamentals

Este curso tiene una versión actualizada.

HTML y CSS: Fundamentos para Desarrolladores Web

Fundamentos del Desarrollo Frontend: Tecnologías y Prácticas Esenciales

Fundamentos del Desarrollo Backend

Comprende el Rol y las Habilidades de un Desarrollador Full Stack

Diferencias entre Páginas Web Estáticas y Dinámicas

HTML

Anatomía de una Página Web: Estructura y Elementos HTML

Creación y Estructura de un Archivo index.html Básico

Etiquetas HTML: Contenedoras y de Contenido

Listas anidadas y enlaces en HTML para recetas

Anatomía de Etiquetas HTML: Apertura, Cierre y Atributos

Etiquetas multimedia

Formatos de Imágenes y su Uso en Desarrollo Web

Optimización de Imágenes para Web

Uso de etiquetas IMG y FIGURE en HTML

Uso de las etiquetas HTML figure y figcaption para imágenes

Uso de la etiqueta de vídeo en HTML y sus atributos clave

Formularios

Creación de Formularios Web Efectivos con HTML

Creación de Formularios HTML con Campos de Fecha y Hora

Autocompletado y Requerimiento en Formularios HTML

Creación de Menús Desplegables con Select y Data List en HTML

Diferencias entre botones submit e input en formularios HTML

CSS

Introducción a CSS: Estilos y Aplicaciones Básicas

Implementación Básica de CSS en HTML

Pseudo Clases y Pseudo Elementos en CSS

Anatomía de una Regla CSS: Selectores y Declaraciones

Modelo de Caja en CSS: Margen, Relleno y Bordes

Herencia en CSS: Cómo Funciona y Afecta a los Estilos

Especificidad y Orden de Declaración en CSS

Especificidad y Orden en CSS: Crear y Aplicar Estilos Correctamente

Buenas prácticas en CSS: Especificidad y uso adecuado de selectores

Combinadores CSS: Hermanos Adyacentes y Especificidad

Selectores de Hermano General en CSS: Uso y Ejemplos Prácticos

Combinadores CSS: Hijos y Descendientes

Medidas Absolutas y Relativas en CSS: Píxeles y Porcentajes

Comprensión del uso de em en CSS: medidas relativas de fuente

Uso de REM en CSS para Fuentes y Dimensiones

"Uso de Viewport y Dimensiones en CSS: min-width, max-width, min-height"

Posicionamiento en CSS: Static, Absolute y Relative

CSS: Display Block, Inline e Inline-Block

Posicionamiento de Layout Básico en CSS

Posicionamiento y Estilos con Display Flex en CSS

Posicionamiento Vertical con Flexbox en CSS

Uso de Variables Custom en CSS para Optimizar Estilos

Fuentes y Web Fonts en CSS: Cómo Seleccionarlas y Aplicarlas

Responsive Design

Responsive Design: Estrategias Mobile First

Patrones de Diseño Responsive: Mobile First a Desktop

Media Queries para Diseño Responsive Mobile y Tablet

Patrón Layout Shifter en Diseño Mobile First

Patrón de Diseño Responsive: Column Drop en CSS

Diseño Responsive: Estrategias y Ejemplos Prácticos

Imágenes Responsive: Uso de la Etiqueta Picture y Buenas Prácticas

Accesibilidad

Accesibilidad Web: HTML Semántico para Proyectos Inclusivos

Uso de medidas relativas para accesibilidad en texto web

Atributos HTML para Mejorar la Accesibilidad Web

Próximos pasos

Próximos Pasos en Desarrollo Web: Mobile First y Más

Recursos Visuales para Desarrolladores Web

Listas anidadas y enlaces en HTML para recetas