Crear una pagina web desde 0 Archivos - Programador Novato

maxresdefault 40

Mi primer página Web

En este curso crearemos mi primer página Web con la ayuda de varias tecnologías que ayudarán a con nuestro diseño, que listamos a continuación:

  • HTML5.
  • JavaScript.
  • CSS.
  • Bootstrap.

Instalaci…

maxresdefault 41

Instalación de Bootstrap 5 (Mi primer página Web)

En este tutorial vamos a realizar la instalación de Bootstrap 5 siguiendo estos pasos.

  • Desde la página oficial de Bootstrap (https://getbootstrap.com) obtendremos las librerías de Boots

maxresdefault 42

Análisis de Bootstrap 5 (Mi primer página Web)

En este tutorial realizaremos el análisis de Bootstrap 5 de las herramientas que nos ofrece para para facilitarnos la vida a la hora de crear nuestros diseños.

  • Examples (Ejemplos)
  • Icons (Ico

maxresdefault 43

Contenedores y rejillas en Bootstrap 5 (Mi primer página Web)

En este tutorial vamos a estudiar los contenedores y rejillas en Bootstrap 5.

Codigo de los contenedores y rejillas en Bootstrap 5: https://github.com/programadornovato/MiPaginaWeb/c

maxresdefault 44

Puntos de ruptura en Bootstrap 5 (Mi primer página Web)

En esta clase vamos a ver los puntos de ruptura en Bootstrap 5, en otras palabras vamos a personalizar como queremos que se miren nuestras columnas en los diferentes dispositivos (teléfonos, …

maxresdefault 45

Gutters (Canales) en Bootstrap 5 (Mi primer página Web)

Los Gutters (Canales) en Bootstrap 5 son el relleno entre las columnas, que se utilizan para espaciar y alinear el contenido de las rejillas Bootstrap.

Los Gutters (Canales) son los espacios …

maxresdefault 46

Float en Bootstrap 5 (Mi primer página Web)

La clase float en Bootstrap 5 hace flotar un elemento a la izquierda (start) o la derecha (end), o deshabilitan la flotación, según el tamaño actual de la ventana. La clase float usa los mismos p…

maxresdefault 47

Background y Border en Bootstrap 5 (Mi primer página Web)

En esta usaremos Background y Border en Bootstrap 5 para colocarle diferentes colores (prediseñados) a nuestros elementos incluyendo transparencias y también bordes con algunas variant…

maxresdefault 48

Alignment en Bootstrap 5 (Mi primer página Web)

La herramienta alineación (alignment) en Bootstrap 5 nos ayuda a modificar columnas con un puñado de opciones, orden y compensación gracias a nuestro sistema de cuadrícula. Además, veremo…

maxresdefault 49

Colocamos una cabecera llamativa a nuestro portafolio (Mi primer página Web)

Ya obtenidas las bases de diseño en Bootstrap comenzaremos a crear un portafolio personal que demuestre nuestras habilidades de desarrollo y diseño. Es importante causar un buena impresió…

maxresdefault 50

Agregaremos nuestro portafolio una barra de navegación Navbar (Mi primer página Web)

Una vez creada nuestra impactante cabecera procedemos a crear una barra de navegación Navbar para mostrara los diferentes áreas de nuestro portafolio.

Codigo de la barra de navegación Navb…

maxresdefault 51

Definiremos estilos de texto y espacios del portafolio (Mi primer página Web)

Para dar un orden a nuestra redaccion vamos a definiremos estilos de texto y espacios del portafolio siguiendo estos pasos:

  • En esta clase vamos a trabajar con diferentes estilos de texto, esp

maxresdefault 52

Mostramos nuestras habilidades en Tarjetas Cardrs de Bootstrap (Mi primer página Web)

No nos podemos olvidar de colocar nuestras habilidades como programadores full-stack y todo se mira mejor en tarjetas (Cardrs) de Bootstrap. Bootstrap nos ofrece unas elegantes tarjetas p…

maxresdefault 53

Mostrar a detalle nuestras habilidades en una ventana modal con Bootstrap (Mi primer página Web)

Ya hemos colocado nuestra capacidades a groso modo y pues podríamos profundizar los detalles de nuestros conocimientos al hace click en el botón ver detalles y lo haremos con una ventana moda…

maxresdefault 54

Agregaremos un poco de usabilidad al menú con sticky top en Bootstrap (Mi primer página Web)

Vamos a agregaremos un poco de usabilidad al menú con sticky top en Bootstrap para que nuestro penu se quede pegado en la parte superior de nuestra pagina siguiendo estos pasos:

  • Para empezar ag

maxresdefault 55

Agregaremos un Formulario de contacto Form control a nuestro portafolio (Mi primer página Web)

Agregaremos un Formulario de contacto Form control a nuestro portafolio siguiendo estos pasos:

  • Una vez cautivados nuestros clientes potenciales es hora de hacer que nos contacten para com

maxresdefault 56

Analizaremos los diferentes tipos atributos de los botones (Mi primer página Web)

Bootstrap nos ofrece una gran cantidad de variantes de botones por eso en este tutorial analizaremos los diferentes tipos atributos de los botones, desde colores, tamaños y hasta funcional…

maxresdefault 57

Agregaremos selectores (Select) para categorizar la información (Mi primer página Web)

Además de recibir el nombre y correo de nuestro cliente también requerimos saber que tipo de proyecto se tiene planeado, para tal menester usaremos selectores (Select) que bootstrap tambié…

maxresdefault 58

Validamos opciones con checkbox y radios (Mi primer página Web)

Debemos informar a nuestro clientes las diferentes formas en las que podemos recibir pagos, una opcion muy elegante para hacerlo es con opciones con checkbox y radios. Así que agregaremos 3 d…

maxresdefault 59

Validar la información colocada en el formulario (Mi primer página Web)

Debemos de tener cuidado que la información que recibamos de los clientes sea la adecuada, bootstrap nos ofrece herramientas para validar la información personalizar los mensajes de error …

maxresdefault 60

Creamos un formulario de suscripción (Mi primer página Web)

Quizás los clientes potenciales no quieran que les desarrollemos un proyecto pero tal vez quieran estar al pendiente de nosotros. Además hay un formulario de suscripción al lado del menu que …

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

En Programador Novato vivimos de los anuncios, hemos detectado que está utilizando extensiones para bloquear anuncios. Ayudanos deshabilitando tu bloqueador de anuncios. :)