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