HTML/CSS Coding – My-Web Based Resume Assignment

So…this is where the rubber meets the road, so to speak.  As I’ve said previously, I’ve worked with HTML and CSS in the past, but merely from a maintenance perspective.  If I have problems with some code, I just go in and tinker with it until it does what I want it to do.  Not the best approach, but it’s how I operated in a self-taught world of website customizing. But, this assignment required me to code everything from scratch.  A bit daunting, but it ended up being fun.

The Assignment

Build your resume web page by developing two pages (an HTML and a CSS) that link together. It should contain the following:

• Your picture placed at the top of the page of your resume
• At least three headings for your resume: 1) Your name; 2) Education; 3) Experience
• At least two entries/paragraphs that contain the content that is related to your “education” and “experience” sections.
• An external link to a web-page or site that could perhaps showcase your skills or provide further information about you (school or work website, etc)
• An email link where you could be contacted

There were other requirements for the actual files, but this was the main point.  If you want to take a look at my finished project, head over here.  (Phone number has been modified because I don’t want any more spammers than I already have.)

The Reflection

As I stated earlier, it was fun…but a little daunting.  My biggest obstacles involved the CSS.  I’m much more comfortable with HTML, but CSS always throws me a curve.  I new I wanted to include all of the table styling (width, padding, margins, color, etc.) in the CSS, but wasn’t quite sure how.  Once again, WC3 Schools had me covered.  There’s an entire section on proper CSS for tables, tr, th, and td.  That helped a lot and I also ended up creating some classes for the different columns:  column1 and column2.

Another item that made me scratch my head a little was the additional requirement on a position indicator.  And, once again, WC3 Schools had me covered.  I decided that I wanted my name at the top of the page to be “sticky” and go with the scrolling.  So, as you scroll down the page to view my resume, my name scrolls with you so you never forget who you’re reading about.  I thought that would be fitting since it was a resume.  I tried using that same trick with my profile picture, but that just looked bad and took up too much of the screen.  It also gave off the “hey…I’m watching you read about me” vibe.  Kind of creepy.

I also carried over one of the things I learned from the last lesson:  Google Fonts.  Not only did I link to my external stylesheet, I linked to the selected Google Fonts on the Google Font website.  Google makes using fonts SO EASY!

The Conclusion

Again, it was a fun project…and a reminder that I hadn’t updated my resume in a while.  Thanks to LinkedIn for keeping all of that organized!  This assignment also made me realize just how powerful CSS can be.  I’ve always known that it’s really useful for quickly making changes across your website, but it never really occurred to me all of the things you can ACTUAL DO with CSS.  Things that I would have just hacked with images or manipulating HTML, but it’s MUCH easier with CSS.  And, hey, isn’t that what it’s all about?  If technological advancements don’t make some aspect of life easier, then it’s not really an advancement.