This page shows the processes I took while completing Homework assignment 1. I appologize in advance for some lack of documentation. It's not my strongest skill and I will work on it for future assignments to come.
I already had a GitHub account from a previous class however I believed it would be easier for me, mentally, to create a new account that is designated for this class' assignments only. I already had Windows subsystem for Lynix set up. I went ahead and updated my user name and user email for GitHub and then I checked my status to make sure my repository was empty.
Below is an image of my GitHub account along with the creation of my GitHub Pages.
I began this process with downloading Bootstrap and then followed through the rest of the instructions in this section to complete my website.
I began with creating the navigation bar with main title/logo of my website along side it. I would like to note that the image for my logo was downloaded from the Noun Project and I am giving credit to Ealancheliyan s, the artist who designed the icon. It is not my own design.
For this section of the code I followed along a tutorial, done by w3 newbie, of using bootsrtap to create a navigation bar. I really thought this was a cool navigation bar because when the size of the screen becomes smaller the navigation bar changes into a drop-down menu when selected. I had a few hiccups along the way in getting it to work properly and that wasn't until I nearly completed my website. The code for the navigation bar is in each of my three html files.
The image above shows the full navigation bar. This would be seen on a medium or larger screen.
The image above shows the navigation bar transformed into a drop-down menu when the screen is a small size.
I then switched my focus to creating the column layouts using bootsrtap. On my website home page, HW1.html, I have used both a single and a three column layout. The top container of the home page is in a single column layout with a header and paragraph element inside.
Inside the three column layout I decided to place the three images of pets. While working on this section I looked to bootstraps documentation as well as the w3 newbie tutorial.
Next I went on to creating a table. This is in my HW1-contacts html file. I figured that using a table for my "contacts" would be the most reasonable way to use one. I had created with table with HTML and didn't realize till later that there was a way to format it in bootsrtap. I was in a pinch for time and decided to keep to the HTML.
Moving along, we arrive to the creation of the tables. I chose to create an ordered and an unordered list. Similar to the table I had stuck to using HTML. My ordered list is in the HW1.html file and my unordered list is in the HW1-community.html file. Here is the code for the two lists below.
After completing the website now it was time to add and push all my files onto GitHub. I had quite a bit of trouble with this. I had a hard time getting into the directory I wanted to be my local repository. Eventualy, after pulling a few hairs from my head, I got to where I needed to be. I go on to add, commit and push my files to my repository. Below are images of this process.
Last but no least, was shaping my portfolio into a visual presentation of my liking. Looking at examples, I noticed, that the page for their blog was the same theme as their portfolio home page. I don't know how to link another GitHub Page (my blog) to my home GitHub Page (if that's what I'm supposed to do, I could be looking at it wrong). At this point I am running short on time so I decided that I would create this basic HTML page for my blog. I kept it simple by using a header, paragraph and img src elements. This following week I'll talk to my fellow classmates on how to have a blog page with the same theme as my portfolio home page. I've got a feeling that I was overthinking how to do it.