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.
- ¿Cuál es el mejor recurso para encontrar desarrolladores ferroviarios de back-end sin desembolsar un montón de dinero en efectivo?
- ¿Cómo aplica Angular el enlace de datos bidireccional?
- Desarrollo web [PHP / MySQL]: ¿Linux o Windows?
- ¿En qué situaciones necesita usar una API?
- ¿Cuáles son los beneficios de contratar a un desarrollador web frente a los creadores de sitios web como SquareSpace, etc.?
- 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