25 Minutes of Code Every Day (First Day)

I had started off so strong last time and I was coding almost every day for an hour. Maybe it was too much. Therefore, I am picking back up and focusing on doing just 25 minutes a day for a week. Then I will evaluate and increase or keep the time the same as I build this habit up until it is just something I do every day without thinking.

I have deleted my freecodecamp account and have started over completely since I feel that it was best to reset and relearn as much as possible.

Head First Into Free Code Camp

Learning

I am recommitted to learning Front End Web Development

I have spent too much time away due to work and other family obligations. Now I am back. I have been working through Head First: HTML and CSS and this has worked out great when combining with my knowledge gained from Free Code Camp

If you decide to work through Free Code Camp (FCC) yourself, I would highly recommend that you have another source of information to turn to when you feel like you are getting stuck. Also don't rush through the FCC courses because you will surely go quickly until you have to build projects on your own.

Also, as a side note, I found this music station on Google Play Music called, "Code Your Face Off", I actually enjoy it while coding.

That is all for now. I have to get back to coding.

Midnight Oil

Let's Do This!

I went to bed at 2130 because I had a terrible headache, I really wanted to do some coding but my head was telling me no. Yet, I just woke up at midnight without a headache and here I am about to drill my way through the Free Code Camp website.

Hold up, Too Much Learning

Taking a Break

I have been going at this web development since around 7pm. I have managed to create several webpages (most of them just hanging out on my own computer).

However, I did get one uploaded to my site. It is a website for a fake coffee shop. In my learnings, I believe there will be more done to this site. For now though it just looks a little bland.

Again, bland is okay at this stage if that's all you can do. It is better to get experience with writing HTML and understanding how HTML actually works.

Well, this has been quite a bit for today so I am signing off and will pick back up either tomorrow or the next day.

Hypertext - The Link That Binds

Links

If you really want to make your website useful, you need to add links using an <a> element.

This is an example of a link. or it looks like this in html: <a href="#">This is an example of a link.</a>

The href is an attribute that tells the browser the destination of the link you created. While the "#" would be where you put the actual destination. This can be to an actual website (you will need to include the http://) or it can be to another file on your server. I used the "#" because it is a link that I will update later.

For practice let's create a link to Google with text that reads: Search Engine.

This is what it should look like: Search Engine

So how did I do that?

Here is the html version:
<a href="http://www.google.com">Search Engine</a>

Alright, so what if we only wanted the word Search to be a link like this: Search Engine?

Then you would simply move the word "Engine" outside of the <a> element like this: <a href="http://www.google.com">Search</a> Engine

Now that we know how to link websites to each other go practice adding different links to your website. The next post will help you understand how to link your own files together that are hosted on the same server.

Understanding HTML

HTML, The Fundamentals

So you want to learn HTML? Great, so do I. Let's start by learning the basics.

The first thing you should know is that a web page is made up of several different things. However, to start with we are going to focus on the Hyper-Text Markup Language, or HTML. The HTML is written in a text editor (I am using Notepad++ which you can download here). Once you type up some HTML then you can place it on a web server for anyone to access.

Web Server

Wait? What's a web server? It's basically the internet's version of a closet or storage unit. Except it is probably better organized. A web server will hold documents and in our case, the HTML documents we would want other people to see.

The server just sits there storing these files away until someone requests them using their web browser.

Web Browser

Oh man, another term. Except I think I know this one. A web browser is what we use to access web pages correct?

That is correct. A web browser searches for specific web pages on a web server. Once the browser finds the web page on the web server it then displays the content to the user.

But how does the web browser know what to display and how to display it?

Well, that's easy. HTML is how.

HTML

In HTML you will put tags around the content of the document so that a web browser knows how to display the content. There are opening and closing tags. An opening and closing tag make an element. An example of an element would be the paragraph element: <p>, this is known as an opening tag. While this is the closing tag: </p>. Your content would go in-between the opening and closing tags.

I am not going to include all the tags as there are just too many of them. If you want to do more research on HTML then visit w3 Schools.

Just as a side note, I will be writing all of my blogs using HTML that I know. Eventually as I begin to learn CSS, I will start to incorporate that into my blogs.

For this blog, I used the paragraph element (<p> </p>) as well as the h1 element (<h1> <h1>) and the h2 element (<h2> <h2>). To include the links I used: <a href="website.com">Clickable Text Goes Here</a>. I did use a few <br> tags to create extra line spaces. I added an iframe element for the video at the bottom (<iframe></iframe>).

You now have all the information that I used to make this blog post. So get out there and start making your own website. Don't get wrapped up in the fact that you don't know everything yet. It's okay that it looks bland, it is about progress, not becoming an overnight sensation.

For the longest time, I was paralyzed by the feeling that I didn't know everything. Then I watched the video below and decided it was enough just thinking and I needed to be doing:

So there you have it. Some of the fundamental knowledge I have learned in a few weeks of HTML learning.

Here is a snapshot of the some of the HTML that I used to let you see how it looks in action.