Lesson 8 Practice Journal

This is an education project for a fictional producer of straw widgets.

Introducing CSS

The Stylesheet

You might notice that I have added a style sheet to this page. This is the same style sheet that is used by my Home page and my Policies and Procedures page. It is not very developed yet. I have only added the background color and a color for the h1 headings. I also changed the font choice for the body. If you compare it with my other pages, you will notice the difference. I hope to be able to do some positioning next week. It feels good to see the site start to take on some style.

Time Spent

This week I spent 4 hours in deliberate practice and 5 and a half hours reading. First, I fixed my broken Contact Form. However, I still have trouble with getting Outlook to receive the emails. Instead, I have to go to BlueHost to read them. Next, I worked on my CSS. I will give more details on that practice in the next paragraph. I'm happy that I was able to finish all of the reading that was assigned this week. I still have some reading from former lessons that I am trying to do, but I thought it would be good to begin working with CSS on my site first.

CSS Practice

I started working with CSS this week. This included trying different fonts, colors, measurements and borders. I created a CSS Practice Page with an accompanying CSS style sheet where I could practice using borders and things without messing up my site. These two pages are on my website, but not accessible by any of the regular navigation links. I am including links to them here.

My Practice Pages

Boxes

I learned how to see the dimensions for my boxes and their borders in browsers. I am attaching a screen shot of my box model in chrome. That's the one where the dimensions are of the content and not the whole box. I am attaching a screenshot of my border box opened in Firefox. That's the one where the dimensions include the whole box. The screenshot also shows the CSS style sheet that produced the code. It's easier to know the outer dimensions of the border box; however, I need to make it big enough for the content. I did play around with different sizes of boxes to see how they would work. As you can see, the colors are a bit wild in the Firefox version.

My Box Model in Chrome

Screenshot of my box model in Chrome.

Border Box in Firefox

Screenshot of my border-box and CSS stylesheet in Firefox.

Just so you know...

I thought you would be interested to know that I find the Deliberate Practice Journal entries to be good practice. They often take me more than an hour to code them and to get the links and images to work properly. I have saved a template for them; which makes it easier to use the same format each week. However, I always seem to have something go wrong with the images and the extra links I add. For some reason, the screenshot jpg files won't load unless I capitalize the JPG. That really is the only thing keeping them from working. I can't seem to change that. All of my other images use the .jpg endings. I also need to remember to update the journal-links navigation module to include the new entry for the week. Overall, I enjoy working with my site.