Proyecto Práctico de Frontend Developer con HTML y CSS

Clase 1 de 22 • Curso Práctico de Frontend Developer

Resumen

Para tomar este recurso te sugerimos realizar primero el Curso de Frontend Developer donde aprenderás los fundamentos de HTML y CSS.

Al finalizarlo dominarás:

Las bases de HTML y CSS
La anatomía de un documento HTML, sus elementos y las propiedades de CSS
Maquetación con responsive design

¡A practicar!

En este curso desarrollaremos el proyecto de una tienda. Implementarás lo aprendido y adicional algunos puntos de CSS Grid y Flexbox.

Aclaración sobre los siguientes pasos

Este es el primero de cuatro cursos, en los que Platzi te llevará de la mano para que puedas tener construir una aplicación web o tienda virtual.

Podrás entender a cabalidad todos los conceptos si sigues el orden de la Ruta de Aprendizaje de JavaScript

Contribución creada por Guadalupe Monge Barale.

Cristian Mauricio Cavanzo Arias

student•

Soy el unico que le encanta la chaqueta de Platzi Master?

Jhon Eduard Bocanegra Ortiz

student•

x2 Esta Increíble 😍

Yobriel Alexander Castillo Monsant

student•

No eres el único, están fabulosas

Ricardo Rito Anguiano

student•

Ya quiero mi sudadera de platzi master <3 esta hermosaaaaaaaaaa.

Yobriel Alexander Castillo Monsant

student•

Somos dos, quiero una asi

Renato Giron

student•

Oscar Elvis

student•

Like <3 , si quieres Platzi Master para Perú

Carlos Manuel Ibarra Sánchez

student•

Debería de haber uno :(

Erick Vasquez Murillo

student•

Para las personas que usan editores como Vim o NeoVim, hice un repositorio en donde está personalizado y listo para trabajar de manera ágil. Repositorio

Daniel Rojas Artiaga

student•

Amigo me estoy intentando a poner en contacto contigo por tu repositorio de Neovim

Antonio Maldonado

student•

Mis respetos jefe. No cualquiera se atreve a usar Vim o NeoVim

Eduard Ferley Gil Carvajal

student•

Hola todos,

para los que vayan empezar este curso les recomiendo que hagan lo siguiente.

nombres de los archivos: por favor colocarles un nombre que identifique de qué es cada archivo. Algo como esto ( Login.html ) NOTA : esto les va ayudar a no tener que cambiar los nombres de los archivos para cuando lleguen al curso práctico de react.
cuando en html asignar clases hazlo con la siguiente sintaxis.

<div class="Login_container">

// or 
<div className="LoginContainer">

// please no use this  (-)
<div className="Login-container">

INPORTAN:cuando asignes nombres a las clases trata de que sea algo descriptivo y acorde a lo que se está creando: ejemplo si estás creando el html de Login. usa nombres de clases como esta

<div class=”Login”> 

 <div class=”LoginContainer”>

Nota: esto también ayuda a la hora de asignar en react los estilos. ya que react toma todos los estilos como globales. para que no pase eso tenemos que usar una configuración diferente, a la hora de dar estilos

básicamente lo que tenemos que hacer en react después va a ser algo como esto

import styles from '@styles/Login.module.scss';

<div className={styles.Login}>

// Obviamente esto  va a depender de la manera que elijas para colocar estilos. en mi caso elegí  (styles  modules )

y ya creo que eso es todo, si me acuerdo de algo más volveré a editar este comentario.

Porfirio González López

student•

Gracias

Emily Valentina Gaitan Velasco

student•

Importante! gracias 🎉

Rafael Lizarraga

student•

Aquí les comparto a todos mi toma de notas de todo el curso en un Google Docs para que entre todos podamos ir mejorándolo! Espero que les sirva y podamos aportar al documento juntos!

Suerte en el curso, es muy entretenido!

https://docs.google.com/document/d/1qflkIWbeC7wxVj-6kagcDw5P0RbbUm0NZjmvh9BaXbM/edit?usp=sharing

Porfirio González López

student•

Es del curso anterior, no de este.

Victor Maita Rodriguez

student•

les recomiendo que vean hasta una clase donde entiendan como desarrollar la pagina y empezar a solucionarlo primero ustedes y luego ver como lo hace en la clase

psdt: vengo de la clase 7

Jhonatan David Ibarra Lavado

student•

vienes del futuro men :O

Jesús Medina

student•

Como puedo hacer Platzi Mater???

Gilda Castillo Ventura

student•

Hola Jesus, aquí puedes encontrar más información https://platzi.com/blog/platzi-master-que-es/

Claudiu Rad

student•

Hoola desde españa !!!

David Limon

student•

Pues Lets Go con este curso... Que buena sudadera por cierto!!

Joao Ivan Garduño Salgado

student•

Es muy bueno el "Curso de Frontend Developer".. Pero, recomiendo que antes de tomar ese curso deberías ver primero el "Curso definitivo de HTML y CSS" y después ver el de "Curso de Frontend Developer", esa es mi recomendación sobre todo por los temas abordados, ya que no se profundizan del todo como lo hacen en el "Curso definitivo de HTML y CSS" . Solo es recomendación...

Porfirio González López

student•

Muy Interesante! El “Curso de Frontend Developer” se me complico y busqué info por fuera, talvez fue por eso. La escuela de Desarrollo Web (+100 cursos) yo creo que ese sería el orden ideal para tomar los cursos.

Emilio Ariel Santos Mateo

student•

Si este curso forma parte de la escuela de JavaScript, por qué no aparece en el path de la escuela de JavaScript?

Estefany Aguilar

teacher•

Sí pertenece, mira: https://platzi.com/escuela-javascript/ 😊

En dónde estás viendo ?

Diego Iberri Ramírez

student•

vengo muy motivado a practicar, espero que este curso se nos haga sencillo y todos lo comprendamos a la perfección.

¡Mucha suerte a todos!

Brandon Rodriguez

student•

¿Cómo te fue?

Leonardo Guevara

student•

Saludos, and... I want my Platzi-Jacket!!! jejeje...

Dymon Zamora

student•

"we want..."

Yuri Añorga

student•

¿Qué es Platzi Master? Me da una linda curiosidad.

Fernando Gill

student•

Hola! Puedes saber todo sobre Platzi Master haciendo click aquí :)

Yuri Añorga

student•

Muchas gracias Fernando.

Juan Felipe Angarita Lopez

student•

A Frontend Developer is a professional who specializes in building and implementing the user interface (UI) and user experience (UX) of a website or web application. Their primary focus is on the client side of development, working with technologies such as HTML, CSS, and JavaScript to create visually appealing and interactive interfaces.

Key responsibilities of a Frontend Developer include:

Building Web Pages: Creating web pages using HTML for structure, CSS for styling, and JavaScript for interactivity.
Responsive Design: Ensuring that websites and applications work well on various devices and screen sizes by implementing responsive design principles.
Cross-Browser Compatibility: Writing code that functions consistently across different web browsers.
User Experience (UX): Collaborating with UX designers to implement designs that enhance the overall user experience.
Web Performance Optimization: Optimizing code and assets to improve website loading times and overall performance.
Testing and Debugging: Conducting testing and debugging to identify and fix issues in the frontend code.
Collaboration: Working closely with backend developers, designers, and other stakeholders to ensure seamless integration of frontend and backend components.
Version Control: Using version control systems like Git to manage and track changes to the codebase.
Stay Updated: Keeping up-to-date with the latest trends and best practices in frontend development.
Frameworks and Libraries: Using frontend frameworks and libraries such as React, Angular, or Vue.js to streamline development and enhance functionality.

Frontend Developers play a crucial role in creating visually appealing and user-friendly interfaces, contributing to the overall success of web projects. Their work is vital for ensuring a positive user experience and effective interaction with web applications.