Cómo terminar HTML y CSS en un día

Bootstrap está hecho para facilitar la construcción de un sitio muy rápidamente. Es perfecto para tu situación. Elimina la necesidad de saber o usar CSS, ya que todo el diseño se aplica agregando clases a sus etiquetas HTML. Las habilidades requeridas son principalmente copiar y pegar, saber cómo anidar etiquetas HTML correctamente y saber cómo y dónde vincular archivos CSS a sus documentos HTML.

Si realmente está comenzando desde cero, le recomiendo aprender qué es una etiqueta HTML e intentar comprender el concepto de anidar contenedores correctamente. Cada etiqueta se abre y se cierra, y un error común de principiante es abrir o cerrar una etiqueta incorrectamente. Especialmente al cortar y pegar el código Bootstrap en el código Bootstrap. Todo el mundo menciona a W3Schools como un recurso, porque es amigable para principiantes: primero el Tutorial HTML y luego el Tutorial Bootstrap 3.

Intente no confundirse con las opciones de instalación en la página de inicio de getbootstrap: le llevará un día descubrir Bower o npm si es un principiante.

Mi recomendación es mantener las cosas simples.

1. Use la plantilla de archivo de inicio – Introducción · plantilla
2. Luego, reemplace el enlace local al archivo CSS de arranque eliminando este código:

1. y reemplazarlo pegando los enlaces CDN desde aquí – Comenzando · Enlaces CDN en la etiqueta principal del archivo de inicio.
2. Luego pegue los componentes que su sitio requiere de esta larga página: Componentes · Bootstrap

El uso de los enlaces de CDN simplificará las cosas si nunca antes ha configurado un conjunto de directorios y archivos amigables para la web.

Intenta no ponerte elegante. Si necesita personalizar algo, deberá comprender la cuadrícula Bootstrap, que no tomará mucho tiempo para aprender, pero si se adhiere a los componentes preconstruidos, terminará en poco tiempo, con menos posibilidades de atornillar cosas y tener que depurar lo que hiciste mal (generalmente cortando y pegando en el lugar equivocado).

Alternativamente, puede comenzar con uno de los ejemplos más completos: Introducción · ejemplos.

Por ejemplo, el jumbotron y la plantilla de tres columnas: Jumbotron Template for Bootstrap le dará todo lo que necesita para una página básica con un diseño común y familiar. La barra de navegación, el encabezado grande de jumbotron, los paneles de 3 columnas y el pie de página están incluidos. Vea la fuente de esa página de jumbotron en su navegador, copie el código, reemplace los enlaces locales a los archivos CSS principales con los enlaces al CDN que señalé anteriormente. Pega el contenido de tu texto e imagen. Hecho.

Es posible crear una página de arranque simple y mínima en 2 días. Aquí está el proceso que sugiero. Esto me llevó ~ 5 minutos, pero todo el trabajo de preparación se realizó por adelantado (configurando Sublime y Chrome y habilitando las herramientas de desarrollo de Chrome). Dependiendo de lo cómodo que esté con los archivos y las funciones de descarga y habilitación, esto podría llevarlo desde una hora o dos hasta quizás un día completo. Estoy siendo muy detallado en mi descripción porque no estoy seguro de lo que ya has configurado, así que por favor no sientas que te estoy hablando mal. Además, otras personas que nunca han probado Bootstrap pueden querer seguirlo.

• Si aún no tiene un editor de texto diseñado para codificadores, obtenga uno. No use MS Word porque agrega cosas que romperán su código. Me gusta Sublime, que es gratis. Le animará a comprar la versión paga cada ~ 10 ahorrados, pero nunca lo obligará a pagar. Sublime Text – Descargar. Estas instrucciones funcionan mejor con Sublime.
• Estas instrucciones funcionan mejor con el navegador Chrome gratuito. Chrome for Desktop Debe habilitar las herramientas de desarrollador de Chrome si nunca las ha usado antes. Google “habilite las herramientas para desarrolladores de Chrome” y siga las instrucciones.
• Cree una carpeta en su escritorio llamada bootstrap.
• Abre Sublime o tu editor de texto. Cree dos archivos en su carpeta bootstrap: home.html y bootstrap.css. Las extensiones .html y .css son muy importantes.
• Mantenga home.html abierto en Sublime y también ábralo en Chrome. En Chrome, debería ser una página web completamente en blanco en este momento.
• En una pestaña separada de Chrome, siga este enlace al ejemplo de jumbotron en los documentos de inicio de Bootstrap: Plantilla Jumbotron para Bootstrap. Deberías ver una página muy bonita y muy simple. Este no tiene que ser su producto final, pero le recomiendo que use este para su primer intento.
• Una vez que esté en esa página, haga clic con el botón derecho en las palabras “¡Hola, mundo!” Y elija “inspeccionar” (las herramientas para desarrolladores de Chrome deben estar habilitadas o no verá la opción “inspeccionar”). Esto abrirá las herramientas de desarrollador de Chrome.
• En las herramientas de desarrollador, mira el código. Debería estar en la pestaña “Elementos”. En la parte superior izquierda del código, debería ver una etiqueta HTML similar a esta:

• Haga clic derecho en la etiqueta y elija “editar como HTML”. Esto debería expandir mucho el HTML.
• Copie todo el HTML (seleccione todo con ctrl + a, luego copie el código seleccionado con ctrl + c) y péguelo (ctrl + v) en su archivo home.html en Sublime. Guarde su archivo home.html en Sublime (ctrl + s).
• Vaya a su pestaña home.html en Sublime. Actualice la página (f5). Debería ver la misma página Bootstrap, pero se verá como un desastre sin formato. Esto se espera en este momento.
• En Chrome, regrese a la plantilla Bootstrap Jumbotron con las Herramientas para desarrolladores de Chrome abiertas.
• En las herramientas de desarrollador, vaya a la pestaña Orígenes.
• Navega por el árbol de fuentes. Abrir arriba → obtener bootstrap. com → dist → css → dist / css → bootstrap.css
• En el medio de las herramientas para desarrolladores de Chrome, verá todos los CSS. Cópialo. Péguelo en su archivo bootstrap.css en Sublime. Guarda el archivo Sublime.
• Ahora regrese a su archivo home.html en Sublime. Encuentra la etiqueta HTML directamente debajo de este comentario:

• Cambie el atributo href a bootstrap.css. No olvides sacar el .min.css en la url. Debería verse así ahora:

• Guarde su archivo home.html en Sublime.
• Ahora regrese a esa página aterradora y de aspecto loco en Chrome. Recarga la página. Debería verse perfecto.
• Si lo desea, puede cambiar cualquiera de las palabras visibles en la página. ¡Diviértete con eso!

Continúa leyendo mi respuesta solo si

• Desea crear una página web hermosa (construida desde cero, si lo desea) en muy poco tiempo (2 días serían más que suficientes, si conoce HTML básico, CSS, JavaScript, Bootstrap)
• No espera que las fuentes aprendan HTML, CSS, JavaScript a nivel profesional , sino que construyan la página web con conocimientos básicos.

Si desea construir solo el front-end, entonces puede echar un vistazo a Google Material Design Lite, que es una biblioteca de componentes y plantillas en CSS, HTML y JS. Todo lo que tiene que hacer es copiar y pegar el código en los archivos de su proyecto una vez que esté en una posición de comprensión, lo que no tomaría más de 4 a 6 horas (supongo que es un principiante total con HTML, CSS y JavaScript)

Aquí está el enlace: Material Design Lite

No solo creará una página web básica, sino que también tendrá el diseño del material, lo que significa que estará actualizado con las pautas de diseño y, ya que utiliza Bootstrap , su página web estará lista para pantallas de diferentes tamaños.

Te divertirás con Google Material Design una vez que conozcas los conceptos básicos del desarrollo web …

Diviértete mucho desarrollando 🙂

Contexto: cero experiencia en HTML y CSS

Plazo: 2 días.

–

Calidad del resultado: Bootstrap de calidad de producción

Respuesta: estafa un sitio web objetivo

–

Calidad del resultado: realizado por un aprendiz rápido de 2 días

Respuesta: Leer HTML y CSS de Wikipedia

–

Calidad del resultado: inacabado

Respuesta: todavía estoy aprendiendo lo que pasa en

–

Calidad del resultado: calidad profesional

Respuesta: compensar a alguien que pueda hacerlo en 2 días

–

Palabra clave: supuesta

En primer lugar, quiero desanimarte porque hablas de diseñar páginas web con bootstrap que no se pueden completar en 2 días.

Tomará algún tiempo ordenar en bootstrap, luego solo creará buenas páginas; de lo contrario, puede crear una página de arranque html en una hora.

Puede comenzar a aprender en w3schools, que también tiene un poco de bootstrap; de lo contrario, puede comenzar a aprender bootstrap desde su sitio web oficial.

O puedes probar mi forma de aprender. Empiezo a aprender practicando, si quiero aprender bootstrap, descargo una pequeña plantilla html de bootstrap que está fácilmente disponible en Google. Y empiezo a editar páginas que me ayudan mucho a aprender y también creo algunas páginas simultáneamente.

Adelante.

Comience a aprender, #happycoding

Depende de lo que quieras lograr. Si solo quiere desarrollar una página web usando HTML y bootstrap, entonces seguramente puede hacerlo en pocas horas. Puede obtener muchos recursos para aprender HTML y bootstrap.

Bootstrap · El marco front-end más popular del mundo para dispositivos móviles y receptivo.

Tutorial Bootstrap 3

Incluso hay editores en línea de WYSWG que puede usar para implementar HTML y bootstrap.

Descargar bootstrap:

Oreja

Descargar un tema de arranque:

Temas de Bootstrap

Abrir página (s) principal (es) en Dreamweaver (o editor similar)

Cambie los nombres de página, los enlaces de menú y el contenido según lo desee.

Cargue según las instrucciones a su servidor en su directorio public_html.

Realmente, si desea la forma MÁS RÁPIDA de hacer un sitio web en dos días con el menor dolor de cabeza posible, puede usar WordPress y encontrar una plantilla basada en Bootstrap y hacerlo de esa manera.

Herramienta de blog, plataforma de publicación y CMS

Terminarlo en un día es difícil de leer. Si tiene unos días de sobra, puede probar los Tutoriales web en línea de W3Schools. Pero dado que desea obtener una visión general dentro de un día, le sugiero que siga los tutoriales en video del curso intensivo. Podría encontrar uno en YouTube:

Espero que esto te ayude. Intente codificar junto con la parte que aprende en el video. Esto debería ayudarlo a comenzar con HTML CSS.

Aquí hay un curso intensivo de bootstrap que puede ver después de tener una comprensión básica de HTML CSS

Espero que esto ayude

Esto no será fácil, pero si tiene una inclinación tecnológica, los Tutoriales en línea de W3Schools tienen cursos gratuitos de HTML y CSS. Comenzaría allí, luego leería la documentación de Bootstrap.

Sin embargo, me siento obligado a decirte que esto es muy difícil, a menos que el sitio web sea extremadamente básico.

No hay manera

Su mejor opción sería obtener una plantilla enlatada que se parezca a lo que desea y luego ajustar los colores y las imágenes.

Mientras no necesite usar JavaScript de Bootstrap y no necesite cambiar mucho, debería estar bien. De lo contrario, depende de lo que quieras decir con “terminar”.

“ Se supone que debo hacer una página web usando bootstrap en 2 días. Dame los recursos donde puedo aprenderlos en 1 día ”

Hacer una página web usando bootstrap podría ser un par de horas de trabajo si sabe cómo copiar y pegar código.

Vaya aquí: Primeros pasos · Bootstrap

Es importante que vaya a la sección “Ejemplos”. Haz clic en las plantillas que más te gusten. Esto abrirá una página en una pestaña diferente.

Puede inspeccionar cada elemento o ver la fuente de la página web para copiar los contenidos. Asegúrese de estar vinculando a los archivos CSS y JS correctos en sus documentos.

Luego puede agregar y eliminar las cosas que necesita en su página.

puedes aprender por youtube, hay una gran colección de videos de aprendizaje sobre HTML y CSS, puedes aprender de esos videos y también puedes multar en tu idioma nativo.

Code school debería ayudarlo a lograr un conocimiento básico de html y css en aproximadamente un día. Tampoco son demasiado difíciles de entender. El único problema que veo con él es que me resulta bastante aburrido dar consejos prácticos, por lo que, si fuera usted, también buscaría tutoriales simples si las escuelas w3c. También puede aprender mucho al ver el código fuente de sitios que se parecen un poco al que está intentando construir.
También recliqué el pez azul, ya que tiene toneladas de características que son realmente útiles para el desarrollador de fin de feto.

Si desea una solución rápida, iv simplemente dando los toques finales a la versión de lanzamiento de mi generador de sitio de arranque.

Construir – Hacer Bootstrap

Es realmente simple de usar, y como todavía lo construyo si tienes alguna sugerencia, soy todo oídos 🙂

Si sabes html css es cuestión de horas. Si no sabe, la mejor opción será descargar plantillas de diseño web sin costo desde http://www.os-templates.com . Solo cambia el contenido …

¡No es posible aprenderlo en un día, pero lo tengo cubierto!

Ve a la udemia. Para encontrar cursos gratuitos en html / css, el instructor le enseñará cómo hacer un sitio web que pueda implementar.

¡O visite YouTube, hay muchísimos videos que cubren html / css de los que puede intentar aprender!

Visita este canal web jp.

Supongo que tienes este plazo para el proyecto o algo que esté bien.

¡Pero recuerde que aprender es un proceso que dura toda la vida! Nunca termina

Seguir aprendiendo.

Puede aprender lo básico rápidamente en w3schools.com. Luego busca en Google tus preguntas cuando te quedes atrapado en algo. Por lo general, hay respuestas en foros y tal.

Tengo curiosidad por saber cómo logró que se le asigne un trabajo haciendo HTML y CSS a corto plazo cuando no conoce HTML y CSS.

Ya que estás usando Bootstrap visita Cómo comenzar · Bootstrap

Léalo todo, siga las instrucciones y ha creado un sitio de arranque

¡Buena suerte!

bueno, en ese caso, probablemente puedas visitar los tutoriales web en línea de W3Schools.

Seguramente te ayudará rápidamente que también cumplas con casi todos los requisitos tuyos.