Steph Walker-Portfolio Reflection

Throughout this course, I have learned a lot. I started out having completely no idea what HTML or CSS was, and now I have completed my own entire website. When we began to learn HTML in the beginning of the semester, I felt that I was learning HTML really quickly. It seemed to come to me naturally, which is something that I did not expect. I also really enjoyed the various website mapping activities that we did in class, especially the Document Object Model, which really helped me learn how the code makes websites work. The next thing I began to learn was CSS. While I know I learned CSS the same way I learned HTML (through Codecademy and then discussed/ reinforced through activities in class), it still felt as though I did not learn as much in class about it as I did with HTML. At first, I really struggled with that as I was anxious that I was not ever going to be able to pick it up. But, after working more and more on the Codecademy tutorials, I got a good enough grasp that I was able to create my own entire website. Now, while I still have more practice to do to become even more comfortable with it, I definitely feel that throughout this course I have learned skills that prepare me better for the rest of my college courses as well as the career world: I now have a background in HTML and CSS and can understand the logic of how websites work.

There were a lot of struggles throughout the semester as I was working on each of the steps of this portfolio. Initially, I had picked out a color scheme that had lots of yellows and greys in it. Being someone who likes those color combinations, I thought that it would be a good reflection of my personality through my website. However, when I created the design comps and used JustinMind to pull up a local interactive version of the website, it looked like a 6 year old had made it. Extremely frustrated, I then began Googling phrases such as 'professional looking website' and 'portfolio color scheme' to see if that would give me any color scheme ideas, but I still had not found the color scheme I was looking for. Finally, I went to the website and decided to just use the colors generator. After hitting the spacebar several times, I finally found a color scheme that I liked. I see myself changing this color scheme in the future, but I like the one that I have for now.

However, this unfortunately was not the end of my struggles, which I would encounter when I began to code the CSS for each of my portfolio pages. As I mentioned earlier, I find that HTML comes naturally to me. So, when I began to actually start typing out the code and making the pages for my portfolio, the HTML itself was pretty much a breeze. I found the navigation bar to be pretty straightforward as well, as it is as simple as creating an unordered list of the links to each of the different pages of your website. At this point in the coding process, I felt like it was going very well. In fact, I remember being surprised at how quickly I was able to get my first page running. I was so excited, and I could not believe I had a page that I created all by myself on the actual internet. I made each page in pairs, (I would code the Home page HTML and Home page CSS instead of just coding all of the HTML files first) and so it felt like the project was moving along faster than I had expected it would. I even was ahead of the own personal “timeline” goals I had set for myself.

I felt pretty confident, and so I thought I would be able to complete the CSS files for each page as quickly as I had been able to complete the HTML files for each page. But, as it turns out, CSS is what gave me the most issues. I had all of my content there, and it had all of the colors, fonts, and sizes that I wanted, I just could not seem to find the right property to get my content to be in the spot on the page that I wanted it to be at. At first I tried using floats, but for whatever reason I was never able to get the floats to change much. This was especially difficult for my Home page (the About Me page). I initially was planning on having two square buttons that would link to each of my portfolio pages next to a grey box that contained my photo and About Me bio underneath the photo, but I could not get the buttons to go to the side of the page. So eventually I just decided that I would try that design in the future. Next, I came to class and asked my classmates for help on how to center my image. One classmate had told me that there was a 'center' tag that you could use in HTML that would center your content. I used it, and it worked. However, then I realized that I needed to keep design separated from structure (CSS concepts out of the HTML files) and could not use the center tag within the HTML, and instead had to figure out how to do it using CSS (and thus putting it in the CSS file for the Home page). We were able to figure out that it was the margins that I needed to adjust in order to center my image on the page. Next, I decided that I wanted to add a border around each of the boxes on my pages. This was a little tricky for my About Me box on the home page, because the grey box technically is two separate boxes and I could not figure out how to change that, even after rearranging the divs I had. However, I was proud of myself when I suddenly remembered that the border property has a 'top' and 'bottom' sub-property. So, I was able to write CSS as “border-bottom: none” for the top box and “border-top: none” for the bottom box.

After I fixed this, I went on to coding the remaining CSS for the rest of my pages. The portfolio pages were pretty straightforward, and I used the Resume Tutorial on Codecademy to make my resume page, so that made the CSS very easy since the tutorial walked me through each step I needed to make to put my resume in the format of the webpage. However, the Codecademy tutorial did not show me how to center the content on the page, and since I was using bullet points from an unordered list, the CSS properties that I had to use were quite different than those I used for centering my pictures on the home page. I took to Google, specifically W3schools, for a tutorial but I could not find anything. So, I asked some of my classmates for help and thankfully, through trial and error of using different properties and pixel amounts, we were able to figure out how to center the content together. For my content page, I used the W3schools Forms tutorial page, as well as the code from a previous WRA 210 student, Sarah Polega, since the W3schools tutorial was not detailed enough for what I was trying to do. Then, of course, I edited the code so that it was more personalized and not just copied directly off of her website.

In the future, I would like to add clickable buttons, that direct you to each portfolio pages, either onto my home page, or to the page that users are directed to if they hit the initial 'Portfolio' box in the navigation bar instead of selecting one of the items in the drop down menu. I would also like to add more to my bio on the About Me/Home page, make my resume fancier, and possibly even make my resume match the color scheme of my website (which would start to create a brand for myself). I also plan to add links to my LinkedIn page to the opposite side of the navigation bar, in the right corner of each page. Also, I would like to get my Contact form to eventually work, even if that means buying my own domain (MSU's Server does not support embedded email contact forms), and would write the code for the server that is necessary to get the form to work. I would look up tutorials on how to do this. Also, after completing Module 9, I realized that there is a CSS property to make text bolded. Since I had been using the 'strong' tag in the HTML of my Resume for the first list elements, I needed to move that over to my Resume CSS file to separate structure/content from design. I tried using the selectors 'li > li', and setting the 'font-weight' property to 'font-weight: Bold', but that did not work. I also tried the 'li:first-child{ font-weight: bold;}' properties and selectors, and still have not yet been able to figure out the correct selector to use to bold only the specific first items that I want to be bolded, so for now I kept the 'strong' tags in my HTML and plan to fix that later, as I gain more experience and fluency with CSS. This will be the same case for my other pages that contain the 'strong' tag in their HTML files. Finally, I would like to add some type of background image so that my website does not look so plain. Maybe I will create a personal logo, turn that into a repeated pattern/graphic, and then use that as the background.

I really feel like I have progressed as a student throughout this course, especially since I have learned HTML and CSS and the logic behind how websites work. I look forward to maintaining my website by adding more portfolio elements to it as I complete more course and career projects. I also will continue to make sure that my website is up to web-compliant-standards and follows CRAP design principles.