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

No estoy seguro de qué está pidiendo, pero si está solicitando algún proyecto para mejorar su habilidad y comprensión en HTML y CSS, entonces tengo una propuesta para usted.

Cualquiera puede construir algo (y pondrá todo su esfuerzo en eso) que le apasiona y lo sabe muy bien.

Bueno, teniendo esto en cuenta, ¿por qué no construyes una página dadicada para ti? ¿Algún tipo de cartera?

Pon todo en ti, personal (que quieras compartir con el mundo) y profesional, tu habilidad, tus pasatiempos, lo que sea que puedas imaginar. use un marco para el diseño como bootstrap, use css modernos como lino o css-grid. Introduce un poco de animación en él.

Aprenderá mucho sobre estas tecnologías de esta manera.

Por fin póngalo en github. De esta manera, compartirás tu trabajo con el mundo sin ningún costo y también aprenderás sobre git.

Puedes usar esta página como currículum. Aprenderás mucho Y también entrarás en código abierto. ¿No es sorprendente que hagas algo útil para ti que usarás durante toda tu vida y aprenderás mucho?

Si a usted (lector incluido) le gusta esta sugerencia, haga una votación positiva.

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)

More Interesting

¿Cómo puedo hacer un seguimiento de cuántas veces un usuario ha compartido artículos de mi sitio web a las redes sociales?

En diseño web, ¿qué significa el término 'apilar'?

¿Cómo creo un motor de búsqueda?

¿Cómo podría mover mi sitio de WordPress a un nuevo host?

¿Cómo codifican los archivos STEP los datos de geometría 3D?

¿Cuál es la mejor manera de crear una página web?

"¿Cómo planificar un sitio web de comercio electrónico?"

Como mínimo, ¿qué deben saber los propietarios de sitios web de WordPress que no están en desarrollo sobre sus sitios web en beneficio de los desarrolladores?

Como desarrollador web / móvil independiente, ¿qué haces cuando te enfrentas a una tarea lejos de tus capacidades como desarrollador?

¿Cuáles son los cursos que tengo que hacer como desarrollador front-end?

¿Por qué no hay muchos desarrolladores frontend que se convierten en líderes de equipos de desarrollo?

Cómo crear un servidor dedicado para alojar un sitio web y una base de datos a la que deben acceder varias personas de forma remota

Novato React and express.js: Estoy tratando de usar el mismo componente de reacción de nivel superior para mostrar condicionalmente una página dependiendo de la "ruta" visitada. ¿Cuál es la mejor manera de pasar datos al componente de nivel superior para que pueda renderizar condicionalmente?

¿Qué debería aprender para crear un tema de WordPress receptivo?

¿Puedo agregar de manera segura un texto SEO de 600 palabras en un código web sin ser penalizado?