In lab you created a repository for your class site. This is where you’ll house all of your projects.
In your USERNAME.github.io folder, create a new folder called“projects” and another one called“assets” notice that everything is in all lowercase without any spaces or punctuation.
At this point, your folder structure should look like this:
your“projects” folder will house all of your projects for this class. you can go ahead and make one titled“time-capsule” in there.
Now, let’s navigate back to your main folder(the username.github.io).
This url will lead you to the starting point, or index, of your site. For our class, this is going to be your student portfolio, where you’ll add links to all of your projects.
Let’s refresh our memories on how to do this….
The Index File
The index.html file is the main page of any website. All websites start with an index.html file. When you create a new project, you’ll have a new index.html file inside of a new project folder. The“.html” ending signifies that the text is written in HTML, or Hyper Text Mark Up Language. HTML is not a programming language; it is a a markup language that provides the means to create content and structure from text.
and save this as“index.html” you should save it in your main project directory, it should look like this:
Open up your index.html file by opening web browser Chrome and dragging the index file into the window. What do you see?
Eventually, this page is going to be your portfolio site, which is an ongoing class project, and is also how you’ll turn in all of your exercises and projects for this class. More on that later. For now, let’s take a closer look at what’s going on. Open up the source of the page:
What do you see? It should look exactly like your index.html file. You can do this with any website.
This is one way of viewing the source, but I use the developer tools more often. To open them up, you can go to view/developer/developer tools, or right/⌘ click on an element on the page and select“Inspect”
Now you should have an interactive window that allows you to view and test out different things right from here! Pretty nifty. When we’re working, we’ll always have this up to troubleshoot.
Let’s watch a quick video that introduces the basics of HTML produced by Laurel Schwulst, a designer and artist.
Folder Structure
The Index File
<!DOCTYPE html><html lang="en-US"><head> <meta charset="UTF-8"> <title>Nikas Page</title></head><body> <p>Hello World!</p></body></html>