En este artículo, explicaremos cómo crear un cv usando HTML y CSS, y luego lo alojaremos en GitHub y crearemos un enlace para que podamos acceder a él en cualquier momento cuando lo necesitemos.
Enfoque: usaremos HTML y CSS para crear este currículum. ahora entenderemos la parte del código y la parte de diseño. En la sección HTML, vinculamos la página CSS en la sección principal y también se escribe allí el título de la página.
- HTML: Usaremos HTML para crear el diseño de la página. En el archivo index.html , usamos dos bloques div para el lado izquierdo y el lado derecho. en el bloque div del lado izquierdo, usamos cinco bloques div para Imagen, Contacto, Habilidades, Idioma y Pasatiempos y colocamos los datos en cada sección. en el lado derecho usamos cinco bloques div para Nombre, Resumen, Experiencia, Educación y Proyecto. usamos el elemento de lista y tabla aquí.
- CSS: En el archivo resume.css haremos cada div con un nombre de clase que se usa para diseñar este currículum. Para el bloque div del lado izquierdo, usamos el nombre de la clase (.left), y similar para el lado derecho que usamos (.right) y establecemos el color y la posición de fondo de las propiedades. Usaremos propiedades de visualización flexibles en el cuerpo y la cuadrícula para la página completa.
HTML
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="resume.css"> </head> <body> <div class="full"> <div class="left"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220202083519/gfglogo.png" alt="gfg-logo" style="width:100px;height:100px;"> </div> <div class="Contact"> <h2>Contact</h2> <p><b>Email id:</b>xyz@gmail.com</p> <p><b>Mobile no :</b>1234567890</p> </div> <div class="Skills"> <h2>Skills</h2> <ul> <li><b>Programming Languages : Python, Java, C++</b></li> <li><b>Frontend : HTML5, CSS3, JavaScript, React</b></li> <li><b>Backend : Node.js</b></li> </ul> </div> <div class="Language"> <h2>Language</h2> <ul> <li>English</li> <li>Hindi</li> </ul> </div> <div class="Hobbies"> <h2>Hobbies</h2> <ul> <li>Playing cricket</li> <li>Swimming</li> </ul> </div> </div> <div class="right"> <div class="name"> <h1>GeeksforGeeks</h1> </div> <div class="title"> <p>Web Developer</p> </div> <div class="Summary"> <h2>Summary</h2> <p>To secure a challenging position in a reputable organization to expand my learning knowledge and skill </p> </div> <div class="Experience"> <h2>Experience</h2> <h3>Abc webdev pvt ltd - Senior Web Developer</h3> <p>January 2022 to Present</p> <ul> <li>Actively engaged in web creative design and development.</li> <li>Designing project & planing</li> </ul> <h3>Xyz webdev pvt ltd - junior web developer</h3> <p>August 2021 to December 2021</p> <ul> <li>Actively engaged in web creative design and development.</li> <li>Designing project & planing</li> <li>Working on designing</li> </ul> </div> <div class="Education"> <h2>Education</h2> <table> <tr> <th>University/college </th> <th>Passing year </th> <th>percentage/cgpa</th> </tr> <tr> <td>xyz</td> <td>2020</td> <td>8.9</td> </tr> <tr> <td>pqr</td> <td>2018</td> <td>89%</td> </tr> </table> </div> <div class="project"> <ul> <li> <h2>Project1</h2> <p>This project is based on html & used React</p> </li> <li> <h2>Project2</h2> <p>This project is based on html & used React</p> </li> </ul> </div> </div> </div> </body> </html>
CSS
/* Write CSS Here */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(253, 254, 255);
display: flex;
justify-content: center;
align-items: center;
}
.full {
width: 50%;
max-width: 1000px;
min-height: 100px;
background-color: rgb(245, 239, 231);
margin: 0px;
display: grid;
grid-template-columns: 2fr 4fr;
}
.left {
position: initial;
background-color: rgb(126, 219, 231);
padding: 20px;
}
.right {
position: initial;
background-color: rgb(162, 202, 206);
padding: 20px;
}
.image, .Contact, .Skills, .Language, .Hobbies, .title,
.Summary, .Experience, .Education, .project {
margin-bottom: 30px;
}
.h2 {
background-color: rgb(4, 96, 150);
}
Producción:
Ahora veremos cómo alojarlo en GitHub.
Paso 1: abra su perfil de GitHub y haga clic en + firmar en el lado izquierdo, luego cree un nuevo repositorio.
Paso 2: escriba un nombre de repositorio, una descripción y una casilla de verificación para agregar un archivo Léame y luego haga clic en crear un repositorio
Paso 3: Haga clic en Agregar archivo y cargar archivos.
Paso 4: Haga clic en elegir sus archivos y cargue todos los archivos desde su dispositivo local.
Paso 5: Haga clic en confirmar cambios.
Paso 6: ahora todos sus códigos están cargados en Github ahora creamos un enlace para esto. vaya a la parte de configuración y en esto solo vaya a la sección de páginas. se abre una nueva página y en esta no hace fuente a la rama principal y guarda ahora su enlace se crea y puede usar en cualquier lugar.
Paso 7: Se abre una nueva página y en esta no haga fuente a la rama principal y guarde ahora su enlace está creado y puede usarlo en cualquier lugar. Pego el enlace aquí.
Enlace implementado: https://vivekkumar83.github.io/resume.html
Publicación traducida automáticamente
Artículo escrito por vickykumar7061 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA