Descripción de la tarea

Introducción

Codecademy es una plataforma online que ofrece cursos gratuitos de ciencias de la computación. Fue fundada en 2011 y, actualmente, todo su material educativo está traducido del inglés al castellano, francés y portugués.
Permite aprender diversos lenguajes de programación de forma lúdica e interactiva y sin tener  ningún conocimiento previo. Para motivar al alumnado ofrece insignias o medallas al completar ejercicios, mantiene un registro de la puntuación total del usuario y además, cuenta con un glosario y foros de discusión por cada curso.
Por último, Codecademy permite que cualquier usuario pueda crear y publicar un nuevo curso usando la herramienta de creación de cursos.

Desarrollo


A la hora de aprender a programar podemos acceder a páginas web especializadas que nos guían paso a paso. Es el caso de CodeCademy.

En esta actividad seguiremos el curso de HMTL y CSS para aprender a crear sitios web:

  • HTML: lenguaje de marcas que permite la creación de páginas web estructuradas.
  • CSS: lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado. Es muy usado para establecer el diseño visual de los documentos web (HTML).

El curso es eminentemente práctico, vas realizando breves ejercicios que te construyen los pilares para que posteriormente seas capaz de superar unos retos. Tras superar cada reto conseguirás una insignia (medalla de tus logros).

Si al seguir esta sección encuentras dificultades, dirígite a la sección CONSULTAS y AYUDA.

Acceder al curso de HTML & CSS

Lo primero que debes hacer es crear una cuenta en CodeAcademy (versión en castellano) y configurarla adecuadamente:

  • Debes indicar tu nombre y población.
  • Elegir español como idioma de la cuenta
  • Indicar tu usuario de twitter.
  • Hacer tu perfil público para todos.

Después te darás de alta en el curso HTML & CSS. Este curso consta de seis fases, pero nosotros solo haremos 4: Conceptos básicos de HTML I y II, III y CSS: Un vistazo general.

En tu perfil podrás ver tus logros, puntos acumulados, ejercicios realizados, insignias, etc.

Insignias

Captura de pantalla de elaboración propia

Diseña tu propia página web

En este primer bloque del curso Conceptos básicos de HTML I, vas a aprender los fundamentos del lenguaje HTML y superarás un reto: crear tu propia página web.

En ella debes indicar tu nombre, presentarte brevemente y colgar una fotografía personal. El resultado será una cosa sencilla, parecido a esto:

Mi primera web

Captura de pantalla de elaboración propia

Página de fotos interactivas

Ya sabes como crear una primera página web, ahora avanzarás realizando los bloques Conceptos básicos de HTML I y II: con esto aprenderás a mejorar el aspecto de tu web: crear listas, cambiar fuentes, y, darás un paso más allá para distribuir objetos usando tablas y etiquetas <div> y <span>.

Después estarás en disposición de crear un álbum de fotos interactivas: Busca al menos 4 imágenes (con licencia libre) relacionadas con alguna afición personal y colócalas en tu página web.

Diseña un botón para tu página web

Por último, te vas a adentrar en el fascinante mundo del diseño gráfico de páginas web, conociendo las hojas de estilo y el lenguaje CSS con el que se construyen.

Ya que has contruido tu primera página web, ahora le añadirás en ella un botón para que tus amigos de twitter te sigan. Sigue el ejemplo que te ofrece el curso pero cambiando el botón de facebook por el de twitter.

Botón CSS

Captura de pantalla de elaboración propia

Una vez realizada las diferentes fases del curso, aumentarás tus puntos e irás recibiendo unas insignias.

Atención: La última página web debe incluir todo lo que se ha ido pidiendo. 

Debes copiar y pegar el texto de tu página web en un editor de textos y guardarlo con el nombre:

mi_primera_web_nombre_del_alumno.html

Si estás interesado en el tema, puedes continuar con el curso hasta acabarlo, entonces conseguirás el reto de crear tu propio Currículum Vitae.

Modo de envío

Debes entregar dos cosas:

  1. El archivo con la página web: mi_primera_web_nombre_del_alumno.html
  2. La url de tu perfil público para comprobar que insignias has recibido.

¡Adelante!