DEV Community: Nestor Plasencia

What HTML topics covers the freecodecamp curriculum ?

Nestor Plasencia — Wed, 06 Oct 2021 20:24:51 +0000

I have finished the Responsive Web Design certification, here is a summary of the topics seen in the challenges

Basic

Tag	FreecodeCamp
`<!--...-->`	true
`<!DOCTYPE>`	true
`<body>`	true
`<br>`	true
`<div>`	true
`<h1>` to `<h6>`	true
`<head>`	true
`<hr>`	true
`<html>`	true
`<p>`	true
`<span>`	false

Links

Tag	FreecodeCamp
`<a>`	true
`<link>`	false

Images

Tag	FreecodeCamp
`<figcaption>`	true
`<figure>`	true
`<img>`	true
`<area>`	false
`<canvas>`	false
`<map>`	false
`<picture>`	false
`<svg>`	false

Lists

Tag	FreecodeCamp
`<li>`	true
`<ol>`	true
`<ul>`	true
`<dd>`	false
`<dl>`	false
`<dt>`	false

Forms

Tag	FreecodeCamp
`<button type="submit">`	true
`<button>`	true
`<fieldset>`	true
`<form>`	true
`<input type="checkbox">`	true
`<input type="date">`	true
`<input type="radio">`	true
`<input type="search">`	true
`<input type="submit">`	true
`<input type="text">`	true
`<input>`	true
`<label>`	true
`<legend>`	true
`<button type="button">`	false
`<button type="reset">`	false
`<datalist>`	false
`<input type="button">`	false
`<input type="color">`	false
`<input type="datetime">`	false
`<input type="datetime-local">`	false
`<input type="email">`	false
`<input type="file">`	false
`<input type="hidden">`	false
`<input type="image">`	false
`<input type="month">`	false
`<input type="number">`	false
`<input type="password">`	false
`<input type="range">`	false
`<input type="reset">`	false
`<input type="tel">`	false
`<input type="time">`	false
`<input type="url">`	false
`<input type="week">`	false
`<optgroup>`	false
`<option>`	false
`<output>`	false
`<select>`	false
`<textarea>`	false

Tag	FreecodeCamp
`<meta>`	true
`<title>`	true
`<style>`	true
`<base>`	false

Tables

Tag	FreecodeCamp
`<caption>`	false
`<col>`	false
`<colgroup>`	false
`<table>`	false
`<tbody>`	false
`<td>`	false
`<tfoot>`	false
`<th>`	false
`<thead>`	false
`<tr>`	false

Format

Tag	FreecodeCamp
`<b>`	true
`<blockquote>`	true
`<code>`	true
`<em>`	true
`<strong>`	true
`<sup>`	true
`<abbr>`	false
`<address>`	false
`<bdi>`	false
`<bdo>`	false
`<cite>`	false
`<del>`	false
`<dfn>`	false
`<i>`	false
`<ins>`	false
`<kbd>`	false
`<mark>`	false
`<meter>`	false
`<pre>`	false
`<progress>`	false
`<q>`	false
`<rp>`	false
`<rt>`	false
`<ruby>`	false
`<samp>`	false
`<small>`	false
`<sub>`	false
`<time>`	false
`<var>`	false
`<wbr>`	false

Semantic

Tag	FreecodeCamp
`<article>`	true
`<footer>`	true
`<header>`	true
`<main>`	true
`<nav>`	true
`<section>`	true
`<aside>`	false
`<data>`	false
`<details>`	false
`<dialog>`	false
`<hgroup>`	false
`<summary>`	false

Script

Tag	FreecodeCamp
`<embed>`	false
`<noscript>`	false
`<object>`	false
`<param>`	false
`<script>`	false
`<slot>`	false
`<template>`	false

Audio & Video

Tag	FreecodeCamp
`<audio>`	true
`<source>`	false
`<track>`	false
`<video>`	false

Apuntes de HTML y HTML5 Básico (FreeCodeCamp/Diseño Web Responsivo)

Nestor Plasencia — Thu, 23 Sep 2021 14:18:41 +0000

freeCodeCamp.org/responsive-web-design/#basic-html-and-html5

Etiquetas Básicas

Di hola a los elementos HTML

<h1>Hello</h1>

Título con el elemento h2

<h2>CatPhotoApp</h2>

Informa con el elemento párrafo

<p>I'm a p tag!</p>

Rellena el espacio en blanco con texto provisional

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your

Descomenta código HTML

<!-- some_coment -->

Comenta HTML

<!-- some_coment -->

Elimina elementos HTML

Introducción a los elementos HTML5

<main>
    <h1>Hello World</h1>
    <p>Hello Paragraph</p>
</main>

main, header, footer, nav, video, article, section

Agrega imágenes a tu sitio web

<img src="..">

Enlaza hacia páginas externas con los elementos anchor

<a href=" ... ">link</a>
<a href=" ... " target="_blank">link</a>

Enlaza hacia secciones internas de una página con los elementos anchor

<a href="#..id">link</a>

Anida un elemento anchor dentro de un párrafo

<p>...<a href=" ... ">link</a> ...</p>

Crea enlaces muertos utilizando el símbolo hash

<a href="#"></a>

Convierte una imagen en un enlace

<a href="..."><img src=".."></a>

Crea una lista no ordenada

<ul>
    <li>Garfield</li>
    <li>Sylvester</li>
</ul>

Crea una lista ordenada

<ol>
    <li>Garfield</li>
    <li>Sylvester</li>
</ol>

Declara el Doctype de un documento HTML

<!DOCTYPE html>
<html>

</html>

Define el encabezado y el cuerpo de un Documento HTML

<!DOCTYPE html>
<html>
    <head>
        <meta />
    </head>
    <body>
        <div>
        </div>
    </body>
</html>

Anida muchos elementos dentro de un solo elemento div

<div>
    <p>Things cats love:</p>
    <ul>
        <li>cat nip</li>
        <li>laser pointers</li>
        <li>lasagna</li>
    </ul>
</div>

Formularios

Crea un campo de texto

<input type="text">

Agrega texto provisional a un campo de texto

<input type="text" placeholder="some_placeholder">

Crea un elemento de formulario

<form action="/some_url">
    <input type="text">
</form>

Agrega un botón de envío a un formulario

<button type="submit">some_buton_text</button>

Usa HTML5 para requerir un campo

<input type="text" required>

Crea un conjunto de botones de radio

<label for="input_id_1">    
    <input id="input_id_1" type="radio" name="input_name">some_text_1
</label>
<label for="input_id_2">    
    <input id="input_id_2" type="radio" name="input_name">some_text_2
</label>

Crea un conjunto de casillas de verificación

<label for="input_id_1">    
    <input id="input_id_1" type="checkbox" name="input_name">some_text_1
</label>
<label for="input_id_2">      
    <input id="input_id_2" type="checkbox" name="input_name">some_text_2
</label>

Equivale a

<label for="input_id_1"></label>
<input id="input_id_1" type="checkbox" name="input_name">some_text_1
<label for="input_id_2"></label>
<input id="input_id_2" type="checkbox" name="input_name">some_text_2

Usa el atributo value con botones de radio y casillas de verificación

<label for="input_id_1"></label>
<input id="input_id_1" type="checkbox" name="input_name" value="value_1">some_text_1
<label for="input_id_2"></label>
<input id="input_id_2" type="checkbox" name="input_name" value="value_2">some_text_2

Marca botones de radio y casillas de verificación por defecto

<label for="input_id_1"></label>
<input id="input_id_1" type="radio" name="input_name" value="value_1" checked>some_text_1
<label for="input_id_2"></label>
<input id="input_id_2" type="radio" name="input_name" value="value_2">some_text_2