No Frills Card


by Jeremy Caudle
code

Kept it simple with today's post after spending a few hours working throught my current track on Treehouse. I don't work much with cards, so I thought I'd get some practice in.

UX and QA

Today I spent some time on Treehouse working through my current track. I have just a few more courses left and today I tackled the User Experience intro and a QA on web design. The QA discussed some topics that are good for people new to web design and front-end development, but it really needs an update. I still got a few useful things from it, as well as the UX course. I had never worked with empathy maps before, and that was a handy thing to learn about.

This post is more similar to a regular blog post than I'd like, but I want to get something posted and working through it instead of worrying about making something new and exciting helps.

View the code:

HTML and JS 
<div class="code-block">
<h2>UX and QA</h2>
<p>Today I spent some time on Treehouse working through my current track. I have just a few more courses left and today I tackled the User Experience intro and a QA on web design. The QA discussed some topics that are good for people new to web design and front-end development, but it really needs an update. I still got a few useful things from it, as well as the UX course. I had never worked with empathy maps before, and that was a handy thing to learn about.</p>
<footer>This post is more similar to a regular blog post than I'd like, but I want to get something posted and working through it instead of worrying about making something new and exciting helps.</footer>
</div>
CSS 
.code-block {
	width: clamp(16em, 90vw, 32em);
	margin: 2rem auto;
	font-size: 18px;
	line-height: 1.5;
	padding: 0;
	font-family: Helvetica, Arial, sans-serif;
	border-radius: 1rem;
	border-right: solid 1px darkgray;
	border-left: solid 1px darkgray;
}

.code-block h2 {
	font-size: 2.25rem;
	font-weight: 900;
	margin: 0;
	padding: .5rem 1rem;
	background-color: darkgray;
	color: #232323;
	text-align: center;
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
}

.code-block p {
line-height: 1.5;
background-color: white;
padding: 1rem;
}

.code-block footer {
padding: .5rem 1rem;
background-color: darkgray;
color: #fff;
font-size: .75rem;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
}

Tags