Intro
Today is the first look at actually building out the new webpage that is going to be my landing page. That has been a decent amount of research that has gone into this. Now it's all about practice. From most of the things that I have seen you need to build your html for the largest screen first and build your CSS for the smallest screen first. That's what I did and now let's talk about it.
Header and Nav
As I have been building out pages for the website I find that two things stay the same in my pages. That's the header and the navigation bar. Thinking like this one of the first things I did was split these into their own CSS file. I also took the time to split the two parts into different sections now.
Header and Nav Code
<header>
<h1><a id='header-title' href='Home.html'>Journey <br> Of <br> Improvement</a></h1>
</header>
<nav class='main-nav'>
<ul>
<li class='nav-button'><a class='nav-link' href='AboutMe.html'>About Me</a></li>
<li class='nav-button'>|</li>
<li class='nav-button'><a class='nav-link' href='BlogPost/BlogNavigation.html'>Blogs</a></li>
<li class='nav-button'>|</li>
<li class='nav-button'><a class='nav-link' href='ProjectPage.html'>Projects</a></li>
<li class='nav-button'>|</li>
<li class='nav-button'><a class='nav-link' href='#'>Skills</a></li>
</ul>
</nav>
First things first the header will go inside a header tag. I wanted the title to be something that stood out right from the get go. I love the look of something that is centered in the page and takes up a few lines when it's long. It makes me think of a movie title. That is why I added in the line breaks between words.
First things first the header will go inside a header tag. I wanted the title to be something that stood out right from the get go. I love the look of something that is centered in the page and takes up a few lines when it's long. It makes me think of a movie title. That is why I added in the line breaks between words.
Main Section
First things first the header will go inside a header tag. I wanted the title to be something that stood out right from the get go. I love the look of something that is centered in the page and takes up a few lines when it's long. It makes me think of a movie title. That is why I added in the line breaks between words.
About me Section HTML
<main class='grid-container'>
<section id='about-me' class='grid-box'>
<div class='padding-grid'>
</div>
<div class=''>
<h2>About Me</h2>
<picture>
<a href='AboutMe.html'>
<img src='BlogPictures/About-me.jpg' alt=''>
</a>
</picture>
</div>
<div class='padding-grid'>
</div>
<div class='padding-grid'>
</div>
<div class=''>
<p class='about-me-text'>Hi I'm Daniel Esmail. I'm a Novice Programmer and working on my skills to become a better program.</p>
<p class='about-me-text'>One of my goals for the new year was to program every day or learn about programming every day. The way that I'm going to do that is through this website.</p>
<p class='about-me-text'>So sit back and enjoy and maybe me stumbling through this will help you or someone you know</p>
</div>
<div class='padding-grid'>
</div>
</section>
First things first the header will go inside a header tag. I wanted the title to be something that stood out right from the get go. I love the look of something that is centered in the page and takes up a few lines when it's long. It makes me think of a movie title. That is why I added in the line breaks between words.
About me Section HTML
<main class='grid-container'>
<section id='about-me' class='grid-box'>
<div class='padding-grid'>
</div>
<div class=''>
<h2>About Me</h2>
<picture>
<a href='AboutMe.html'>
<img src='BlogPictures/About-me.jpg' alt=''>
</a>
</picture>
</div>
<div class='padding-grid'>
</div>
<div class='padding-grid'>
</div>
<div class=''>
<p class='about-me-text'>Hi I'm Daniel Esmail. I'm a Novice Programmer and working on my skills to become a better program.</p>
<p class='about-me-text'>One of my goals for the new year was to program every day or learn about programming every day. The way that I'm going to do that is through this website.</p>
<p class='about-me-text'>So sit back and enjoy and maybe me stumbling through this will help you or someone you know</p>
</div>
<div class='padding-grid'>
</div>
</section>
Next let's talk about the navigation bar. I have seen in a lot of tutorials for the nav to be list items and this is where my decision came from. I also have an idea for a new page so I have added in the section for skills. I'll talk about that more once I have the page up and running. Next with the list items I obviously want to link everything to other pages so I added anchor elements and classed then nav links. I always name the element that holds the link something different so that I can take away the navigation link underline later on. Lastly I added in pipes to help add some separation.
When building the body of this page I tried to think about how it's going to look on a cell phone and how it's going to look on a desktop. I knew each section was going to hold two elements. When the user is on the phone I want the elements to be stacked on top of each other. While on the desktop I want the elements to be next to each other. I also want in both cases the elements to have a little space away from the edges of the page.
About me Section HTML
<main class='grid-container'>
<section id='about-me' class='grid-box'>
<div class='padding-grid'>
</div>
<div class=''>
<h2>About Me</h2>
<picture>
<a href='AboutMe.html'>
<img src='BlogPictures/About-me.jpg' alt=''>
</a>
</picture>
</div>
<div class='padding-grid'>
</div>
<div class='padding-grid'>
</div>
<div class=''>
<p class='about-me-text'>Hi I'm Daniel Esmail. I'm a Novice Programmer and working on my skills to become a better program.</p>
<p class='about-me-text'>One of my goals for the new year was to program every day or learn about programming every day. The way that I'm going to do that is through this website.</p>
<p class='about-me-text'>So sit back and enjoy and maybe me stumbling through this will help you or someone you know</p>
</div>
<div class='padding-grid'>
</div>
</section>
The first section that I wanted to lead with was the about me section. This was going to have my picture and a little bit about me. Those were going to be my two elements for my section. Both of those would be put into a div to be considered part of my grid. Next I knew I wanted the spaces between the elements and the wall so I added 4 more divs to be padding between the walls. For the picture I wanted it to be a link too so I added an anchor tag to it. For the little section where I talk about myself I ended up making three paragraph elements to add some spacing.
The first section that I wanted to lead with was the about me section. This was going to have my picture and a little bit about me. Those were going to be my two elements for my section. Both of those would be put into a div to be considered part of my grid. Next I knew I wanted the spaces between the elements and the wall so I added 4 more divs to be padding between the walls. For the picture I wanted it to be a link too so I added an anchor tag to it. For the little section where I talk about myself I ended up making three paragraph elements to add some spacing.
