Skip to content

Latest commit

 

History

History
258 lines (191 loc) · 7.13 KB

intro.mdx

File metadata and controls

258 lines (191 loc) · 7.13 KB

import { Head } from 'mdx-deck' import { Appear } from 'mdx-deck' import { Split, FullScreenCode } from 'mdx-deck/layouts' import { CodeSurfer } from 'mdx-deck-code-surfer' import { Cover } from './components/cover' import { AboutUs } from './components/about-us' import { Demo } from './components/demo' import JSLayout from './components/jsLayout' import NodeLayout from './components/nodeLayout' import TerminalLayout from './components/terminalLayout' import CSSLayout from './components/cssLayout'

export { default as theme } from './theme'

<title>Front End Adventures - UND</title>

export default Split

Hola 👋 somos...

Front End Developers en UND

¿Qué me hace ser un buen Front End?

🤔

export default JSLayout

JavaScript

Si sabes bastante sobre esto, puedes tomar cualquier Framework y empezar a trabajar

Git and Github

Es muy importante debido a que cuando buscas trabajo es ahí donde ven qué tanto has investigado o aprendido.Es un buen filtro para mostrar tus skills y tener un portfolio.

export default NodeLayout

Node / NPM / Yarn

export default TerminalLayout

Terminal

  • Interactuar con la línea de comandos (CLI)

export default CSSLayout

CSS

Si puedes construir un layout desde cero, con ciertas características, que sea responsive, entonces se puede considerar que sabes CSS.

export default JSLayout

JavaScript Framework

Otros

  • Pruebas Unitarias (Jest, Jasmine, Mocha, etc).
  • Bundler (Webpack, Parcel, etc)
  • Gulp / Grunt
  • Canvas
  • SVG

You know... English

Aprender inglés

Demos inspiradoras

🦄🦄🦄
<iframe src="https://codepen.io/erikfloresq/full/cKgBy" style={{height: '100%'}}></iframe>

export default FullScreenCode

<CodeSurfer code={\/*BASIC SETUP ================================*\/ #the-screen #screen-03 img.left-forearm { position:relative; top:-5px; z-index:3333; } \/* SCREEN-03 SPIDERMAN ANIMATION SETUP ================================*\/ @-webkit-keyframes spiderman_forearm{ 0%{-webkit-transform:rotate(100deg);} 10%{-webkit-transform:rotate(100deg);} 20%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(0deg);} } \/* SCREEN-03 SPIDERMAN ANIMATION FUNCTION ================================*\/ #the-screen #screen-03 img.left-forearm { -webkit-animation-name:spiderman_forearm; -webkit-animation-duration:5s; -webkit-animation-iteration-count:1; -webkit-transform-origin:17px 0%; -webkit-animation-delay:15000ms; -webkit-animation-timing-function:ease-in-out; } \/* SCREEN-03 web ANIMATION SETUP ================================*\/ #the-screen #screen-03 .spiderman-leftarm .web { background:url(../img/03-web.jpg) no-repeat scroll -2px -1200px transparent; height:300px; left:10px; position:absolute; top:91px; width:5px; }} lang="css" />

<iframe src="https://codepen.io/wout/full/WpzNVE" style={{height: '100%'}}></iframe>
<iframe src="https://codepen.io/vineethtr/full/NxqKoY" style={{height: '100%'}}></iframe>

export default Split

Johnny5 - Electrónica con JS

export default Split

Animense hacer apps para ustedes

Enlaces de demos: