Assignment 10 | WEB-110

Steps for Completing the Assignment

For this assignment response, I think it acts as a better learning tool to list the steps I took in order to add the CSS to my repository and elaborating on the process as best I can as I walk you through them.

1. Cloning the Repository
   • First, I used the built-in terminal in Visual Studio Code to make sure I had the most up-to-date version of my project on the laptop I was working from.
   • Since I was using a different Laptop this time, in order to clone the repository, I used this command:
     • git clone https://j_payne25@bitbucket.org/jpayneharper/jpayneharper.bitbucket.io.git
   • When I got home and wanted to make sure my other Laptop had the most up-to-date version from the remote repository, and since an instance of the file already existed I used the following command instead:
     Where "main" is the Branch Name & 'origin' is the SSH keypair that allows you to Push and Pull to the remote repository.
     • git merge origin main
2. Creating a New CSS File
   • I created a new CSS file with the following command:
     • touch web110/styles.css
   • Added the primary and secondary colors to style various elements.
3. Copying the Skeleton from Assignment 9
   • I created a new HTML file for Assignment 10 using the following commands:
     • touch web110/assignment10.html && cp web110/assignment9.html web110/assignment10.html
4. Editing the HTML Skeleton
   • I linked the new CSS file and adjusted a few HTML of the elements to fit the new design. As I've adjusted the HTML, I found adding a few additions/changes to the CSS necessary.
5. Adding and Revising Elements
   • I added examples of styled elements such as buttons and cards, and made adjustments to the existing HTML Skeleton and class structure to ensure consistency moving forward.
6. Styling the List
   • After thinking I'd add my Assignment Summary in a list format I thought it best to go back and style said lists. I styled this list using the CSS classes from the new stylesheet to make sure the list styles flows nicely with the other new CSS I've added.
7. Pushing the Changes
   • I pushed the final changes to the repository with the following command:
     • git push origin main
8. Fixing Mistakes
   • I realized I had made a mistake with the file structure and to keep things neater I needed to make some adjustments to the location of the CSS file, the best convention for these types of files is to have them housed based on file type. Therefore, I opted to move the stylesheet into a directory of its own; furthermore, I wanted to rename the stylesheet in order to give it some uniqueness, I mostly do this out of habit from work, when you see hundreds of files a day (all with similar filetypes and content) it helps to have them accurately named so you can tell what they are at a glance. Using the following Terminal commands I was able to complete the above:
     • mkdir styles
     • touch styles/harper_theme_1_styles.css
     • cp web110/styles.css styles/harper_theme_1_styles.css
     • rm web110/styles.css
   • The revised final file structure is as follows:
     • -- jpayneharper.bitbucket.io
     • ---- styles
       • -------- harper_theme_1_styles.css
     • ---- web110
       • -------- assignment1.html
       • -------- assignment2.html
       • -------- assignment3.html
       • -------- etc....
     • ---- index.html