- Create webpage using Brackets
- Familiarize with GitHub App and GitHub flow
- Create webpage template
- Setup homework on GitHub
HTML is the standard markup language used to create webpages. This markup language is interpreted by the browser (or user agent) and displays a webpage. In order for us to create a webpage there are important tags and elements we need to add in order to follow some standards.
<!DOCTYPE html>The declaration must be the very first thing in your HTML document, before the tag. It's telling the browser which version of HTML the page is written in. In our case, it's telling the browser that we're writing in HTML5.<html>...</html>This will encompass our entire page and act as the root for our page when locating other files in our folder structure.<head>...</head>The head comes right after the opening of the html tag and contains vital links and other head-specific tags (like title, link, and script).<title>...</title>The title will come right after the opening of our head tag and is required in all HTML documents. It defines a title in the browser toolbar, provides a title for the page when it is added to favorites, and displays a title for the page in search-engine results.<body>...</body>The body element contains all of our content that we visualize, such as text, hyperlinks, images, tables, lists, etc.
When we put them all together it looks like this
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>Code House: The Worst Reality Show
Visit your favorite website and look at its source
- What HTML elements do you see?
- Which elements look familiar to you?
- What else do you see we haven't cover yet?
Let me introduce you to your new second best friend - the developer tool.
Now let us see what happens when we integrate some of the elements to our template.
<div></div><p></p><img><a></a>
A <div> will allow us to group or encapsule common elements on a page. The <img> needs the use of the attribute src to link the image we want to display. The <a> need a href attribute if we want to fully use it.
Create a new html file and write the following elements
- h1 -
<h1> - paragraph -
<p> - hr -
<hr/> - blockquote
<blockquote> - ul -
<ul>- li -
<li>
- li -
You can find more information on how to use other elements here.
Class discussion
Let's head over your repository folder - username.github.io. Create a new file and name it index.html. Add the content from your template. Within the body element add information such your name, class, image of yourself, and the reason we are adding this file (to easy access homework assignments). Do this using html elements such the one we just learn above or new ones.
This html file will allow us to navigate throughout your homeworks but only if you follow the next folder structure.
Within your repository you will add new folders for each homework assignment. As an example, for day 1 homework add a folder and name it homework-day-1. Inside that new folder create a new html file and name it index.html. Within that file you are going to write your homework. Just to make sure it works let's add something and open GitHub App, commit your changes and sync/publish.
Create a page that displays your information, such as name, a small bio, maybe a couple of things that interest you, things that you do, etc. Make sure you use some of this elements <div>, <section>, <a>, <ul>, <table>, <hx> x: {1, 2, 3, 4, 5, 6}
Here is an example image.
You have just been hired to build a website for a friend who has started a new business. The job is to build a website that reflects the services offered. What he/she wants is an image at the top of the page (logo) and a title with a paragraph with information about the company and a list of the services offered and a method of contacting the business.
Here is an example
