• Design philosophy is important
• Guides help everyone
• Underlying process can help website design
• Justify your needs

 

Things I Knew	Things I Learned	What I Want to Learn
How to promote and enforce the guide so it helps everyone	The philosophy of design	I want to better understand the commenting system
How the commenting system works	The underlying process and how it can help you design your website
You need to justify your needs because it matters in the design	The index of components which means what you need on a website

• Style guides help keep a consistent webpage
• Style guides start life as brand guidelines
• Best way to use correct design is by giving people the right tools
• The resources in a style guide come from several different teams

Things I Knew	Things I Learned	What I Want to Learn
Word choice is important anywhere	Style guides aren’t just for big companies	What is the best way to make a style guide
Visual inconsistency stands out a lot	The style guide sums up the company philosophy
Use your resources well	Don’t try to reinvent the wheel when making a style guide

• People usually skim the content before reading
• Make sure content is written in a way to make decisions quicker
• Titles are best that read from specific to general
• Use meaningful markup in a logical order

 

Things I Knew	Things I Learned	What I Want to Learn
The main heading is usually the first thing noticed	Everyone has a different way to digest a webpage	The best way to effectively utilize markup
Put important things first	Titles are used by default when bookmarking a page
Page titles are useful to everyone	There are many tools that rely on markup

• Best features of accessibility has been ease of use
• Forms need correct formats and values
• Errors messages needed for website
• Fixed layouts don’t respond well to text resizing

Things I Knew	Things I Learned	What I Want to Learn
Different web sizes usually known as mobile, tablet, and desktop	Reflowing content helps people with low vision	The best way to flow content for all users
Error messages are used to help fix reported bugs	Don’t assume how the viewer uses your website
Content needs to have a correct flow	Magnification can sometimes be needed up to 1600%

• Show notes can’t replace a transcript
• Not everything needs a text equivalent
• Form labels help almost everyone
• Placeholders shouldn’t be used as a label

Things I Knew	Things I Learned	What I Want to Learn
People that are deaf rely on a transcript for audio	If an image doesn’t have alt-text, it reads the image’s source attribute	The best uses for a placeholder
Image formats should have alt-text for screen readers	Labels help people with mobility and dexterity impairments
Audio descriptions are used to describe what is happening on screen if someone has low vision	The placeholder is a relatively recent addition to HTML

 

• Things being read in right order is important
• Touch friendly interfaces serves to make content more inclusive
• Gestures are powerful ways to use touch screens
• Web used to only be text-based

 

Things I Knew	Things I Learned	What I Want to Learn
User expects content top-bottom and left-right	Some people may never even touch the screen	How to better incorporate touch gestures
Touch interfaces vary in size	The web used to be exclusively text-based
An image does not always need a text equivalent	Some content should not be accessible on purpose

 

• Types of vision can make it look like the user is looking through a straw
• Keyboard navigation is a fundamental principle
• Divs can’t be tabbed to by default
• Javascript can go wrong and make a keyboard trap

 

Things I Knew	Things I Learned	What I Want to Learn
Certain people exclusively use a keyboard over a mouse	Making things accessible with a keyboard helps those that can’t use a mouse	How to ensure keyboard traps don’t occur
Zooming in on a screen is useful for users with poor vision	Using simple elements allows keyboard accessibility by default
Keyboard usage is important to think about while design a website	A keyboard trap is when the keyboard cursor gets stuck

• Accessibility important for everyone
• Color is very powerful tool for developer
• Contrast needed to easily distinguish different objects
• Animation needs to be used responsibly

 

Things I Knew	Things I Learned	What I Want to Learn
Website needs to be disability-friendly	Animation on a website can be harmful to vision	How to effectively use colors in all designs
Color is important in many areas of design	Contrast is needed to clearly see objects
Content should be well-structured	How crucial it is to cater to disabilities

1. What was you previous experience with HTML & CSS?

-In 9th grade, I worked in HTML and CSS through Mr. Ball’s computer class. There was a group project where we also had to design a website so I have retained some of that knowledge to assist me this year.

2. What is the most important thing you learned?

-The most important thing I have learned from working with HTML is that things don’t always go as planned. A splice of code may appear to work, but then completely ruin the website when implemented. Live preview is a life saver as it helps quickly point out problems that could otherwise go unnoticed.

3. What do you wish you had spent more time on a done differently?

-I wish I had spent more time on on the actual index page. While working on it though, I accidentally replaced the file with another and could not get my original work back. It had discouraged me greatly as I had spent a lot of time on it. That led me to actually changing my entire website design which may have been for better or for worse.

4. What part of the project did you find the most challenging and how did you overcome that challenge?

-The most challenging aspect was bug fixing. Some code just wouldn’t work as I intended, and is was tasking to find out what needed to be changed. Some of my ideas actually couldn’t be implemented as the code was too advanced for me to figure out.

5. What was the most enjoyable part of the project?

-The most enjoyable part was seeing the final project and being done with everything. I spent a lot of time on the project and it was pleasant to see that it was worth it. I can be a bit of a perfectionist at times so I like to admire my work at the end of most projects/

6. What was the least enjoyable part of the project?

-The least enjoyable part of the project was when things didn’t work out as I wanted. Usually it could be fixed fairly easily as I would find out what needed to be changed, but it was annoying when it wouldn’t be so quick.

7. Describe your project and the process steps that you took.

-My project was about Marvel’s top 3 movies. I prefered Infinity War, Spider-man: Homecoming, and Thor: Ragnarok. I linked each trailer as well so people unfamiliar with the movies could get a sense for why I like them so much. I had a contact page where the viewer inputs their first/last name, country, and something to write about. I also had an about page where I talked about myself. I started with the main page directing to all of the other webpages first, and then created all of the other pages.

 

8. How could the teacher change the project to make it better?

I am a high school student enrolled in a Web Design class. I enjoy playing Nintendo games like Splatoon and Super Mario. I have 2 brothers and 1 sister. Here is my philosophy on Web Design: A user interface is like a joke. If you have to explain it, it’s not that good.

Some good websites to help improve your own about me page are listed below:

• 10 Rules for Writing A Compelling About Me Page
• How to Write an About Me Page: Templates & Examples
• How to Write a Perfect About Me Page With Examples

Thanks for reading my About Me Page, don’t forget to follow my blog for the next time I post.

Contact Info: Michael.30032@nv.ccsd.net