Beginner to Pro
Tailwind CSS - effortlessly build a tailwind css music festival site and learn to customize and extend tailwind css!
Lo que serás capaz de hacer
This course is has been updated to Tailwind CSS v4. Improve your skills and increase your value as a front end web developer by learning the ins and outs of Tailwind CSS! Tailwind CSS is a utility-first CSS framework packed with classes like flex , pt-4 , text-center and rotate-90 that can be composed to build any design, directly in your markup. No more trying to think of appropriate class names, no more creating wrapper classes and inner classes, no more wasting resources with unecessarily large CSS files. Tailwind CSS makes building designs incredibly fast and easy, not to mention has built-in optimisation out of the box. Not using a particular class in your HTML files? Then Tailwind CSS won't include it in the final build of your CSS! In this course we'll be creating a mobile-first landing page for a music festival website. We'll be covering layouts with flexbox and grid, Hero and Navbar components with menu and sub menu items, targeting different states like hover and focus states, targeting different screen sizes, and extending beyond Tailwind's built-in theme and classes. After getting comfortable with Tailwind CSS's utility classes, we'll be creating our own base, utility, and component classes! This course is packed with an incredible amount of value in such a short amount of time! Increase your value as a front end web developer today by learning a more advanced way of styling your websites using Tailwind CSS.
- Increase your value as a front end web developer
- Build a landing page with Tailwind CSS
- Extend the default Tailwind CSS theme and customize tailwind css
- Create custom animations with Tailwind CSS
Temario
UNIDAD 1 - V4 - Introduction & Project Setup · 7 leccionesUNIDAD 1 - V4 - Introduction & Project Setup
UNIDAD 1 - V4 - Introduction & Project Setup
- Introduction and Tailwind CSS project demo
- Important! Read this before you begin the course! (GitHub repo etc)
- Editor setup for Tailwind CSS
- Udemy ratings & reviews
- Tailwind CSS project setup
- Tailwind CSS overview
- How to get help in this course
UNIDAD 2 - V4 - Build the navbar · 9 leccionesUNIDAD 2 - V4 - Build the navbar
UNIDAD 2 - V4 - Build the navbar
- Create the navbar and logo (spacing, flexbox & gradients in Tailwind)
- Apply Google Fonts to Tailwind CSS project
- Create the first menu item, add classes on hover, & add transitions
- Finish the menu items, editing techniques, & Tailwind CSS components
- Create the sub menu items & use Tailwind CSS group functionality
- Create the mobile menu icon
- Animate mobile menu icon & create custom Tailwind CSS variant
- Extend Tailwind CSS custom open variant & implement mobile menu functionality
- Implement mobile sub menu with custom peer open Tailwind CSS variant
UNIDAD 3 - V4 - Build the hero section · 4 leccionesUNIDAD 3 - V4 - Build the hero section
UNIDAD 3 - V4 - Build the hero section
- Create the Hero section and background image
- Add the hero content
- Create the waveform logo animation in Tailwind CSS
- Create custom animation delay Tailwind CSS utility class
UNIDAD 4 - V4 - Build the headliners and carousel section · 3 leccionesUNIDAD 4 - V4 - Build the headliners and carousel section
UNIDAD 4 - V4 - Build the headliners and carousel section
- Default base styles in Tailwind CSS for headings
- Create a scrollable & snappable carousel in Tailwind CSS
- Add left and right arrows to the carousel
UNIDAD 5 - V4 - Light and dark mode · 2 leccionesUNIDAD 5 - V4 - Light and dark mode
UNIDAD 5 - V4 - Light and dark mode
- Implement light & dark mode based on local machine settings in Tailwind CSS
- Implement Tailwind CSS light & dark mode with toggle button
UNIDAD 6 - V4 - Build the tickets & lineup timeline sections · 3 leccionesUNIDAD 6 - V4 - Build the tickets & lineup timeline sections
UNIDAD 6 - V4 - Build the tickets & lineup timeline sections
- Create the tickets table
- Start the lineup timeline (with advanced background gradients in Tailwind CSS)
- Finish the lineup timeline
UNIDAD 7 - V4 - Extras · 6 leccionesUNIDAD 7 - V4 - Extras
UNIDAD 7 - V4 - Extras
- Size utility class name for equal height and width in Tailwind
- Gradient text colors in Tailwind CSS
- Advanced custom Tailwind CSS utility class names
- Advanced layouts with container in Tailwind CSS
- Upload code to github and deploy to vercel
- BONUS!
Tu certificado lo emite la SEP, no solo una plataforma
Al demostrar la competencia recibes un certificado emitido por la Secretaría de Educación Pública a través del Gobierno del Estado de México: un documento oficial que puedes presentar con confianza ante cualquier empleador o institución.
Tu certificado con INEC
- Lo emite la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México
- Documento oficial con folio verificable en línea
- Lo otorga la Universidad Tecnológica Fidel Velázquez
Otras plataformas en línea
- Constancia privada emitida por la misma plataforma
- Solo acredita horas cursadas o asistencia
- Sin respaldo de una autoridad educativa
Tu itinerario, de la inscripción al certificado
- 1
Inscripción con pago único
Pagas $2,800 MXN una sola vez y entras de inmediato al curso.
- 2
Estudias a tu ritmo
7 unidades con videos, lecturas y actividades, disponibles 24/7 durante 12 meses.
- 3
Cuestionarios por unidad
Cuestionarios para comprobar lo aprendido.
- 4
Certificado
Emitido por la SEP a través del Gobierno del Estado de México, con folio verificable.
Un certificado oficial de la SEP
Muestra · verificable por folio y QR
- Emitido por la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México. No es una constancia privada: es un documento oficial, y ese respaldo marca la diferencia frente a otras plataformas en línea.
- Contenido impartido por Tom Phillips.
- Folio y QR verificables para compartirlo con quien te contrate.
Empieza hoy, a tu ritmo
Un solo pago y acceso inmediato al curso completo durante 12 meses.
- 7 unidades · 34 lecciones · 35 h
- 12 meses de acceso
- Certificado emitido por la SEP (Gob. del Estado de México) con folio verificable
Sobre tu inscripción
¿Cómo es el pago?
Un solo pago de $2,800 MXN. No hay mensualidades ni cargos recurrentes.
¿Cuánto tiempo tengo acceso?
12 meses desde tu inscripción, 24/7, para avanzar a tu ritmo.
¿Quién imparte el contenido?
El curso es impartido por Tom Phillips; INEC gestiona tu inscripción, evaluación y certificado.
¿Qué pasa cuando vence mi acceso?
Puedes renovar tu cuenta tú mismo desde la plataforma, sin trámites ni esperas.
