2 lines
36 KiB
HTML
2 lines
36 KiB
HTML
<!doctype html><html lang="es" itemscope itemtype="https://schema.org/Article"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>GUÍA DE PREGUNTAS PARA ENTREVISTAS DE TRABAJO ★ Front-end Developer Interview Questions</title><meta name="description" content="A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore."><meta name="keywords" content="front-end, interview questions, css questions, js questions, html questions, performance questions, interview test"><meta name="author" content="Front-end Developer Interview Questions"><meta itemprop="author" content="Front-end Developer Interview Questions"><meta itemprop="name" content="GUÍA DE PREGUNTAS PARA ENTREVISTAS DE TRABAJO ★ Front-end Developer Interview Questions"><meta itemprop="description" content="A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore."><meta itemprop="image" content="https://h5bp.org/Front-end-Developer-Interview-Questions//assets/images/og-image.png"><meta property="og:title" content="GUÍA DE PREGUNTAS PARA ENTREVISTAS DE TRABAJO ★ Front-end Developer Interview Questions"><meta property="og:description" content="A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore."><meta property="og:url" content="https://h5bp.org/Front-end-Developer-Interview-Questions//translations/spanish/"><meta property="og:site_name" content="Front-end Developer Interview Questions"><meta property="og:image" content="https://h5bp.org/Front-end-Developer-Interview-Questions//assets/images/og-image.png"><meta property="og:type" content="website"><meta property="og:locale" content="en_US"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="GUÍA DE PREGUNTAS PARA ENTREVISTAS DE TRABAJO ★ Front-end Developer Interview Questions"><meta name="twitter:description" content="A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore."><meta name="twitter:site" content="@h5bp"><meta name="twitter:image" content="https://h5bp.org/Front-end-Developer-Interview-Questions//assets/images/og-image.png"><meta name="twitter:creator" content="@h5bp"><link type="image/png" rel="apple-touch-icon" href="https://h5bp.org/Front-end-Developer-Interview-Questions//assets/images/apple-touch-icon.png"><link type="image/png" sizes="32x32" rel="icon" href="https://h5bp.org/Front-end-Developer-Interview-Questions//assets/images/favicon-32x32.png"><link type="image/png" sizes="16x16" rel="icon" href="https://h5bp.org/Front-end-Developer-Interview-Questions//assets/images/favicon-32x32.png"><link type="image/png" color="#181818" rel="mask-icon" href="https://h5bp.org/Front-end-Developer-Interview-Questions//assets/images/favicon-96x96.png"><meta name="mobile-web-app-capable" content="yes"><meta name="robots" content="index,follow"><script>console.log(page.lang)</script><style>code[class*=language-],pre[class*=language-]{color:#c5c8c6;text-shadow:0 1px rgba(0,0,0,.3);font-family:Inconsolata,Monaco,Consolas,'Courier New',Courier,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#370b44}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#7c7c7c}.token.punctuation{color:#c5c8c6}.namespace{opacity:.7}.token.keyword,.token.property,.token.tag{color:#96cbfe}.token.class-name{color:#ffffb6;text-decoration:underline}.token.boolean,.token.constant{color:#9c9}.token.deleted,.token.symbol{color:#f92672}.token.number{color:#ff73fd}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a8ff60}.token.variable{color:#c6c5fe}.token.operator{color:#ededed}.token.entity{color:#ffffb6}.token.url{color:#96cbfe}.language-css .token.string,.style .token.string{color:#87c38a}.token.atrule,.token.attr-value{color:#f9ee98}.token.function{color:#dad085}.token.regex{color:#e9c062}.token.important{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}:root{--font-family-heading:sans-serif;--font-family-body:Georgia,serif;--font-family-code:Menlo,Monaco,'Courier New',monospace;--color-primary:#835EFF;--color-secondary:#FF008D;--color-safe:#8338EC;--color-gradient:linear-gradient(to right, var(--color-primary), var(--color-secondary));--color-highlight:var(--color-primary);--color-gray-opacity:rgba(39,39,39,0.04);--color-heading:#23231A;--color-text:#23231A;--background-default:#F9F9F9;--border-radius-default:5px;--box-shadow-default:0 2rem 4rem rgba(0,0,0,.15);--transition-duration:0.27s}body.rtl{--font-family-body:Arial,Helvetica,sans-serif}*{margin:0;padding:0;box-sizing:border-box;outline-color:var(--color-primary)}::selection{background:var(--color-primary);color:var(--background-default)}::-moz-selection{background:var(--color-primary);color:var(--background-default)}.nav{padding:1rem 0;position:relative;font-family:var(--font-family-heading)}.nav li{word-wrap:none;white-space:nowrap}.navigation{list-style:none;display:flex;flex-wrap:wrap;font-size:1rem}.navigation-questions-label{margin-right:auto}@media (min-width:60em){.navigation-questions-label{margin-right:0}}.navigation-toggle{display:inline-block;appearance:none;border:0;font-size:1rem;font-weight:600;cursor:pointer;background:0 0}.navigation-toggle::after{content:'\25BE';padding-left:.3rem;display:inline-block;font-size:1.2rem;font-weight:700;color:var(--color-primary);transform-origin:center}.navigation-toggle:active::after,.navigation-toggle:focus::after,.navigation-toggle:hover::after{color:var(--color-secondary)}.navigation.open .navigation-toggle::after{transform:scaleY(-1) translateY(-.25em)}@media (min-width:60em){.navigation-toggle{color:var(--color-text);pointer-events:none;cursor:default}.navigation-toggle::after{display:none}}.navigation-questions-list{padding:.5rem 1rem;display:flex;flex-direction:column;position:absolute;top:calc(100% - 1rem);left:0;z-index:1;opacity:0;transform:scale(.5,0);transform-origin:center top;transition:opacity .1s,transform .2s ease-out;background-color:#fff;box-shadow:0 0 0 1px var(--color-secondary),0 2px 4px -1px var(--color-text)}.navigation.open .navigation-questions-list{opacity:1;transform:none}.navigation.no-motion .navigation-questions-list{transition:none}@media (min-width:60em){.navigation-questions-list{padding:0;flex-direction:row;position:static;opacity:1;transform:none;transition:none;background-color:transparent;box-shadow:none}.navigation-questions-list li{margin:0}}.navigation-questions-anchor{visibility:hidden}.navigation.open .navigation-questions-anchor{visibility:visible}@media (min-width:60em){.navigation-questions-anchor{visibility:visible}}.navigation-item-emoji{width:100%;font-size:1rem;line-height:1rem;padding-bottom:1.5rem;margin-bottom:1.5rem;vertical-align:top;align-content:flex-start;border-bottom:1px solid #efefef}.navigation-item-home{border-bottom:none;padding-bottom:0;font-weight:600}@media (min-width:60em){.navigation-item-emoji{width:50%;margin-bottom:2rem;border-bottom:1px solid #efefef}}.navigation-item-emoji em{font-style:normal;margin-right:.5rem}.navigation-item-translations{text-align:left}@media (min-width:60em){.navigation-item-translations{text-align:right}}.navigation-item-home em{color:#835eff}.navigation-item-emoji a{text-decoration:none;display:inline-block;vertical-align:middle}@media (min-width:60em){.navigation-item:not(:last-of-type){margin-right:.8rem}}.navigation-anchor[rel~=external]::after{content:' ➚';color:var(--color-highlight)}.navigation-anchor.current{border-bottom:2px solid var(--color-highlight);padding:0 0 5px 0}.topbar{width:100%;height:.18rem;background:var(--color-gradient)}.skip-link{position:absolute;top:0;left:0;padding:.5rem 1rem;background-color:var(--color-primary);color:#fff;text-decoration:none;transform:translateY(-100%)}.skip-link:focus{transform:none}.header{margin-bottom:2rem}.header-big-title{font-size:2.3rem;line-height:1.06;margin:1.4rem 0 .7rem;color:var(--color-primary);word-break:break-word}.rtl .header-big-title{text-align:right}@media (min-width:30em){.header-big-title{margin:1.4rem 0 .7rem;font-size:4.6rem}}@media (min-width:60em){.header-big-title{margin:2.1rem 0 .7rem;font-size:5.4rem}}@supports (mix-blend-mode:lighten){.header-big-title{display:inline-block;position:relative;color:#000;background:#fff;mix-blend-mode:multiply}.header-big-title::before{content:'';display:block;position:absolute;top:0;right:0;bottom:0;left:0;background-image:url('https://h5bp.github.io/Front-end-Developer-Interview-Questions/assets/images/gradient.svg');background-size:cover;pointer-events:none}.header-big-title::before{mix-blend-mode:screen}}.header-heading{font-size:2.3rem;text-transform:uppercase}.header-big-description{font-size:1.2rem;line-height:1.4;padding:1rem 0}@media (min-width:30em){.header-big-description{font-size:1.5rem}}@media (min-width:60em){.header-big-description{font-size:1.8rem}}.header-description{padding-top:1rem}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--font-family-body);font-weight:400;font-size:1.2rem;line-height:2;color:var(--color-text)}section+section{padding-top:2rem}h1,h2,h3,h4,h5,h6{font-family:var(--font-family-heading);color:var(--color-heading);font-style:normal;line-height:1.2;font-weight:600}section+section{padding-top:2rem}a{color:inherit;text-decoration:none;color:var(--color-secondary);transition:color ease-out var(--transition-duration)}a.current,a:focus:not(.skip-link),a:hover:not(.skip-link){color:var(--color-primary)}a:not(.navigation-anchor)[rel~=external]:after{content:' ➚'}ul:not(.navigation):not(.inline-list){list-style:none}ul:not(.navigation):not(.inline-list) li::before{content:"\25A0";color:var(--color-primary);font-weight:700;display:inline-block;width:1em;margin-left:-1em}.rtl ul:not(.navigation):not(.inline-list) li::before{margin-right:-1em;margin-left:initial}li{margin-bottom:.6rem}b,strong{font-weight:600}time{display:inline-block;color:var(--color-gray-70)}[tabindex='-1']{outline:0}img,svg{vertical-align:middle}img{display:block;max-width:100%;border-radius:var(--border-radius-default)}code{font-family:var(--font-family-code);color:var(--color-code);font-style:normal;font-size:1rem}blockquote:not([class]){padding-left:1rem;margin-left:-1rem;border-left:2px solid var(--color-primary);color:var(--color-gray-70);font-style:italic}code[class*=language-],pre[class*=language-]{font-size:.9rem;font-style:normal}p+pre[class*=language-]{margin-bottom:1.8rem}mark{color:var(--color-highlight);background-color:transparent}dt{font-weight:700}dd+dt{padding-top:.5rem}abbr[title],acronym[title]{background:var(--color-gray-opacity);border:1px solid var(--color-gray-opacity);cursor:help}.container{max-width:66rem;padding:1.5rem 2rem 2rem;margin-right:auto;margin-left:auto}@media (min-width:30rem){.container{padding:3rem 4rem 4rem}}.content li:not(:last-of-type){margin-bottom:1.2rem}.content h2{max-width:33rem}.content>:not(:last-child){margin-bottom:2rem}.content :not(hr)+h2,.content :not(hr)+h3{padding-top:1rem}.content ol:not(.inline-list),.content ul:not(.inline-list){padding-left:1.2rem}.content-simple li:not(:last-of-type){margin-bottom:.5rem}.content-edit{text-align:right;margin-top:2rem}.inline-list{padding:0;list-style:none;display:flex;flex-wrap:wrap}.inline-list li{padding:0 5px;display:inline-block;vertical-align:middle;text-align:center}.inline-list li::before{content:'';margin-left:0}.inline-list li img{display:block;margin:auto;margin-bottom:.6rem}.inline-list li a{display:inline-block;vertical-align:middle;margin:0 .15rem}.inline-list-contributors li a,.inline-list-original li a{font-size:1rem}.avatar{max-width:12rem}hr{border:none;bacground:none;border-bottom:1px solid #efefef}.footer{padding-top:3rem}.footer-text{font-size:.8rem}</style></head><body class=""><div class="topbar"></div><div class="container"><a class="skip-link" href="#main-content">Skip to main content</a><nav class="nav"><ul class="navigation" id="navigation"><li class="navigation-item-emoji navigation-item-home"><a class="navigation-anchor" href="/Front-end-Developer-Interview-Questions/" title="Home"><em>★</em><span>Front-end Developer Interview Questions</span></a></li><li class="navigation-item-emoji navigation-item-translations"><a class="navigation-anchor" href="/Front-end-Developer-Interview-Questions/translations" title="Translations"><em>🌐</em><span>Translations</span></a></li><li class="navigation-item navigation-questions-label"><button class="navigation-toggle" id="navigation-toggle">Questions:</button></li><li class="navigation-item navigation-questions"><ul class="navigation navigation-questions-list"><li class="navigation-item"><a class="navigation-anchor navigation-questions-anchor" href="/Front-end-Developer-Interview-Questions/questions/general-questions/" title="General Questions">General</a></li><li class="navigation-item"><a class="navigation-anchor navigation-questions-anchor" href="/Front-end-Developer-Interview-Questions/questions/html-questions/" title="HTML Questions">HTML</a></li><li class="navigation-item"><a class="navigation-anchor navigation-questions-anchor" href="/Front-end-Developer-Interview-Questions/questions/css-questions/" title="CSS Questions">CSS</a></li><li class="navigation-item"><a class="navigation-anchor navigation-questions-anchor" href="/Front-end-Developer-Interview-Questions/questions/javascript-questions/" title="JavaScript Questions">JavaScript</a></li><li class="navigation-item"><a rel="external noreferrer noopener" target="_blank" class="navigation-anchor navigation-questions-anchor" href="https://scottaohara.github.io/accessibility_interview_questions/" title="Accessibility Questions (external link)">A11y</a></li><li class="navigation-item"><a class="navigation-anchor navigation-questions-anchor" href="/Front-end-Developer-Interview-Questions/questions/testing-questions/" title="Testing Questions">Testing</a></li><li class="navigation-item"><a class="navigation-anchor navigation-questions-anchor" href="/Front-end-Developer-Interview-Questions/questions/performance-questions/" title="Performance Questions">Performance</a></li><li class="navigation-item"><a class="navigation-anchor navigation-questions-anchor" href="/Front-end-Developer-Interview-Questions/questions/network-questions/" title="Network Questions">Network</a></li><li class="navigation-item"><a class="navigation-anchor navigation-questions-anchor" href="/Front-end-Developer-Interview-Questions/questions/coding-questions/" title="Coding Questions">Coding</a></li><li class="navigation-item"><a class="navigation-anchor navigation-questions-anchor" href="/Front-end-Developer-Interview-Questions/questions/fun-questions/" title="Fun Questions">Fun</a></li></ul></li></ul></nav><main id="main-content" tabindex="-1"><header class="header"><h1 class="header-big-title">GUÍA DE PREGUNTAS PARA ENTREVISTAS DE TRABAJO</h1></header><div class="content"><h1>GUÍA DE PREGUNTAS PARA ENTREVISTAS DE TRABAJO</h1><p>Este repositorio contiene preguntas de entrevistas a programadores front-end, que pueden ser usadas para revisar a candidatos potenciales. Bajo ningún concepto se recomienda usar todas las preguntas aquí expuestas con el mismo candidato (eso llevaría horas). Escoger algunos elementos de esta lista debería ayudarle a revisar las habilidades que requiere.</p><p><strong>Nota:</strong> Tenga en mente que muchas de estas preguntas son abiertas y pueden llevar a interesantes discusiones que le pueden decir más sobre las capacidades de la persona que una simple respuesta.</p><h2 id="%C3%ADndice" tabindex="-1"><a class="header-anchor" href="#%C3%ADndice"></a> Índice</h2><ol><li><a href="#general">Preguntas generales</a></li><li><a href="#html">Preguntas específicas de HTML</a></li><li><a href="#css">Preguntas específicas de CSS</a></li><li><a href="#js">Preguntas específicas de JavaScript</a></li><li><a href="#codigojs">Preguntas de código</a></li><li><a href="#testing">Preguntas sobre pruebas de código</a></li><li><a href="#performance">Preguntas sobre rendimiento</a></li><li><a href="#network">Preguntas sobre conectividad</a></li><li><a href="#divertidas">Preguntas divertidas</a></li></ol><h2 id="contribuyendo" tabindex="-1"><a class="header-anchor" href="#contribuyendo"></a> Contribuyendo</h2><ol><li><a href="#contribuyentes">Contribuyentes</a></li><li><a href="https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/CONTRIBUTING.md">Cómo contribuir</a></li><li><a href="https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/LICENSE.md">Licencia</a></li></ol><h4><a name="general">Preguntas generales:</a></h4><ul><li>¿Qué aprendió ayer/esta semana?</li><li>¿Qué es lo que le entusiasma o le interesa de la programación?</li><li>¿Podría describir algún problema técnico que haya resuelto recientemente y cómo lo resolvió?</li><li>¿Podría describir algunas técnicas que haya utilizado al momento de construir un nuevo sitio web o dar mantenimiento a uno existente para incrementar su rendimiento?</li><li>¿Podría explicar algunas prácticas o técnicas de SEO que haya utilizado recientemente?</li><li>¿Qué puede decir acerca de técnicas comunes o problemas que haya resuelto recientemente respecto a la seguridad de aplicaciones front-end?</li><li>¿Qué acciones ha realizado en proyectos recientes para mejorar la manteniabilidad de su código?</li><li>Hable acerca de tu ambiente de desarrollo preferido.</li><li>¿Puede describir el proceso que sigue cuando crea una página web?</li><li>¿Qué sistemas de control de versiones ha utilizado?</li><li>¿Podría describir el proceso que sigue cuando creas una página web?</li><li>Si tuviera cinco hojas de estilo distintas, ¿cómo las integraría a su página web?</li><li>¿Puede describir la diferencia entre <em>“Progressive Enhancement”</em> y <em>“Graceful Degradation”</em>?</li><li>¿Cómo optimizaría los recursos de un sitio web?</li><li>¿Cuántos recursos se pueden descargar simultáneamente de un mismo dominio?</li><li>¿Cuáles son las excepciones?</li><li>Mencione tres formas para disminuir el tiempo de carga de una página (tiempo real o percibido).</li><li>Si se ha unido a un proyecto y los desarrolladores usan tabs y usted usa espacios, ¿qué hace?</li><li>Describa como elaboraría una página con una galería sencilla.</li><li>Si pudiera elegir una tecnología para dominar este año, ¿cuál sería?</li><li>Explique la importancia de estándares y los grupos que los definen.</li><li>¿Sabe que es el <em>Flash Of Unstyled Content</em>?, ¿cómo lo evita?</li><li>Explique qué son las <em>Aplicaciones de internet enriquecidas y accesibles</em> y los lectores de pantalla, además de cómo hacer una página web accesible</li><li>Explique las ventajas y desventajas de usar animaciones en CSS en comparación con animaciones hechas con JavaScript.</li><li>¿Qué significa <em>CORS</em> y a qué problema está relacionado?</li><li>¿Cómo manejaría una discrepancia con su jefe o compañero de trabajo?</li><li>¿Qué recursos usa para aprender acerca de las últimas novedades en desarrollo web y diseño?</li><li>¿Cuáles cree que son las habilidades necesarias para ser un buen desarrollador front-end?</li><li>¿En qué rol le gustaría desempeñarse?</li><li>Explique la diferencia entre <em>cookies</em>, <em>session storage</em> y <em>local storage</em>.</li><li>¿Podría explicar qué sucede cuando ingresa una URL en el navegador?</li><li>¿Cuál es la diferencia entre <em>SSR</em> y <em>CSR</em>? Hable acerca de los pros y contras de cada uno.</li><li>¿Está familiarizado con el concepto de <em>Static Rendering</em>?</li><li>¿Qué puede decir acerca de la re-hidratación?</li></ul><h4><a name="html">Preguntas específicas de HTML:</a></h4><ul><li>¿Qué función cumple el <code>doctype</code>?</li><li>¿Cómo distribuiría una página con contenido en varios lenguajes?</li><li>¿Qué consideraciones se deben tener cuando se diseñan/desarrollan sitios multi-lenguajes?</li><li>¿Para qué son buenos los atributos <code>data-</code>?</li><li>Si consideramos HTML5 como una plataforma web abierta, ¿cuáles son los componentes que constituyen HTML5?</li><li>Describa la diferencia entre <code>cookies</code>, <code>sessionStorage</code> y <code>localStorage</code>.</li><li>Describa la diferencia entre <code><script></code>, <code><script async></code> y <code><script defer></code>.</li><li>Generalmente, ¿por qué es una buena idea agregar la etiqueta <code><link></code> dentro de la etiqueta <code><head></code> y la etiqueta <code><script></code> justo antes de cerrar la etiqueta <code><body></code>. ¿Conoces algún caso excepcional?</li><li>¿Qué es el renderizado progresivo?</li><li>¿Por qué usaría el atributo <code>srcset</code> en una imagen? Explique el proceso que sigue el navegador al evaluar el contenido de este atributo.</li><li>¿Ha usado algún lenguaje de plantillas HTML?</li><li>¿Cuál es la diferencia entre los elementos <code>canvas</code> y <code>svg</code>?</li><li>¿Qué son los elementos vacíos en HTML?</li></ul><h4><a name="css">Preguntas específicas de CSS:</a></h4><ul><li>¿Qué es la especificidad de los selectores CSS y cómo funciona?</li><li>¿Cuál es la diferencia entre normalizar y resetear el CSS?, ¿Cuál elegiría y por qué?</li><li>Describa qué son los “floats” y su funcionamiento.</li><li>Describa el <code>z-index</code> y como se decide el contexto de apilado de elementos.</li><li>Describa el contexto de formato de bloques (<em>BFC</em>) y como funciona.</li><li>¿Cuáles son las técnicas para usar la propiedad <code>clear</code> y en qué contexto es apropiado utilizar cada una?</li><li>¿Cuál es su enfoque al desarrollar páginas que dan soporte a navegadores con capacidades limitadas?</li><li>¿Qué técnicas o procesos utiliza?</li><li>¿Cuáles son las distintas formas para esconder contenido, pero mantenerlo disponible únicamente para lectores de pantalla?</li><li>¿Ha usado algún sistema para cuadrículas (grids) y cuál prefiere?</li><li>¿Ha usado o implementado “media queries” o reglas específicas para dispositivos móviles?</li><li>¿Está familiarizado con aplicar estilos a SVGs?</li><li>¿Podría dar un ejemplo de una propiedad <code>@media</code> distinta a <code>screen</code>?</li><li>¿Cuáles son algunos de los “trucos” para escribir CSS eficiente?</li><li>¿Cuáles son las ventajas y desventajas de utilizar pre-procesadores CSS?</li><li>Mencione lo que le agrada y desagrada de los pre-procesadores que ha usado.</li><li>¿Cómo implementaría un diseño que usa fuentes que no son web-safe?</li><li>¿Puede explicar cómo determina un navegador qué elementos coinciden con un selector de CSS?</li><li>Describa los pseudo-elementos y discuta sus usos.</li><li>¿Puede explicar cómo entiende el <code>box model</code> (modelo de cajas) y como podría, mediante CSS, hacer que un navegador renderize su esquema usando diferentes modelos de cajas?</li><li>¿Qué sucede al usar <code>* {box-sizing: border-box;}</code>. ¿Qué desventajas supone su uso?</li><li>¿Qué es la propiedad <code>display</code> de CSS? ¿Podría dar algunos ejemplos de su uso?</li><li>¿Cuál es la diferencia entre <code>inline</code> y <code>inline-block</code>?</li><li>¿Cuál es la diferencia entre los selectores <code>nth-of-type()</code> y <code>nth-child()</code>?</li><li>¿Cuál es la diferencia entre las posiciones <code>relative</code>, <code>fixed</code>, <code>absolute</code> y <code>static</code> para un elemento dado?</li><li>¿Cuáles frameworks de CSS has usado en desarrollo o producción? ¿Cómo los mejoraría?</li><li>¿Ha utilizado CSS Grid?</li><li>¿Podría explicar la diferencia entre desarrollar un sitio web para ser <em>responsive</em> y utilizar una estrategia <em>mobile-first</em>?</li><li>¿Ha trabajado con tecnología retina?, ¿qué técnicas utilizó?</li><li>¿Hay alguna razón por la cual preferiría usar <code>translate()</code> en vez de el posicionamiento absoluto? ¿Alguna razón para hacer lo contrario?</li><li>¿En qué casos es útil la propiedad <code>clearfix</code> de css?</li><li>¿Cuál es ls diferencia entre usar px, em o rem para definir tamaños de fuente?</li><li>¿Podría dar un ejemplo de una pseudo-clase de CSS y un posible caso de uso?</li><li>¿Cuál es la diferencia entre un elemento a nivel de bloque y un elemento en línea? Mencione algunos ejemplos de cada tipo de elemento.</li><li>¿Cuál es la diferencia entre CSS Grid y Flexbox? ¿En qué casos preferiría usar uno sobre el otro?</li></ul><h4><a name="js">Preguntas específicas de JavaScript:</a></h4><ul><li>Explique el “<em>event delegation</em>”.</li><li>Explique cómo funciona <code>this</code> en JavaScript.</li><li>¿Puede dar un ejemplo de una de las maneras en que trabajar con <code>this</code> ha cambiado desde ES6?</li><li>Explique cómo funciona la herencia de prototipos (prototypal inheritance) en JavaScript.</li><li>¿Cuál es la diferencia entre variables <code>null</code>, <code>undefined</code> y <code>undeclared</code>?</li><li>¿Cómo comprobarías que una variable refiere a alguno de esos valores?</li><li>¿Qué es un “<em>closure</em>” y cuando, o por qué usaría uno?</li><li>¿Qué características del lenguaje puede utilizar para iterar sobre propiedades de un objeto y elementos de un arreglo?</li><li>¿Podría describir cuál es la principal diferencia entre el ciclo <code>Array.forEach()</code> y el método <code>Array.map()</code> y por qué elegiría uno sobre el otro?</li><li>¿Puede hablar de un uso típico para una función anónima?</li><li>¿Cuál es la diferencia entre objetos huésped (host objects) y objetos nativos?</li><li>¿Cuál es la diferencia entre: <code>function Person(){}</code>, <code>var person = Person()</code> y <code>var person = new Person()</code>?</li><li>Esplique las diferencias entre el uso de <code>foo</code> en <code>function foo(){}</code> y <code>var foo = function(){}</code>.</li><li>¿Qué hacen <code>Function.call</code> y <code>Function.apply</code>? ¿Cuál es la diferencia más notable entre las dos?</li><li>¿Puede explicar el uso de <code>Function.prototype.bind</code>?</li><li>¿Cuál es la diferencia entre detección de capacidades, inferencia de capacidades y usar la cadena del user agent?.</li><li>¿Puede explicar en qué consiste el “<em>hoisting</em>”?</li><li>¿Qué es la coerción de tipos? ¿Cuáles son los errores más comunes al utilizarla en JavaScript?</li><li>¿Puede hablar sobre “<em>event bubbling</em>”?</li><li>Describa qué es "<em>event capturing"</em>.</li><li>¿Cuál es la diferencia entre un atributo y una propiedad?</li><li>¿Cuáles son los pros y contras de extender objetos nativos de JavaScript?</li><li>¿Cuál es la diferencia entre <code>==</code> y <code>===</code>?</li><li>Explique la política de mismo origen (same-origin policy) y sus repercusiones en JavaScript.</li><li>¿Por qué reciben el nombre de sentencias ternarias? ¿Qué significa la palabra “<em>ternaria</em>”?</li><li>¿Qué es <code>"use strict";</code>? ¿Cuáles son las ventajas y desventajas de usarlo?</li><li>Mencione las ventajas y desventajas de escribir Javascript a través de otro lenguaje que transpile a Javascript.</li><li>¿Qué herramientas y técnicas usa para depurar código Javascript?</li><li>Explique la diferencia entre objetos mutables y objetos inmutables.</li><li>Mencione un ejemplo de un objeto inmutable en javascript.</li><li>Mencione las ventajas y desventajas de la inmutabilidad.</li><li>¿Cómo puede usar la inmutabilidad en su código?</li><li>Explique la diferencia entre funciones síncronas y asíncronas.</li><li>¿Qué es el <code>event loop</code>?</li><li>¿Cuál es la diferencia entre la pila de llamadas y la cola de tareas?</li><li>¿Cuáles son las diferencias entre variables declaradas usando <code>let</code>, <code>var</code> o <code>const</code>?</li><li>¿Cuáles son las diferencias entre los constructores de clases de ES6 y los constructores de funciones de ES5?</li><li>¿Podría mencionar un caso de uso para la nueva sintaxis de funciones flecha (<em>“arrow functions”</em>) <code>=></code>? ¿Qué diferencia tiene respecto a las funciones tradicionales?</li><li>¿Qué ventaja tiene utilizar la sintaxis de funciones flecha (<em>“arrow functions”</em>) para un método en un constructor?</li><li>Defina qué es una función de orden superior (<em>“higher order function”</em>).</li><li>¿Podría dar un ejemplo de desestructuración (<em>“destructuring”</em>) de un objeto o arreglo?</li><li>¿Cómo se puede generar un string con los <em>template literals</em> de ES6?</li><li>¿Podría dar un ejemplo de una función curry? ¿Qué ventajas tiene usarla?</li><li>¿Cuáles son los beneficios de usar el operador <code>spread</code> y cómo se diferencia del operador <code>rest</code>?</li><li>¿De qué manera puede compartir código entre archivos?</li><li>¿Por qué necesitaría crear un miembro estático en una clase?</li><li>¿Cuál es la diferencia entre los ciclos <code>while</code> y <code>do-while</code> en JavaScript?</li><li>¿Qué es una promesa? ¿En qué casos y cómo usaría una?</li><li>¿Cómo podría utilizar los principios de la programación orientada a objetos en JavaScript?</li></ul><h4><a name="codigojs">Preguntas sobre código:</a></h4><ul><li>Haga que este código funcione:</li></ul><pre class="language-javascript"><code class="language-javascript"><span class="token function">duplicate</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// [1,2,3,4,5,1,2,3,4,5]</span></code></pre><ul><li>Haga un ciclo <code>for</code> de <code>100</code> iteraciones que imprima <strong>“fizz”</strong> en los múltiplos de <code>3</code>, <strong>“buzz”</strong> en los múltiplos de <code>5</code> y <strong>“fizzbuzz”</strong> en los múltiplos de <code>3</code> y <code>5</code></li><li>¿Cuál será el retorno de cada uno de los siguientes códigos?</li></ul><pre class="language-javascript"><code class="language-javascript">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"hello"</span> <span class="token operator">||</span> <span class="token string">"world"</span><span class="token punctuation">)</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"foo"</span> <span class="token operator">&&</span> <span class="token string">"bar"</span><span class="token punctuation">)</span></code></pre><ul><li>Escriba una función auto-invocada (“<em>IIFE</em>”)</li></ul><h4><a name="testing">Preguntas sobre pruebas de código:</a></h4><ul><li>Menciona ventajas y desventajas de realizar pruebas en el código</li><li>¿Qué herramientas usarías para probar la funcionalidad de tu código?</li><li>¿Cuál es la diferencia entre una prueba unitaria y una prueba funcional o de integración?</li><li>¿Cuál es el propósito de usar herramientas para verificar los estilos usados en el código?</li><li>¿Cuáles son algunas de las mejores prácticas al realizar pruebas?</li></ul><h4><a name="performance">Preguntas sobre rendimiento:</a></h4><ul><li>¿Qué herramientas usarías para detectar un error en el rendimiento de tu código?</li><li>¿De qué formas podrías mejorar el rendimiento del scrolling en tu sitio web?</li><li>Menciona las diferencias entre los términos <code>layout</code>, <code>painting</code> y <code>compositing</code>.</li></ul><h4><a name="network">Preguntas sobre redes:</a></h4><ul><li>Tradicionalmente, ¿Por qué es mejor servir los recursos estáticos del sitio desde múltiples dominios?</li><li>Intenta explicar el proceso desde el momento en el cual ingresas una URL en el navegador hasta que termina de cargar la página en tu pantalla.</li><li>¿Cuáles son las diferencias entre <code>Long-polling</code>, <code>websockets</code> y <code>server-sent events</code>?</li><li>Explique las siguientes cabeceras de peticiones y respuestas:</li><li>Diferencias entre <code>Expires</code>, <code>Date</code>, <code>Age</code> y <code>If-Modified-</code>…</li><li><code>Do Not Track</code></li><li><code>Cache-Control</code></li><li><code>Transfer-Encoding</code></li><li><code>Etag</code></li><li><code>X-Frame-Options</code></li><li>¿Qué son los métodos <code>HTTP</code>? Mencione y explique los que conozca.</li><li>¿Qué es el “<em>pre-fetching</em>” de dominio y cómo contribuye al rendimiento de una página web?</li><li>¿Qué es un CDN y cuáles son los beneficios de usar uno?</li></ul><h4><a name="divertidas">Preguntas divertidas:</a></h4><ul><li>¿Qué es lo más genial que ha programado y qué es lo que más le enorgullece de ello?</li><li>¿Cuáles son sus características favoritas de las herramientas de desarrollo que usa?</li><li>¿Quién le inspira en la industria de desarrollo web?</li><li>¿Tiene algún proyecto personal? ¿De qué se trata?</li></ul><h4><a name="contribuyentes">Contribuyentes</a></h4><p>Este documento se creó en 2009 como una colaboración de <a href="http://twitter.com/paul_irish">@paul_irish</a> <a href="http://twitter.com/bentruyman">@bentruyman</a> <a href="http://twitter.com/cowboy">@cowboy</a> <a href="http://twitter.com/ajpiano">@ajpiano</a> <a href="http://twitter.com/slexaxton">@SlexAxton</a> <a href="http://twitter.com/boazsender">@boazsender</a> <a href="http://twitter.com/miketaylr">@miketaylr</a> <a href="http://twitter.com/vladikoff">@vladikoff</a> <a href="http://twitter.com/gf3">@gf3</a> <a href="http://twitter.com/jon_neal">@jon_neal</a> <a href="http://twitter.com/sambreed">@sambreed</a> y <a href="http://twitter.com/iansym">@iansym</a>.</p><p>Ha recibido contribuciones de <a href="https://github.com/h5bp/Front-end-Developer-Interview-Questions/graphs/contributors">100 desarrolladores</a>.</p></div><div class="content-edit"><a rel="external noreferrer noopener" target="_blank" href="https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/src/translations/spanish.md">Edit this page</a></div></main><footer class="footer"><p class="footer-text">Copyright © 2012 - 2024. Contributors to <a href="https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/main/CONTRIBUTORS.md">Front-end-Developer-Interview-Questions.</a><br>Curious about the project? <a href="/Front-end-Developer-Interview-Questions/about/">Read more about here</a>.</p></footer></div><script>console.log("%cA black belt is a white belt that didn't quit.","color: #fff; font-size: 20px; text-shadow: 1px 1px 1px #000; font-family: serif;");var navToggle=document.getElementById("navigation-toggle"),nav=document.getElementById("navigation");navToggle.addEventListener("click",function(){nav.classList.toggle("open")}),window.addEventListener("resize",function(){document.width>960?nav.classList.remove("active"):(nav.classList.add("no-motion"),setTimeout(function(){nav.classList.remove("no-motion")},250))});</script></body></html> |