Tengo un concepto sobre HTML y CSS. Quiero practicar más y más. ¿Cómo lo hago?

Como muchas personas aquí, soy un diseñador / programador web autodidacta. Ya ha recibido excelentes sugerencias, por lo que mi contribución será pequeña:

1. Qué hacer ? Practica cada concepto que encuentres , incluso cuando creas que no lo usarás. Por ejemplo, si crees que nunca usarás tablas, debes practicar un poco y escribir algunas: nunca sabes lo que vas a necesitar.
2. Cómo hacerlo ? Practica con ejemplos. Para hacerlo, navegue en Internet y capture diseños de sitios web: google “diseño de sitios web”, o revise sus sitios favoritos. No mire el código : todavía no, al menos. Conserve eso para cuando sea más hábil, porque le permitirá tener una visión diferente de las cosas, pero primero debe crear hábitos, antes de ver la forma de hacer las cosas de otras personas. De todos modos, toma algunos diseños , los que te gustan y / o los que desafían tus habilidades, aunque no demasiado. Cosas que parecen posibles, pero no demasiado fáciles. Luego intenta reproducirlos . Pruebe esta técnica con ejemplos variados, de esa manera cuando tenga una idea del diseño del sitio web, estará completamente equipado para realizarlo.

Estoy sugiriendo esta técnica, porque funcionó bien para mí. Lo usé al comienzo de mi viaje por las redes, y luego pasé a un proyecto personal de sitio web, lo que me permitió poner en práctica mis habilidades.
Cada vez que estoy en un sitio web, sigo pensando en cómo codificaría un elemento dado, cómo haría que todo encajara y se alineara … Por lo tanto, definitivamente puedo decir que este enfoque me hizo más creativo y hábil, lo que parece ser su objetivo.
Te deseo suerte, y estoy seguro de que encontrarás una técnica de entrenamiento que se ajuste a ti.

Me gustaría recomendar 3 niveles de la siguiente manera:

1, vuelva a crear las muestras en Tympanus a su manera, como:

Una colección de transiciones de página
Notificación Estilos Inspiración
En los efectos de encabezado de desplazamiento con transiciones CSS

2, encuentra el buen PSD en Dribbble e intenta cortarlo.

3, aprenda a usar los marcos populares como Bootstrap, Polymer, Material Design Lite, etc. e intente construir un diseño más complejo con ellos.

Podrías comenzar con un proyecto web simple. Solo trata de hacer algunas páginas web estáticas simples. Por ejemplo, podría comenzar a diseñar un sitio web de muestra para sus amigos, grupos … cualquier cosa … Intente utilizar la mayor cantidad posible de JS / JQuery / HTMl / CSS. Una vez que las páginas estáticas estén listas, puede comenzar a trabajar en datos reales (utilizando la programación de back-end).

Con datos ficticios puede comenzar su proyecto y completarlo. Te dará la oportunidad de aprender y explorar tus conocimientos sobre tecnologías web.

Espero que esto te dé alguna dirección. Feliz aprendizaje.

Sigue escribiendo más sitios web. Intente usar un lenguaje más complejo y haga que sus sitios web sean más elaborados y complicados. Además, familiarícese con las mesas. Sé que suenan inútiles, pero si son invisibles son muy útiles. Además, si conoce a alguien con un negocio, intente crear un sitio web para ellos (comience de forma gratuita y después de construir una cartera, cobre un pequeño precio). Además, puede crear sitios web para las cosas que le interesan. ¡No tiene que publicarlos! ¡También puedes desafiarte a ti mismo para crear un sitio web con la mayor cantidad de etiquetas posible!

La mejor manera de perfeccionar sus habilidades es encontrar un pequeño proyecto y comenzar a diseñarlo. Esto le dará inmediatamente una idea de lo que sabe y qué más necesita aprender.

Comience con pocas páginas estáticas al principio. Más tarde agregue algunas características dinámicas en él. Mire otros sitios web e intente agregar características, como diseño, color, etc. a sus páginas. No copiar y pegar. Hágalo usted mismo y esto le dará una idea sobre cómo usar las funciones HTML con CSS.

Una vez que esté listo con sus páginas estáticas, ahora deseará agregar algunas características dinámicas, como envío de páginas, validaciones y más. De aquí en adelante, sentirá la necesidad de aprender más acerca de la programación, como las secuencias de comandos del cliente (JavaScript, JQuery o AngularJS) y las secuencias de comandos del lado del servidor (como .Net, etc.).

Buena suerte

Practique su HTML / CSS con el editor de código en tiempo real.

Aprenda CSS interactivamente con editores de código en vivo

Crea algo. ¿Te gusta un sitio? intente copiarlo sin mirarlo!

http://www.wampserver.com/en/ le permitirá instalar un servidor web completo en su propia PC.

La Descripción general de Chrome DevTools le permitirá editar y realizar cambios en vivo en el navegador.

CodePen es tu patio de recreo. Es un lugar increíble para probar cosas en HTML / CSS y JS o lenguajes de preprocesamiento.

Asegúrese de examinar algunas de las cosas que la gente hace allí: hay algunos trucos de CSS alucinantes que están sucediendo por ahí …

Lo más importante que debes hacer para practicar en HTML y CSS, no crear un sitio web o una página web, sino codificar cualquier página web en HTML y CSS, lo que significa que escribes el código desde él. Entendido ?