Maquetando perfil HTML

Curso Práctico de Maquetación en CSS

Introducción

Lo que aprenderás sobre maquetación en CSS

Chrome Devtools

Análisis y creación del proyecto

Diseño del proyecto

Setup del proyecto

Creando la página principal

Arquitectura del header en HTML

Estilos en el header

Agregando íconos

Agregando imágenes al header

Manejo de Grid para posicionar contenedores

Manejo de imágenes de Background

Agregando fuentes

Terminando el Home

Creando página de Blogs

Blog page

Manejo de clases

Estilos en blogs html

Agregando imagen

Estilos del botón

Trabajando la sección de post

Grid Container

Creando página de Blog

Crear la pantalla de blog

Agregando estilos a la página de blog

Creando página de perfil

Sección de contacto

Maquetando perfil HTML

Manejando estilos en la página de perfil

Blog responsivo

Media Queries

Cierre

Cierre del curso

You don't have access to this class

Keep learning! Join and start boosting your career

If you already have an account,

Resources

How to structure a profile page using HTML and CSS?

Have you ever wondered how to create a profile page from scratch? Let's explore how to design and structure a simple profile web page. In this guide, I'll show you how to replicate key elements of the page, such as the header, contact and portfolio sections, and even projects. We'll start with the HTML foundation and then add CSS styles.

What elements does the profile page include?

The profile page is the place where you can show who you are and the projects you have done. The main elements we will include are:

Header: with your name or greeting.
Profile image: a photo that represents who you are.
Description: a brief introduction about yourself.
Contact section: contact information or direct reference.
Project portfolio: a list of projects you have worked on.

How to replicate the structure of the page?

To start, you need to replicate the basic structure using HTML. Below, I show you the HTML code you can use:

<!DOCTYPE html><html><html><head> <title>ProfilePage</title></head><body>
 <!-- Page header --> <header id="profile-header"> <h1>Hello, my name is Diego de Granda</h1> </header>
 <!-- Profile image and description --> <section id="profile-main"> <div class="profile-image-container"> <img src="your-image.jpg" alt="Profile Image"> </div> <div class="profile-description"> <h2>WhoIam</h2> <p>Alittle bit of my history and career path.</p> </div> </section></section>
 <!-- Contact section --> <section id="contact-section"> <h3>Contact</h3> <p>Addyour contact details here.</p> </section>
 <!-- Projects portfolio --> <section id="projects-section"> <h3>Projects</h3> <div class="projects-container">            
 <!-- Project 1 --> <article class="project"> <h4>Project1</h4> <p>Descriptionof project 1</p> </article>
 <!-- Project 2 --> <article class="project"> <h4>Project2</h4> <p>Descriptionof project 2</p> </article>
 <!-- Project 3 --> <article class="project"> <h4>Project3</h4> <p>Descriptionof project 3</p> </article>
 </div> </section>
</body></html></html>

How to style the page with CSS?

After setting up the HTML structure, the next step is to add CSS styles to give an attractive look to your profile page. Make sure to include an external CSS file or add them inside the <style> section in your HTML file.

Example of basic CSS for the profile page:

body { font-family: Arial, sans-serif; line-height: 1.6; color: #333;}
header { background: #f4f4f4f4; padding: 20px; text-align: center;}
.profile-image-container img { width: 150px; border-radius: 50%; display: block; margin: 10px auto;}
.profile-description,.contact-section,.projects-section { padding: 20px;}
.projects-container { display: flex; justify-content: space-between;}
.project { padding: 10px; border: 1px solid #ddd; border-radius: 5px; width: 30%;}

Can I customize my page even more?

Of course you can! You can expand and customize your profile page to suit your needs. Consider adding:

CSS transitions and animations to create visual effects.
Social media icons to increase interactivity.
Additional sections such as a blog or customer testimonials.

It's always important to apply best practices in web design and make sure your page is easy to navigate and visually appealing - experiment with colors, fonts and layout until you find what works best for you!

Creating an effective profile page is a big step in building your online presence. With these elements well structured, you'll be ready to get your story and projects out to the world.

Contributions 95

Questions 2

Sort by:

Want to see more contributions, questions and answers from the community?

Sneyder Alfonso Barreto Buitrago