Floating Along on a Wave of CSS and Boxes

This homework assignment was definitely a step up in level of difficulty for me from our previous assignments. I think, at least in part, this was the case because of the change in text. I had gotten used to working through the HeadFirst chapters, so transitioning to this text slowed me down a bit, at least at first. I felt like I was floating along in the beginning (hence the title), just barely understanding what I was doing, until about halfway through the assignment.

The first part of the assignment, exercise 15-1, was useful as an introduction, but I still don’t know exactly what I got out of it because this is from the beginning of my interactions with this text where I didn’t quite follow what was going on. I figured out what boxes and floating were as the assignment continued, but at first, I was a bit overwhelmed by the text so I fiddled around to make things work.

The first part of the exercise: exercise 15-1

The first part of the exercise: exercise 15-1

The second part of the assignment, the customized tab menu, was something I felt pretty comfortable with, although my tab menu didn’t quite look exactly like the one pictured in the book. I was not sure how to make it look essentially the same, even after I altered all of the listed elements. I did manage to change everything that we needed to change and I even integrated my sans-serif workhorse font, which I was pretty excited about.

Customized Tab Menu

Customized Tab Menu

The third section of the assignment, exercise 15-4, was probably the trickiest to figure out but also the most rewarding section, at least from the book. During this exercise, I finally realized what all of the floats and boxes were about when I had to trouble-shoot because I had included the award image in the wrong box. Once I had to go in and look at the code to figure out what my mistake was, I was able to better understand what I was doing in general.

Moment of Clarity: Exercise 15-4

Moment of Clarity: Exercise 15-4

After the third section, I felt ready to get out of the text and move on to the Makers related application portion of the assignment. After realizing that I forgot to link the makers.html page and the makers.css page, I was off to a good start. The hardest part of the fourth section of the assignment was choosing related image content. I took this to be a good sign and just picked up on some of the main words/ideas of the passages for the images. Floating them seemed pretty straightforward after working through the entire chapter in the text.

"Islands in the Stream That Is What We Are"

Screenshot 4: “Islands in the Stream That Is What We Are”

Ultimately, the fifth section made a lot of sense after working through everything else. I decided to use a percentage to move the scan box over to the right side of the page because I could better understand where exactly I was putting the box. I don’t have any questions in particular after completing this assignment, but I will definitely be looking over this chapter again in the upcoming week or two.

Screenshot 5: Floated Definition of Maker Culture

Screenshot 5: Floated Definition of Maker Culture

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s