¿Cuáles son algunos proyectos o ejercicios que puedo hacer para practicar HTML y CSS?

Answer 1

Crear tu propio sitio funciona bien para algunos, pero si no eres un gran diseñador, es posible que la perspectiva de crear un diseño por tu cuenta sea un poco intimidante.

Si ese es usted, realmente recomiendo encontrar sitios que le gusten y aplicarles ingeniería inversa. En otras palabras, abra el sitio web en un navegador, pero imagine que lo que ve es un PSD que va a codificar en HTML / CSS. Hay opciones ilimitadas para codificar, y no hay presión para hacer nada a la perfección. Además, si se atasca, siempre puede “inspeccionar el elemento” y ver cómo lo hizo realmente el desarrollador.

Es realmente la única forma en que adquirí experiencia antes de hacer el trabajo real del cliente.

Comience con sitios de cartera simples que le gusten, algo como, por ejemplo, http://jonchretien.com y avance hasta los sitios más complicados que desee.

A medida que avanza, esté atento a los sitios web con características / técnicas (diseño web receptivo, animaciones, animaciones jquery, efectos CSS3, etc.) que está tratando de aprender y construir todo. De esa manera, tendrá una idea de cómo esas características deben encajar en su flujo de trabajo general.

Los tutoriales breves son buenos para aprender principios, pero la construcción de sitios de principio a fin es lo que realmente solidificó mi conocimiento.

Consejos:

En Firefox, si hace clic derecho en un sitio web y hace clic en “ver información de la página”, haga clic en la pestaña “medios”, y puede seleccionar todas las imágenes utilizadas en el diseño y descargarlas. Por lo tanto, cuando realiza ingeniería inversa del sitio localmente, puede usar los mismos medios que se usaron para construir el sitio web original.

Obtenga el complemento cromado “Colorpeek”. Escaneará un sitio web completo y tomará todos los colores utilizados en él, y escupirá los códigos hexadecimales / rgb para cada uno. es muy útil, junto con un complemento liveReload y el complemento de herramientas de desarrollador web.

Answer 2

Primero: ¡Pluma y papel!

Crea un sitio con bolígrafo y papel. Una idea sería un sitio que muestre sus libros favoritos, con cuadros de dibujo con lápiz y papel que representan portadas de libros, líneas gruesas donde va el título, líneas más delgadas para el autor.

Luego comienza a traducir ese dibujo en HTML.

¡Detener!

Ha creado un dibujo, ahora usted y usted solo deben elegir dónde usar las etiquetas HTML. ¿Cuál es la mejor etiqueta para el título? ¿Cuál es la mejor etiqueta para el autor? Mirando su diseño de papel, los dos se beneficiarían al estar agrupados. ¿Los agrupa con un div, un encabezado, un hgroup o utiliza solo un elemento y distingue los dos con un span?

¿Necesita una identificación, una clase o una identificación y algunas clases?

Ahora en css. Su dibujo puede ser simple y puede obtener el estilo perfectamente de una vez.

¡Detener!

¿Por qué estoy usando los mismos estilos en diferentes elementos? ¿Puedo hacer que este CSS sea menos repetitivo? Necesito agregar algunas clases más,

Segundo paso

Reduzca el tamaño de su navegador, ahora su diseño está roto. Vuelva a una pluma y papel nuevos, piense en cómo reorganizar los mismos elementos para adaptarse al espacio.

Ahora regrese a css. Aprende sobre la mejor manera. Si las consultas de los medios son difíciles para usted. Copie el proyecto y comience desde el principio y diseñe el sitio para ese tamaño de pantalla ahora. Esto no es una buena práctica, un sitio debe ser receptivo, pero está practicando, intentó diseñar para pantalla grande, ahora está tratando de diseñar para pantalla pequeña.

Paso tres

En este punto, tiene dos sitios diferentes, uno que se ve bien en pantalla pequeña y otro que se ve bien en pantalla grande. ¡Ahora, cree una tercera versión con consultas de medios!

Con su primer y segundo paso, es plenamente consciente de los problemas que enfrentó al diseñar para pantallas pequeñas y grandes. Ahora ya sabe cómo debe estructurarse su HTML para adaptarse a la transición. Sabes que podrías necesitar más clases, tal vez uno o dos divs más aquí y allá.

Volver a la cima

No tiene que usar Photoshop, no tiene que crear un gran diseño. Solo tiene que llenar una página A4 con algunos elementos (si es un sitio de libro: portadas de libros e información de libros). Por ahora, el CSS sería suficiente si solo lo usa para colocar esos elementos de la misma manera que lo hizo en el A4.

Similar a su sitio más pequeño: tome el recorte A4 un cuadrado perfecto. A través del cuadrado y diseñe el sitio (exactamente el mismo que hizo en el diseño A4) en la porción restante del A4 que corta.

Diseñar estos dos sitios y luego fusionarlos (la definición de diseño receptivo) será mejor que cualquier diseño artístico que puedas hacer o clonar.

Si lo necesita, escriba mientras trabaja. Hago esto cuando aprendo algo complicado. Creo un archivo de rebajas (si no sabes qué es eso: un archivo de texto) y escribo lo que estoy haciendo, lo que debo pensar, grabo lo que debo recordar para futuros proyectos.

Después de hacer esto Es posible que haya notado que necesita más práctica en el mismo proceso. Es posible que haya tenido una idea para otro diseño, simplemente hágalo. Consigue papel nuevo y garabatea muchísimo.

Hay capturas de pantalla de hermosos sitios web en toda la web. Pinterest tiene muchos de ellos. Elige uno que te guste. O elija cosas que le gusten de cada diseño que vea y haga collage con las suyas (aún el lápiz y el papel pueden llevarlo muy lejos). Y luego comience a recrear el nuevo sitio en html y css.

Hay una herramienta llamada Frank DeLoupe que es un selector de color, usted elige cualquier color de cualquier cosa y el color se copia en el portapapeles; busque algo así en su sistema operativo. Los navegadores también pueden tener algo así, pero con franqueza, puede elegir el color desde cualquier lugar, no solo desde la web

Answer 3

Si solo conoce html y css, no puede hacer mucho más que crear muchos diseños de css y páginas web estáticas. Entonces, si quieres hacer algo dinámico, entonces aprende javascript y ve a http://freecodecamp.com y practica allí. También puede trabajar en sus proyectos que se centran en mejorar los conjuntos de habilidades que ha mencionado junto con JavaScript.

Si desea mejorar css, siga blogs como http://css-tricks.com que pueden ser muy útiles para que aprenda algo nuevo y tenga tutoriales sobre varios trucos de css. También únete a CodePen. Tienen una interfaz maravillosa para desarrollar diseños frontales rápidos. Puede practicar sus habilidades de diseño y también puede mostrarlo. También puede seguir a cualquiera de los usuarios que le guste y puede consultar los bolígrafos.

Practicar html y css también se puede hacer fácilmente creando sitios web geniales. Para este propósito, si desea desarrollar algo dinámico nuevamente, le aconsejaré aprender javascript.

Espero eso ayude. Gracias por A2A Suriya Ganesh

Answer 4

Aprender HTML y CSS requiere mucha práctica y tiempo. Dijiste que estabas tomando algunos cursos en Udemy, ¡eso es un gran comienzo! Lo que realmente funcionó para mí fue seguir intentando cosas nuevas, buscando nuevos tutoriales e intentando crear mis propias páginas. Muchas veces fallaba o me atascaba, pero siempre aprendía algo y continuaba con mi aprendizaje, y eventualmente aprendería cómo hacer lo que quería anteriormente.

Es un camino difícil y requiere mucho esfuerzo y lo más importante, pero puede hacerlo. También enseño un curso sobre Udemy que te muestra cómo crear un sitio web de principio a fin. Pruébelo y podría aprender algo nuevo. Es gratis en este momento, así que tómalo aquí.

Aprenda cómo convertirse en un desarrollador web independiente

¡Espero que ayude!

Answer 5

Ha recibido algunas respuestas útiles en este momento, y no repetiré simplemente lo que ya se ha dicho. En cambio, me gustaría tomar un ángulo diferente. Cuando mencionas que estás tomando el curso a través de Udemy, ¿por qué no usar la función de preguntas y respuestas dentro del curso para hacer tu pregunta? Debería obtener respuestas del instructor y de otros estudiantes en el curso.

Como instructor de Udemy, puedo decirles que me encanta recibir preguntas de mis alumnos, ya que me da la oportunidad de proporcionarles más valor. También me da retroalimentación sobre algunas cosas que podría querer mejorar en mi curso.

Answer 6

¿Estás hablando de probar código HTML y CSS? ¿O estás hablando de aprender? De cualquier manera, para editar, recomiendo los siguientes editores en línea que son bastante populares:

1. dabblet.com
2. Editor de código HTML, CSS y JS en línea (Sandbox)
3. Crear un nuevo violín (este es mi favorito personal)

Para aprender, aparte de los sitios web ya mencionados en la respuesta anterior, aquí hay algunos más donde puede aprender y obtener un certificado al final del curso:

1. Udemy: cursos en línea en cualquier momento y en cualquier lugar
2. https://www.coursera.org/
3. http://www.skilledup.com

Si aún no es un experto en HTML y CSS, le sugiero que eche un vistazo al W3C para asegurarse de que tiene conocimiento de los estándares web, aquí está el enlace: HTML y CSS – W3C

Además, una vez que se sienta cómodo con los conceptos HTML y CSS, también debería echar un vistazo a HTML5.

---

¡Espero que ayude! 🙂

Answer 7

Comience su propio sitio!

No realmente, crea tu propio sitio.

Aprenderá mucho creando un sitio web y aprendiendo cosas que no sabe a medida que avanza. Es posible que tenga una pregunta sobre cómo hacer algo en CSS, para que pueda Google y luego implementarlo en su sitio. Probablemente sea la mejor manera de aprender cualquier lenguaje de script realmente. Simplemente comience con poco y avance lentamente hacia sitios más grandes y mejores.

Answer 8

Hola a todos, he comenzado un curso completo para desarrolladores web de forma gratuita en YouTube para principiantes.

Cubriré los siguientes temas en las próximas 2 semanas. También crearemos aplicaciones desde cero.

1. HTML

2. CSS

3. Javascript

4. Bootstrap

5. php

6. SQL

Haga clic a continuación y suscríbase a mi canal y le aseguraré que aprenderá muchísimo en los próximos días.

Construir desde cero

Answer 9

La mejor manera es construir su propio sitio web, como otros le ofrecieron. Llegará a algunos problemas y encontrará soluciones y será una mejor experiencia que cualquier curso.

pss. algunos cuestionarios para practicar html / css – http://www.quizful.com/app#/htmlcss

Answer 10

Hola ,

Gracias por A2A,

Me gustaría preferir que convierta el PSD en páginas HTML.
Busque y tome cualquier plantilla PSD simple del sitio web e intente convertirla en páginas HTML simples, no podrá acceder a la página web como en la plantilla PSD, busque en google para traer cada cosa que no puede traer como en el PSD Obtendrás una experiencia. Eventualmente conocerá el conocimiento de cómo funcionan las etiquetas HTML con los atributos CSS.

Inicialmente, tendrá dificultades para convertir el PSD a HTML exactamente, también le tomará mucho tiempo hacerlo. Sea paciente y practique, esto le dará una experiencia real para comprender el diseño.

Feliz codificación ..!

Answer 11

Le damos este divertido y completo ejercicio CSS a nuestro nuevo desarrollador, ¡deberías intentarlo! El enlace de Github está al final.

¿Aprender CSS en un día? Fácil! Construye un Pokedex.

Answer 12

https://www.codecademy.com/

escuelas w3

Y. http: //www.teaching-materials.or …

http://themeforest.net

Estos enlaces te ayudarán

Feliz codificación

Answer 13

¿Has descubierto Codecademy?
Es un gran recurso para que los principiantes aprendan y practiquen algunos conceptos básicos de programación.

Answer 14

En la programación en general todavía no hay libros de trabajo para practicar código (además de aprender de la manera difícil)

Desearía que hubiera un libro que tuviera una lista de tareas que haces una y otra vez.

De esa manera se perfora en tu cerebro cómo hacerlo. Como en la escuela, tuve que escribir una y otra vez las palabras hasta que aprendí a deletrear.

Supongo que solo debes tomar un principio y trabajar en él hasta que lo retengas.