Writing Code - First Attempt!
I've finally started a huge part of my Employability Project - learning how to code. I had heard about Code Academy and decided to give it a shot and I'm glad I did because it is awesome. It's free. It's straight-forward. It's fun.
Today I finished the first module in learning to make a website - how to write HTML code.
Before I began Code Academy, the only thing I knew about websites I learned from a baby board book called "Web Design for Babies" which I bought for my nephew for Christmas a few years ago (mostly as a joke).
I actually learned a lot from this board book - namely the fact that I knew less than a baby about web design.
Today, in Code Academy, I learned that webpages are made with HTML and CSS. HTML makes the page's structure - so the fact that there's text, and headings, links and images. CSS is what is built on top of the HTML structure and allows for the webpage to have a design and a layout.
HTML code is made up of a bunch of different HTML elements, which are kind of like the building blocks of the webpage (just as letters are the building blocks of a sentence). Each element describes to the web browser how to display each piece of webpage content.
Here are the HTML elements I learned of today:
1) Heading Elements
- There are 6 levels of heading elements depending on the importance of the heading. For example, the main heading is going to be h1 while subheadings will be h2-h6.
- Here is an example of a heading tag: <h1>The Employability Project</h1>
- The text in between the h1s is the text the user can see.
2) Paragraph Elements (<p>)
- These elements allow for paragraph content.
- A paragraph tag looks like: <p>
- Here is an example of a paragraph tag: <p>Today I learned how to code HTML</p>
- Again, the text between the p-tags is the text the user can see.
3) Link (or A) Element (<a>)
- The <a> element is used to create links to other webpages.
- The <a> element has an href attribute that includes the website being linked to.
- The <a> element also allows you to choose the text users can see on the page, with the link hidden behind.
- Here is an example of an <a> element:
- <a href="https://www.google.com/">Search</a>
4) The Image Element <img>
- This element helps add images to a page
- Similar to the a-element, the img element also has an attribute, src, which links to the image address.
- For example, <img src="logo.png">
5) List Elements (<ul> and <li>)
- List elements allow web content to be presented as lists
- The <ul> element creates the bulleted list
- Within the list (or <ul> element) are the list items which are placed inside <li> elements.
- For example:
<ul>
<li>Home</li>
<li>About</li>
</ul>
6) <html> and <body> elements
6) <html> and <body> elements
- Everything inside the webpage is nested within an <html> element.
- The <body> element contains the actual webpage content - so everything that displays on the web-browser.
- <!DOCTYPE html>
- This command tells the web-browser which version of html it should be reading.
- Doctype ensures that the webpage displays correctly no matter which web-browser we are using.
- <div>
- <div> elements help keep your webpage organized.
- They group other elements together into sections for your website. For examples: the navigation bar, the header, the main body, the footer.
Okay, so I took all this information and I wrote my very first original code using TextEdit, which I saved as a .html file.
I typed this into Text Edit:
And then when I clicked and dragged the file into a web-browser address bar, I got this:
I must say, I'm pretty stinking proud of myself today. I'm also pretty obsessed with coding now. It's like crafts. Or writing. Or like cooking. It's creative, it's syntax and grammar, it's methodological and you have to follow the recipe if it's going to look right.
Well enough for now. I must say hi to my husband.
Well enough for now. I must say hi to my husband.
No comments:
Post a Comment