Estoy atascado en lo básico del desarrollo web. ¿Cómo encuentran los desarrolladores ideas para su portafolio?

Los primeros proyectos para su cartera dependerán de lo que haya aprendido hasta ahora y en qué idioma (s) se esté concentrando. Como no conozco los detalles de lo que has aprendido, supondré que has aprendido algo de HTML, CSS y quizás algo de JavaScript básico. Hay una sorprendente cantidad de proyectos que puede construir con estas tres tecnologías:

HTML / CSS

  1. Una página web plana “Acerca de mí” con enlaces de salto. Crea una página web sobre ti con HTML y CSS. Con CSS, cree una barra de navegación con 3–4 enlaces de salto. Según el enlace en el que haga clic el usuario, saltará a otra sección de su página web única. Adjuntaré una captura de pantalla de una que construí para que puedas ver. Puede hacer esto (o cualquiera de estos otros proyectos) en Codepen si aún no está listo para alojar su sitio web.
  2. Muestra tus habilidades HTML5. Si conoce la sintaxis adecuada para HTML5, puede crear una página con contenido semánticamente correcto y hacer un uso adecuado del encabezado, aparte, principal, artículo y figura, que son elementos semánticos descriptivos de HTML5. Agregue algunos elementos de estilo CSS, como darle a su encabezado un color diferente y un borde y haga flotar algunas imágenes allí por interés. Asegúrese de estar utilizando un diseño receptivo para su página web.
  3. Cree una página web con diseño receptivo. Dominar el diseño de páginas web receptivas es ahora un requisito para los trabajos de diseño web de nivel de entrada. Una vez que domine las consultas de medios, incorpórelas a su trabajo para que sus páginas web cambien de tamaño correctamente en navegadores de todos los tamaños. Hay muchos lugares excelentes donde puedes aprender diseño receptivo.

4. Cree un sitio web pequeño con un marco CSS. Si conoce Bootstrap u otro marco front-end, aplíquelo al proyecto n. ° 1.

JavaScript básico

Si conoce algo de JavaScript, puede hacer aún más. Los proyectos introductorios incluyen:

  1. Convertidores de datos. Una vez que conozca algunos algoritmos básicos, como las fórmulas para convertir temperaturas Fahrenheit a grados Celsius (y viceversa), pies a pulgadas, dólares a centavos, etc., puede aprender algo de JavaScript interactivo básico para agregar un botón que convierta los datos de una medida a otra y mostrar el nuevo resultado a su página web.
  2. Formas Los formularios con alguna validación básica son excelentes proyectos introductorios para JavaScript y PHP. Una vez que conozca los atributos del elemento de formulario y aprenda a agregar algunas secuencias de comandos a cuadros de texto, botones de opción y casillas de verificación, podrá crear formularios con una funcionalidad creciente. Solo asegúrese de agregar un estilo CSS básico para que su formulario sea algo interesante de ver.
  3. Asumir algunos proyectos de JavaScript con dificultad creciente. Una vez que puede convertir datos y manejar secuencias de comandos básicas, puede crear pequeñas aplicaciones que utilizan formularios de registro, temporizadores y presentaciones de imágenes.

Esperemos que esta lista lo ayude a comenzar. También puede usarlo como punto de partida para generar más ideas. Tome un bolígrafo y papel y simplemente comience a escribir más ideas. Puede comenzar con la pregunta, ¿qué me gustaría construir? Escriba esas ideas y, si aún no tiene el conocimiento para construir el proyecto, elabore su propio plan de estudios investigando cómo construir las diferentes partes y use Stack Overflow para buscar respuestas cuando esté atascado. ¡Ahí es cuando comienza tu verdadera educación como desarrollador web!

Recuerde: no se desanime si se atasca en sus proyectos. Siga avanzando investigando cómo resolver cualquier problema que encuentre en el camino. ¡Buena suerte!

Tengo un buen libro al respecto: retrabajo.

Por ejemplo, cree un tema de sitio web / comercio electrónico / blog con las últimas tecnologías como React y PWA. Necesita menos experiencia y obtendrá un resultado.

¿Has probado Free Code Camp? Pruebe la certificación de front-end allí. Como parte de obtener ese certificado, tendrá que construir un montón de proyectos de cartera. Algunos de los posteriores, como la Calculadora JavaScript y Simon, te enseñarán mucho.

More Interesting

Sé HTML, CSS, JavaScript, jQuery y AngularJS. ¿Qué puedo aprender a continuación?

Si tengo un sitio web receptivo existente codificado principalmente en html5, CSS y Java (sin php), ¿cómo puedo agregar un blog de wordpress al sitio sin convertirlo en un tema de wp? ¿Hay buena documentación sobre esto? Solo quiero que la sección del blog sea wp.

¿Cuáles son las principales tendencias en desarrollo web?

Hice un proyecto de programación web donde necesito cambiar el tamaño de la página HTML para que se ajuste a la pantalla. ¿Cuál es el código sobre cómo hacer esto?

Tengo una aplicación web de chat desarrollada con la pila MEAN. ¿Cómo sirvo mejor una gran cantidad de archivos mp3 cortos?

Tomé un curso sobre desarrollo web front-end y quería comenzar un negocio de diseño web. Todavía quiero pero tengo miedo, ¿cómo puedo superar esto?

Tengo problemas con los algoritmos básicos de JavaScript en Free Code Camp. ¿Debo aprender en otro lugar o continuar con Free Code Camp?

¿Puedo aprender desarrollo web y programación Java lado a lado, si soy un principiante?

Quiero crear un proyecto en Java usando Maximum Technologies. ¿Algunas ideas?

Soy un novato total en los marcos de desarrollo web. Suponiendo que conozco HTML / CSS, un poco de experiencia en PHP / MySQL (solo sintaxis básica), comenzando a aprender JS, ¿debería centrarme en sumergirme profundamente en LAMP o aprender un nuevo lenguaje como Opa?

Cómo usar Firebase para mi aplicación Ionic v1

Estoy familiarizado con JavaScript, Ruby y Scala. Para el desarrollo de backend, ¿debería aprender Node, Rails o Play?

¿Por qué mi formulario de contacto PHP da estos errores?

Estoy usando Notepad ++. No tengo un servidor PHP y mis códigos no se ejecutan. ¿Cómo puedo ejecutar un código PHP?

¿Cómo se edita el código de otro sitio web y se ejecuta en mi propio sitio web?