Fix the Web with CSS!

Usability Improvements

1. Craigslist

Before

After

CSS Code

span.txt {
	color:black;
	}

.homepage .txt {
	color: black;
	margin: auto;
	font-size: 2vw;
	padding: 5px;
	text-decoration: none;
	display: inline-block;
	border-radius: 5px;
}

.homepage .txt:hover {
	background-color: #e1fcff;
}

.homepage .txt:visited {
	background-color: #a72fe2;
}

a.cl-location-picker-link:hover {
	background-color: #cf97e5;
}
a.cl-location-picker-link {
	color: black;
}

.homepage a {
	color: black;}

.homepage a:hover {
	background-color: #e1fcff;
}
.homepage a:visited {
	color: #5469ff;
}

.homepage #rightbar h5.hot {
	color: black;
}

homepage #rightbar h5.hot:hover{
	background-color: #7ab2b8;
}

.ban:hover {
	background-color: #7ab2b8;

}
		
		

Usability Improvement(s): Learnability

Here I made changes like making it so links change when you interact with them and distinguishing them using color by type in order to improve the rate at which a new user would be able to pick up on how to navigate the website.

2. Craigslist

Before

After

CSS Code

				body.homepage.en.bd-can-hover.desktop.w1024.regular {
					background-color: black;
				}

				.homepage txt {
					background-color: black;
					border-block-color:black;
					color: white;
				}



				.homepage .col ul li a, .homepage .col ul.mc, div, h1,
				h2, h3, h4, h5, h6, h7, p, ul, ol, .ban, .leftbar,
				.homepage #rightbar, #topban .sublinks a,
				.cl-homepage-action-links a.cl-thumb-anchor .cl-label,
				.homepage footer, .cl-home-search-field .cl-search-dropdown input,
				.homepage a, topban, .homepage .col ul, #topban .sublinks li,
				#topban, .homepage #rightbar h5.active{
					background-color: black;
					color: white;
				}

				.homepage .col ul li a:hover, .homepage #rightbar h5.active:hover {
					background-color:#4347e3
				}

				.homepage #rightbar h5 {
					color: #b9bffd;
				}
				.homepage #rightbar h5:hover {
					color:white;
					background-color: #3d3de7;
				}

				.homepage #rightbar ul.menu li.s:hover, .homepage #rightbar ul.menu li.s a:hover {
					color:white;
					background-color: #3d3de7;
				}

				.homepage .leftlinks li a:hover {
					background-color:red;
					color:white;
				}

				#topban .sublinks a:hover {
					background-color:#854a84;
					color:white;
				}
			

Usability Improvement(s): Learnability and Efficiency

I essentially used CSS to create a dark mode for the website. Dark mode has been known to reduce eye strain and be easier on the eyes, so that along with the added contrast will likely make it easier and faster to scan lisitngs and information.

3. Canvas Discussion Post

Before

After

CSS Code

				button[data-testid="DiscussionEdit-cancel"] {
					position: relative;
					right: 20vw;
					background-color: red;
					color: white;
					padding: 10px 20px;


				  }

				  .css-amikb4-view--block-baseButton.css-amikb4-view--block-baseButton.css-amikb4-view--block-baseButton.css-amikb4-view--block-baseButton.css-amikb4-view--block-baseButton.css-amikb4-view--block-baseButton.css-amikb4-view--block-baseButton.css-amikb4-view--block-baseButton.css-amikb4-view--block-baseButton.css-amikb4-view--block-baseButton:hover {
					border-style: solid;
					border-color: #f90000;
					border-width:.2em;
					color: #f42828;
					font-size:200%;
					font-style:italic;
				  }
			

Improvement(s): Safety

On the page format for discusison posts on Canvas, the button for cancel which wipes away your progress and can't be undone is directly next to the button to post your reply. I added a thicker border, the color red, and a different font styling when the user hovers over the cancel button to prevent description errors.