Integrating CSS3 Style Sheets with HTML5 Pages

 

Description of the Project

This week, I worked on creating a resume by using CSS3 Style Sheets and HTML5 Pages.  The past few weeks, I've learned how to do each of these separately, but haven't combined them into one project.  

The goal of the assignment was for me to be able to apply what I've learned by using two different styles of coding.  Not only was I instructed to create a resume with different headings, I had to change the color, font, and indentation throughout the document as well. I also added an image to the header of the resume as well. 

What Obstacles I Encountered

The first obstacle I encountered was trying to figure out how to center an image using the CSS3 Style Sheet.  Normally, I will just choose the "center" option in a Word or Google document, but knowing how to use code to do this took me a bit of time. 

I also encountered a problem when trying to change the colors of the h1 and h2 headings.  It seemed that no matter how hard I tried, I couldn't get the colors to change.  If I did it in the .html document it would work, but the instructions were to change the color in the .css document. 

The last obstacle I encountered was having the font the same size for the h2 headings and the paragraphs.  I kept changing the font size for the paragraphs, but it took me several tries to get it to work.

How I Resolved These Obstacles

For the first obstacle of centering an image using the CSS3 Style Sheet, I went back and reread the relevant content on the W3Schools website.  It took me a bit of digging to figure out what coding to write to correctly center the image and where in the Style Sheet to put the code as well. But, I would write the code, then open the .html file to see if I did it correctly and then kept trying until it looked the way I wanted it to. 

The next obstacle I faced was in changing the colors of the headings.  I realized that I was trying to overcomplicate things and was adding too much code.  Once I stopped to really look at what I was doing and slowed down, I figured out how to correctly enter the right coding to make the color changes work. 

Then, when I had the issue of the font size being the same between heading 2 and the paragraphs, I knew it had to be a simple mistake I was missing.  After taking the time to look at the coding, I realized I wasn't putting the ending of </h2> or </p> into my file. Once I added the / symbol, the font size was added correctly. 

What Successes I Experienced

Honestly, I didn't know that I could create a cascading code and then link it into an HTML code.  I felt proud of myself for being able to do that.  To think about the fact that I knew nothing about coding a few weeks ago and to see what I'm able to do now is exciting.

Like I mentioned in an earlier blog post, coding does not come easily to me.  I get confused by the minor details, spacing, and what symbols to enter where.  But, I do know the more I do it and when I give myself grace, I'm figuring it out slowly but surely.