Class 1: GitHub and Website Development

June 23, 2020

Assignment: Create a website and make a page with a proposal for a possible final project. Include an index.html page with links to each assignment page, an about page, and some customization using HTML and CSS

Since I've had a little bit of experience in HTML/CSS from Computers class in Middle School, the learning curve in creating my website wasn't so steep; however, I did have to reacquaint myself with the basics via W3 Schools. I copied some of the code from W3 Schools to create a navigation bar at the top of each page, although I changed some of the styling and colors in CSS. I also found some code for gradient buttons on codepen.io, although I had to edit them to span the entire width of the page. By playing with the CSS code for both of these templates, I feel like I really learned a lot.

My biggest struggle was figuring out how to specify file paths. Maybe I didn't have as many folders when I had previously done HTML, which is why file path notation seemed to be so new to me. Eventually, I figured out how to use relative file paths with / for files located at the root of the current web, ./ for files located in folders located in the current folder, and ../ for files located in folders one level above the current folder. I had to edit the navigation bar file paths depending on the page, but I'm glad to have finally figured this out! Here's the html for my index page!

HTML

This is how my website's homepage currently looks with some broken links for documentation of the next few classes, but I hope to improve the layout throughout the course as I get better at HTML/CSS.

Homepage

This is also my first time using GitHub, so I was a bit confused at first about repositories and pushing, but through some trial and error, I've figured it out!