Este repositorio sirve como una guia para la clase de FE Dev - Vue Conforcat. Done estaremos apendiendo acerca de HTML, CSS3, Javascript, Vue & Supabase.

Creado con ❤️ por Diego Zito, Carlos Garrido & Aleix Abuli.

Quote of the class

"Qui no corre, vola"

Link a Zoom

Zoom Link

Collaborative Playlist - Ironship

Agregr sus canciones favoritas a esta playlist en spotify! Playlist

Estructura de Carpetas

• Html Basics
  • Basic Layout
  • Meta Tags
  • Typography, Headings, Paragraphs
  • Anchor Tags / Links
  • Images
  • Ordered & Unordered Lists
  • Semantic & Non Semantic Elements - Layout
  • Layout Example - Basic Website Structure
  • Html Tables
  • HTML Forms
• Css Basics
  • CSS Basics
  • CSS Selectors
  • Fonts
  • Text Properties
  • Colors
  • Borders & Backgrounds
  • Box Model
  • Layout - Floats
  • Links & Buttons
  • Menu Styling
  • Position
  • Inline vs Block
  • Media Queries
  • Media Queries Extended
  • Media Query Example
  • Flex Basics
  • Grid Basics
  • Grid Example - 01
  • Grid Example - 02
  • CSS Variables
  • Animations - Transitions
  • Animations - Keyframes
• JS Basics
  • Js Basics
  • Js Master File
  • Intro - console, document, console.log
  • Data Types
  • Variables
  • Operators
  • Conditionals
  • Functions
  • Loops
  • Array Methods
  • Dom Manipulation #1
  • Dom Manipulation #2
  • Dom Manipulation #3 - HTML
  • Browser Events
  • Event Excercises
  • Async
  • Fetch Api
• Vue JS
  • App.vue File - Point of entry
  • Main.js File - "Brain" of the project
  • Boiler Plate Component - Composition API
  • My First Vue Component
  • Text Interpolation
  • Text Directives
  • Html Directives
  • Attribute Binding v-bind directive
  • Conditional Rendering v-if v-else-if v-else directives and v-show directive
  • Iterating Through Elements - v-for directive
  • Methods
  • Computed Properties
  • Two Way Data Binding - Handling Forms and User Inputs
  • Watchers

Links de Ayuda

• CSS Frameworks
  • Tailwind CSS
• Chuletas
  • MASTER File
  • Markdown Cheatsheet
  • Git Cheatsheet
  • Html Cheatsheet
  • Css Cheatsheet
  • Javascript Cheatsheet
• Videos
  • Welcome to the Internet - Bo Burnham
• Icon Libraries
  • Font Awesome
  • The Noun Project
• Tools and Helpful Links
  • CSS Grid Generator
  • CSS Flex Generator
  • CSS Shadows
  • CSS Animations

Comandos de Git

Sigue estos pasos para hacer cambios en tu repositorio:

Para subir tus cambios al stream de git tienes que añadir tus cambios recientes mediante el siguiente comando:

Añadir todos tus cambios:

git add .

Añadir cambio individual por nombre de archivo:

git add "nombre de archivo ej: 01-bsaic-layout.html"

Añadirle un comentario al commit que estaremos empujando a tu repositorio en la web.

git commit -m "Texto descriptivo de los cambios recientes"

Empujar los cambios recientes a tu repositorio en la web. Extended.

git push origin "nombre del branch/rama que estaremos apuntando"

Empujar los cambios recientes a tu repositorio en la web. Simplified.

git push

Combinations

Combination #1 - Extended

Hace una combinacion de git add commit push usando estos comandos de git y usando un un operador logico AND con el syntax &&

git add . &&
git commit -m "Texto descriptivo de los cambios recientes" &&
git push origin "nombre del branch/rama que estaremos apuntando"

Combination #2 - Simplified

Hace una combinacion de git add commit push usando estos comandos de git y usando un un operador logico AND con el syntax &&

git add . &&
git commit -m "Texto descriptivo de los cambios recientes" &&
git push

Ver los branches asociados al repositorio.

git branch

Hacer un pull de los ultimos cambios de un repositorio git en gitHub a tu repo local

git pull origin "nombre del branch/rama que estaremos apuntando"

VUE Project Installation

VUE CLI

Para poder crear un projecto desde tu terminal solo tienes que seguir estos pasos:

npm init vue@latest

Sigue los pasos de este gif para que puedas instalar un proyecto sencillo de la ultima version de Vue que trabaja en conjunto con Vite. Una libreria de ayuda al framework.

Ver el video:

Para poder seleccionar entre YES o NO entre las varias opciones que te presenta el cli de Vue puedes moverte con tu teclado con las teclas de izq o der y elejir con la tecla de enter o return.