-1 Primer paso
Crear la estructura de la pagina, lo mejor para realizar esto seria tener una idea y plasmar las dimensiones en algún lugar para ejecutarlo mejor , en mi caso quiero tener una barra de navegación que ocupe poca parte de mi pantalla, un trabajo realizado por mi y la información que vaya a llevar la pagina.
Las tres partes principales de mi pagina serán nav bar, imagen y contenido.
aquí un ejemplo de como organizar las partes
-2 ya maquetada nuestra pagina la personalizamos y etc , recomiendo utilizar flexbox para una pagina donde sus partes no sean equivalentes (no como una cuadricula) , de esta manera lo hice yo y elegí los porcentajes de cada cosa
-3 aqui les dejo mi plantilla o mi codigo y como se veria la pagina
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>pagina presentaciontitle>
<style>
#lesgo{
display: flex;
}
.logo{
border:10px solid rgb(255, 0, 0);
border-radius: 15px;
}
header{
background-color: lightcyan;
text-align: center;
font-family:monospace ;
height: 70px;
border: 3px solid rgb(0, 0, 0);
border-radius: 15px;
margin: 10px;
}
body{
margin: 0;
}
.contenido{
width: 60%;
height: 50%;
font-size: large;
margin-left: 45px;
}
style>
head>
<body>
<header><h1>SAMUEL CARRANZA FULL STACK DEVELOPERh1>header>
<divid="lesgo">
<sectionclass="logo">'
<imgsrc="izquierda.png"alt=""srcset="">
section>
<sectionclass="contenido">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices imperdiet ex, nec vulputate lectus. Morbi condimentum varius ipsum ac pretium. Nam ultricies pharetra gravida. Nulla accumsan cursus justo eu sagittis. Maecenas id est vitae quam feugiat convallis eu sed lorem. Nulla in commodo eros, eu scelerisque tellus. Morbi efficitur facilisis turpis, ut tristique orci placerat sit amet.
Duis gravida hendrerit volutpat. Aliquam erat volutpat. Suspendisse quis porta ante. Fusce varius erat at dui sodales rhoncus. Aliquam bibendum dictum libero, vel viverra sapien lacinia ac. Pellentesque id dui elit. Etiam at dui et ligula elementum pretium in a leo. Morbi sollicitudin libero nec tincidunt pharetra. Praesent quis felis sagittis, blandit lorem vitae, efficitur lorem. Sed eget eleifend velit.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus vitae feugiat erat, nec tempor nisi. Phasellus metus elit, ullamcorper sed tincidunt a, tempor a eros. Duis metus ex, convallis nec ex a, feugiat porta leo. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis ut lacus et ligula sodales malesuada. Maecenas nulla est, convallis sed aliquam sit amet, ullamcorper ac elit. Etiam aliquet quam et enim dignissim pulvinar.
Vivamus sapien tellus, pharetra sed est at, fringilla pretium quam. Etiam pretium velit pharetra tempor dictum. In eleifend augue metus, ac vestibulum dui pretium at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum gravida molestie justo sed dictum. Phasellus tristique orci ipsum, ut gravida magna ornare in. Donec vel odio eu dui elementum iaculis sed vel neque. Aenean tristique mauris vel mi lacinia feugiat.
Phasellus vitae sem nec urna dictum consectetur. In hac habitasse platea dictumst. Vivamus tortor diam, auctor vel diam a, gravida ultricies est. Curabitur a rutrum lorem. Nunc vulputate et erat et eleifend. Donec blandit fermentum velit, ac dictum sem. Donec auctor venenatis leo, sed interdum nulla luctus non. Donec nulla velit, vulputate vel dolor sit amet, bibendum ullamcorper enim. Integer tempor mollis sagittis. Donec in ex sollicitudin, faucibus massa et, congue lectus. Donec rutrum id enim in tincidunt. Pellentesque dictum eleifend quam, ac bibendum felis dictum et. Phasellus rhoncus hendrerit erat, non pretium dui iaculis non. Aenean imperdiet et quam quis aliquet.
p>
section>
div>
body>
html>```
