¿Cómo puedo practicar el HTML en proyectos después de comenzar en CSS?

Primero, elige un sitio web. Si es la primera vez que hace esto, comience con poco y no elija nada demasiado dinámico como Facebook o Twitter.

En su lugar, elija un sitio o blog estático simple. Puede elegir un sitio de WordPress y, si lo desea, incluso puede optar por replicar un sitio de WordPress sin WordPress, o viceversa.

Entonces, una vez que haya elegido su sitio, puede pasar a inspeccionar el sitio y escribir el código.

Inspeccionar el sitio web

Puede intentar replicar el diseño de su sitio elegido mirando solo su fachada, si así es como le gustaría hacerlo, pero será más fácil inspeccionar el código fuente del sitio web.

Para esto, las herramientas de desarrollo integradas de su navegador serán invaluables durante todo el proyecto.

Eche un vistazo rápido antes de escribir cualquier código; esto le dará una idea básica de la estructura HTML.

Configurando el código

Ahora es el momento de la parte divertida: escribir el código.

Debido a que esto es solo un ejercicio de diseño web y no necesita que el mundo lo vea, simplemente puede guardar su HTML localmente y verlo en su navegador. Entonces, lo único que necesitará configurar es un editor de texto.

Si desea compartir su ‘creación’ con otros, puede usar Dropbox para alojar su HTML. Esta página tiene pasos sobre cómo hacerlo.

Pero nuestro ejemplo está en WordPress, por lo que necesitamos que nuestro código esté correctamente alojado en la red mundial. Como el mundo no verá su sitio, está bien usar un host gratuito. Un host recomendado es 000WebHost.

Así que configure su entorno y luego puede comenzar a codificar. Las herramientas de desarrollador serán de gran ayuda para usted al hacer esto, y si hay algo que no puede resolver, siempre puede volver al código fuente y ver cómo se hace.

Intenta lograr el mismo resultado con un método diferente

Ahora, la idea con este proyecto no es necesariamente copiar el código literalmente. Si quisieras hacer eso, también podrías haber guardado el HTML y CSS del sitio web original.

A menudo, hay cosas que el sitio web original no hace tan buen trabajo. No hay ninguna razón por la que no pueda lograr el mismo resultado con un método diferente y más eficiente.

El encabezado, el logotipo, el menú de navegación y el fondo de ProBlogger se agrupan en una imagen gigantesca. Entonces, en nuestra réplica, podríamos replicar el mismo aspecto, pero con CSS puro.

Puede comenzar su emulación de diseño hoy. Es una excelente manera de repasar su HTML y CSS sin tener una mente creativa.

Por supuesto, el propósito de esto no es copiar el diseño de otra persona para su propio sitio web, eso lo meterá en grandes problemas. Está bien para practicar sus habilidades de codificación, simplemente no lo implemente en un sitio que desea que el mundo vea.

¡Hola!

Puedes practicar como quieras. ¡Solo necesitas un poco de imaginación!

Puede comenzar navegando por algunos sitios web e intentar copiar uno que le guste.

Personalmente, le recomiendo que intente crear algunos de los wireframes de sitios web más comunes (5 patrones de diseño web receptivos realmente útiles – Agencia digital superior | San Francisco y Austin)