Starting a site
Alright Day 2 of programming! I have done a little bit to make the website more readable. Mostly everything that I have done to the website today is stuff that I have already learned in the past. It's nothing fancy it's just basic CSS and HTML. This dog did learn a few new tricks and that's something to look forward to. I took the time to skim over the CSS and the HTML tutorial section on W3schools to give me a little bit of a refresher and learn something new. First off the head element that is something that has always mystified me. It's nothing you need, but to really get something nice on the page. It can make or break your website as you scale and want more people to find about you. Below is what I wrote and I'll go though it in brief, to explain what is going on inside of my head. include links to videos I watch or articles I read while working on improving.
HTML head code
<head>
<title>Daniel Esmail</title>
<link rel='stylesheet' type='text/css' href='MainCss.css'>
<link rel='icon' type='image/x-icon' href='/BlogPictures/favicon.ico'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta name='charset' content='UTF-8'>
<meta name='keywords' content='Journey, Programming, HMTL'>
<meta name='description' content='My journey from being a progamming noob to a programing hero'>
</head>
<body>
The title element is super self-explanatory and the only thing that I really for sure knew what did before I read the tutorial. All it does is at a title to your website on the top tab bar. Very nice and something that you will see with every website and would question the developer if it wasn't there.
Next we have link elements. Those I have always only used as stylesheets to connect to my CSS. I'm doing here like always because I want my CSS somewhere that's not my HMTL file. The thing I didn't know links could do was make an icon or as I'm learning is called a favicon. I made mine simple and from a website that I will list below at the end of this blog post.
Now for the meat and potatoes the thing I had no idea what it does and I'm really only scratching the surface. The Meta elements the things that give your website information. These are things like the viewport, charset, and SEO. The viewport is super important because you set it so that you can have a responsive page at that end of the day. This will help with users that are on phones or tables or anything else. Next the charset still don't know much about this but I do know that it's important for the website to interpret your characters. If anyone that reads this wants me to go more in depth about this let me know and I will do some proper research on it. Finally keywords and description. Think of these as the tag and description of a YouTube video. This will help people find your site and make sure you don't land on the second page of google.
Now that's a lot of information about HTML head. Probably more information that anyone cares about at this point. I hope it's helpful, I hope it steers some people in the right direction. Now let's talk about where my mind is for the body. Here is the code except the blog post in the pre because otherwise this would be way to long.
HTML body code
<body>
<header>
<h1>Journey To Improve</h1>
<p id='titlecaption'>Improving my skills</p>
<hr>
</header>
<section>
<h2 class=''>Blogs</h2>
<article class='BlogPost'>
<h3 class='title'>Day 1: Staring a Blog and Website</h3>
<pre>
Blog Post
</pre>
<h4>Some Helpful links</h4>
<a href='https://www.hostinger.com/tutorials/website/how-to-upload-your-website' target='_blank'>Hostigner How to upload your website</a>
</article>
</section>
</body>
My main thinking is I don't want to rely on divs to break up all my sections. I plan to do each page with all the new elements in HTML 5 like header, section, article, aside, footer, and anything like that . There is nothing special that I have done so far it so I'll leave it at that.
Finally let's talk about CSS. Something that can make your website look fantastic or like a dumpster fire. I have pretty much only made websites that look like a 3rd grader made them. That's going to be one of my goal is to make this site and many others look fantastic. Here is the code
Css Code
h1{
color:black;
text-align: center;
}
header{
background-color: white;
}
#titlecaption{
text-align: center;
}
body{
background-color: white
}
.BlogPost{
width: 56em;
background-color: lightgray;
overflow: auto;
padding: 1em;
}
.title{
text-align: center;
}
Now let's talk about it. First off I have head and correct me if I'm wrong that most sites should start as black, gray, and white. This give you a much better idea of how you want to lay things out and what your site will look like. I'm doing just that and sticking with these colors until I progress down the road. I also told myself I'm not using PX units this time. That's all I used to use and it's not responsive so it's not the way to go. That's why I'm using Ems now. Let's hope it goes well.
This is going to be the end of day 2 of blogging. There is a lot that I have done but there is still a lot of things to do. I'm going to research more. One of my goal is to find out how to make different page so not all the blog posts are hosted on this main page. Also I would love to learn how to make a page look visually better. Finally something in the future that I can do is learn a few other languages like PHP and refresh JavaScript.
