Client:

Coursework

Service:

HTML/CSS

Personal Blog Project

html/css coding

2024

This project was a coding assignment for one my my technology courses. The goal of this project was to showcase my experience and knowledge in html/css. For this project I decided to design a blog about my jewelry small business with a short about me page along with a contacts page. Follow me on my design journey for this assignment and see where I drew my inspirations from and the design choices I made for the final website!

When

March 2024

Role

Designer & Developer

Tools

HTML
CSS
Procreate
Github

Project Goal

Code a website with topic of choice can be anything like work experience, areas of expertise or interest, personal information, career goals, hobbies, etc.

HTML Requirements

  • Must include a page named index.html (as your site’s homepage)
  • Should include additional HTML files as necessary to build out your site (for a total of 3 to 5pages), e.g. resume.html, all relatively linked through some form of navigational section
  • All your html file(s) must be implemented using HTML5 and should be validated in an html5validator
  • Within your site, include at a minimum:
    - One table (with any contents)
    - One ordered list (with any contents)
    - One unordered list (with any contents)
    - A third list that is a nested list (with any contents)
    - Links and images*, as appropriate
    - Copyright symbol, your name, and the current year at the end of every page

    *Images must adhere to copyright law. Use your own multi-media work or freely reusable images (e.g. Creative Commons licensed work, DALL-E images you create, etc.) where desired.

CSS Requirements

  • Your HTML files should link to your external css file in the head of your file (e.g., <linkrel="stylesheet" type="text/css" href="screen.css">) and all CSS styles should be contained in this one external CSS file that is used across every page in your site.
  • Your CSS file must validate according to the http://jigsaw.w3.org/css-validator/ validator.
  • In your CSS styles, you should at a minimum:
    - Define and use one type selector, e.g. p {...}
    - Define and use one id selector, e.g. #footer {...}
    - Define and use one class selector, e.g. .description {...}
    - Use CSS to generally style your page(s), e.g. to control border, width, color,background-color, font style, font size, layout and positioning, etc.

Sketching

Taking Inspirations

  • Went on Pinterest and browsed different existing blog templates
  • Saved layouts I liked and took notes on them to point out feature I'd like to add to my own website
  • Really liked the image and text layering done in the first resource
  • Really liked the clutter of paint strokes on the other resource. Brainstormed ideas how I could incorporate that idea:
    - as a visual navigation "bar". Different paint stroke lead to different page on the website!

Sketching Ideas

  • Sketched out Ideas for each page to see which layout worked best for each page
  • Played around with the image to text layering
  • Hand sketched elements and designs I wanted to add to my blog:
    - Logo
    - Paint strokes
    - Background image
    - handwritten notes
    - Materials list on blog page
Hand-Sketched paint strokes and handwritten notes for home page
Hand-Sketched materials list as a visual guide for the blog page
Hand-Sketched pattern made for the background
Hand-Sketched diagram of my background for the about me page

View Project