Shamira N.

A Creative Always Learning

66

--

Building a Portfolio Website

I've learned a lot while taking this course, especially the fundamentals and best practices when it comes to composing readable HTML code. 

For practicing purposes I worked on the Jon Arbuckle Portfolio Website.

----------------------------------------------------------------------------------------------------------------------------------------------


First I started off by creating the simple sitemap from Gliffy:

b621ec18

----------------------------------------------------------------------------------------------------------------------------------------------

Then I broke down the Content Outline and assigned the appropriate element tags:

Home Page 

  • Header content 
    • ⁃  logo: img, a
    • ⁃  site navigation: ul, li, a
  • Hero content 
    • ⁃  large image of Jon Arbuckle: img
    • ⁃  brief elevator pitch “I’m Jon Arbuckle, a freelance Illustrator and author.: h1
  • Jon’s web comics 
    • ⁃  description text to let visitors know that Jon writes comics: h2, p
    • ⁃  a link to learn more about the comics: a
  • Polka CDs for sale 
    • ⁃  image: img
    • ⁃  name of CD: p
    • ⁃  link to Amazon to buy: a, hr
  • Jon’s Twitter account
    • - Keep up with Jon’s latest music and illustrations: p 
    • - twitter icon: img 
    • a link to Jon’s Twitter page: a
  • Client testimonial

    • ⁃  “Working with Jon was a great experience! He really listened to my business needs and was able to capture the essence of my pet cat, dog, and chinchilla in the amazing portrait series I hired him for. His drawings really helped our veterinarian waiting room come alive! I’ll be contacting Jon for all my animal illustration needs” - Dr. Liz Wilson: blockquote, p

    • ⁃  call to action link: “Hire Jon for your pet portrait needs! Get in touch.”: p, a

  • Footer content
    • copyright information: p

----------------------------------------------------------------------------------------------------------------------------------------------

Work Page

  • Header content

  • Page title: Work: h1, hr

  • Web comics: h2

    • ⁃  Lasagna Chronicles: h3

      • ⁃  image: img

      • ⁃  link to external site: a

    • ⁃  Cat Town: h3

      • ⁃  image: img

      • ⁃  link to external site: a

  • Portraits: h2
    • - cat portrait image: img
    • - dog portrait image: img
  • Music: h2
    • - "The Best of Jonny Arbs": h3
    • - cd image: img
    • - link to buy on amazon: a
  • Footer content

----------------------------------------------------------------------------------------------------------------------------------------------

About Page

  • Header content

  • Page title: About: h2

  • Image of Jon: img

  • A couple of paragraphs describing Jon: p

  • List of skills and professional services offered: h3, ul, li

  • Footer content

----------------------------------------------------------------------------------------------------------------------------------------------

Contact Page

  • Header content
  • Page title: Contact: h2
  • Jon’s email address: p, a
  • List of links to Jon’s social media presence: h3, img, a
  • Footer content

----------------------------------------------------------------------------------------------------------------------------------------------

Next, I organized all my image assets in a folder and created all four HTML pages in the main site folder called jon-arbuckle-site:

f478d6552af99afc

----------------------------------------------------------------------------------------------------------------------------------------------

I begin coding, starting with the main page, index.html :

149c5fec77a6d1c2


Result:

5c93e630a491ff788622d07c

----------------------------------------------------------------------------------------------------------------------------------------------

Then work.html:

2acd8e2ccd4ff071


Result:

9f22b860ac7dc60d66475d74b314a971

----------------------------------------------------------------------------------------------------------------------------------------------

Next, about.html:

2e4012f1

Result:

5f43acd3fb28c513

----------------------------------------------------------------------------------------------------------------------------------------------

Finally, contact.html:

2711fc72

Result:

bc7b3ea6

----------------------------------------------------------------------------------------------------------------------------------------------

After finishing, I ran my HTML code through the w3validator for each page.

index.html:
a5148119

----------------------------------------------------------------------------------------------------------------------------------------------

work.html:
a37cbafd----------------------------------------------------------------------------------------------------------------------------------------------

about.html:
3c3ee288----------------------------------------------------------------------------------------------------------------------------------------------

contact.html:
db91d532----------------------------------------------------------------------------------------------------------------------------------------------

In the end, I am happy with the results of my fully functional HTML-only website. As I learned that HTML is the backbone of a website, mastering the basic elements and knowing best practices is key to creating any webpage. I hope to take what I learned and apply it to all my web projects in the future. 

Now that I have HTML under my belt, I can't wait to start the Introduction to CSS: Add Fundamental Styles to a Portfolio Website and begin styling my website!

Comments

Please sign in or sign up to comment.