¿Qué tipo de sitios web debe hacer un principiante para practicar su HTML y CSS?

Puedes practicar sin hacer un sitio web en absoluto.


En Safari, Chrome y Firefox, haga clic derecho y seleccione inspeccionar elemento. Puede seleccionar elementos de la página y ver las clases utilizadas para diseñar el sitio web. Puede cambiar colores, tamaños de fuente y muchas otras cosas. Gran manera de modificar su código. La mejor parte es que puede seleccionar todo el código y pegarlo en una hoja de estilo para usar. Por supuesto, este último bit es para cuando construyes tu propio sitio.


Así es como me entrenaría si le estuviera enseñando a alguien lo básico. Entonces para comenzar. Si desea aprender a codificar, simplemente haga un sitio web de 5 páginas. Una página de inicio, una página de información, una página de artículos, una página de galería y una página de contacto con un formulario.

  • En todo el sitio
    • La razón por la que elegí esas páginas es que varias páginas te enseñan cómo crear enlaces y configurar una barra de navegación (barra de navegación)
    • Use la etiqueta para adjuntar fuentes de google y use dos fuentes. Uno para encabezados y otro para copia (texto normal en la página)
  • Página principal
    • Añade un titulo
    • Agrega una imagen genial
    • Crea un eslogan y dale estilo al texto
  • Sobre la pagina
    • Añadir título
    • Agregue una imagen de usted mismo (o algo si no lo quiere allí)
    • Escribe una bio. (Lo necesitarás eventualmente)
    • Crea una lista desordenada de las habilidades que deseas. Retire las viñetas y reemplácelas con una imagen de una casilla de verificación.
  • Página del artículo
    • usando 2 divs y float css crea la siguiente barra principal y lateral:
    • debe tener un área principal con:
      • Añadir título
      • Ponga en 7 párrafos de copia (texto) (use el generador de lorum ipsum para generar el texto. || Generador de texto ficticio)
      • Encuentra 3 imágenes y ponlas en tus párrafos flotando a izquierda o derecha. Obtenga el texto para envolverlos.
    • Debe tener una barra lateral con:
      • Un anuncio de imagen
      • Los 10 mejores programas de TV
      • Una lista numerada
  • Página de la galería
    • Añadir título
    • Crea una cuadrícula de imágenes usando una lista desordenada. Sí, esto se puede hacer y es complicado, pero usar listas para hacer grupos de objetos en lugar de usar tablas se usa en todas partes. Cada imagen debe vincularse a una versión más grande de la imagen (puede usar el mismo archivo de imagen).
  • Pagina de contacto
    • Añadir título
    • Crea un formulario.
    • El formulario debe tener los siguientes campos:
      • Nombre (etiqueta y campo de entrada)
      • Apellido (etiqueta y campo de entrada)
      • ¿Desea obtener más información: [] sí [] no (etiqueta y botones de opción)
      • Hábleme de su problema (etiqueta y área de texto)
      • ¿Qué puedo hacer por usted ?: [resolver] [consultar] [recomendar] (etiquetar y seleccionar con opciones. Puede elegir algunas más)
      • correo electrónico (etiqueta y entrada)
      • ingrese una contraseña: (etiqueta y campo de contraseña de entrada)
      • enviar (entrada)
      • iamnotspam (campo de entrada oculto)
    • Para obtener crédito adicional, use texto de marcador de posición en las entradas que desaparece cuando comienza a escribir. (Sí, está disponible como parte de la etiqueta.

Eso te da la oportunidad de crear muchos elementos y descubrir cómo se unen.

Use CSS para hacer una buena apariencia limpia.

Puede ir aquí: Dynamic Dummy Image Generator para generar algunas imágenes ficticias para usar.

puede obtener el texto de lorum ipsum aquí: || Generador de texto ficticio. Puedes elegir cualquiera de los que quieres jugar aquí.

Si necesita un host para poner su sitio en get mamp y configurarlo localmente en su computadora. Haga una carpeta para colocar los archivos. Cree un nuevo sitio en mamp (MAMP & MAMP PRO) y asígnele un nombre como www.mysitename.local y dígale a mamp que use la carpeta donde están sus archivos. Luego puede usar su navegador para navegar a http: //www.mysitename.local para verlo.


Para editar archivos html, uso un editor de texto pirateable para el siglo XXI, pero cualquier cosa funcionará bien.

Tendrá que buscar tutoriales sobre la configuración de mamp, pero esto debería darle un buen comienzo en la programación de html y css. Escribí esto bastante rápido, así que tómalo como una guía aproximada para aprender, pero debería darte lo suficiente para comenzar.

Buena suerte

No necesita practicar la creación de sitios web. La web futura ni siquiera tiene páginas, solo estados de página vinculados a URL. Funciona muy parecido a una aplicación.

Lo que debes practicar son los componentes.

  • Cómo construir un conjunto receptivo de tarjetas de estilo de diseño de materiales usando flexbox.
  • Cómo usar https://www.getmdl.io para crear rápidamente componentes de diseño de materiales.
  • Cómo usar Susy: herramientas eléctricas para que la web desarrolle sus propios sistemas de cuadrícula receptiva sobre la marcha.
  • Cómo representar JSON-LD desde algún lugar como la API IMDB dentro de su página como una interfaz hermosa y no como datos sin procesar. Su desafío será cronometrar el JS para que se ejecute después de que se complete la carga de la API.
  • Cómo combinar tamaños srcset + con carga lenta para crear un diseño móvil eficiente que también se vea hermoso en una Mac de 5k.
  • Cómo transformar de manera sensible un subnavegación de la barra lateral en un subnave fuera del lienzo.
  • Cómo transformar una barra de navegación superior en una navegación de pulgar estilo IOS (mira en la parte inferior de Quora) usando solo JavaScript y un mínimo de componentes HTML adicionales (pista: separar y agregar en jQuery).

Lo mejor del estado moderno de la web es que puede practicar todas estas cosas en CodePen, donde puede obtener fácilmente ayuda de la comunidad en línea. Una cuenta paga también permite la codificación de pares colaborativos.

Practicar la construcción de sitios web completos es para las aves. Lo difícil está en los detalles. Adjuntar un CodePen lleno de experimentos increíbles a una cartera también le atraerá mucha atención, ya que la persona que revisa su trabajo podrá ver qué tan bien resume y comenta el código.

Elija un tema que le guste, o algo sobre lo que quiera saber más, y luego cree un sitio web al respecto. Esto podría ser cualquier cosa, desde autos deportivos hasta rottweilers hasta cocinar paella.

Te divertirás más trabajando en un sitio que te interese y esto facilitará el aprendizaje. Esto también lo ayudará a pensar en planificar su sitio y organizar el contenido de manera que sea fácil de usar.

Después de que hayas creado uno, elige otro tema y haz que este sea un poco más complejo.