Adding More Content
Adding More Content
Hello! This workshop will be helping you create additional awesomeness (read: content) for your website.
Adding More Content
Your Instructor:
A big shout-out to the other instructors, mentors and the Ladies Learning Code team.
Course Outline
Overview
- Importance, Quality, Clarity
- Start State
- Pricing Tables
- Recommendations
- Blog
Importance, Quality, Clarity
Quality
Stock Images
We Work Hard, But We Have Fun
no.
Stock Images
Business Person Being Stressed
stop it.
Stock Images
Best Business Meeting Ever
lies.
Clarity
A user should know exactly what your site is about within a couple seconds
Animations
Animations are great. As long as things stop moving so I can actually click something.
sundaymorning.ekwc.nlNo Rainbows
No Blinking Anything
ronoslund.comNo Clipart
The CS Promise
Start State
Pricing Tables
Overview
- Quick Discussion: tables vs divs
- HTML
- CSS
- Responsiveness
Quick Discussion
Tables vs Divs
Example of Table Markup
<table>
<!-- Table Headers -->
<thead>
<tr>
<th>Column 01</th>
<th>Column 02</th>
</tr>
</thead>
<!-- Table Content -->
<tbody>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</tbody>
</table>
HTML - The DIVS Approach
Container
<section id="pricing" class="pricing box"> </section>
HTML (Continued)
Building a pricing plan
<!doctype html>
<section id="pricing" class="pricing box">
<h2>Pricing Plans</h2>
<ul class="plan starter">
<li>Starter</li> <!-- PLAN NAME -->
<li>$9/Month</li> <!-- PLAN PRICE -->
<li>10GB Disk Space</li>
<li>100GB Bandwidth</li>
<li>10 Email Accounts</li>
<li>Unlimited Subdomains</li>
<li>Free Shared SSL</li>
<li>Free backups</li>
<li>Full time support</li>
<!-- ADDITIONAL DETAILS GO HERE -->
<li><a href="#">Sign Up</a></li>
</ul>
</section>
CSS
General pricing plan styling
#pricing{
text-align: center;
}
#pricing .plan{
list-style-type: none;
width: 22%;
min-width: 300px;
margin: 0 1%;
display: inline-block;
border: 1px solid #e5e5e5;
padding: 0;
margin-bottom: 30px;
}
#pricing .plan li{
padding: 15px;
font-size: 12px;
}
Enhancing our pricing plan
Heading
HTML
<!doctype html> <li class="heading">Starter</li>
CSS
#pricing .plan .heading{
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
color:#666;
}
Enhancing our pricing plan
Table "stripes"
HTML
<!doctype html> <li class="odd heading">Starter</li> <li>9/Month</li> <li class="odd">10GB Disk Space</li> <li>100GB Bandwidth</li> <li class="odd">10 Email Accounts</li>
CSS
#pricing .plan .odd{
background-color: #f4f4f4;
}
Enhancing our pricing plan
Stlying the "price"
HTML
<!doctype html> <li> <span class="plan-price">$9</span> <sub>/ Month</sub> </li>
CSS
#pricing .plan .plan-price{
font-size: 24px;
}
#pricing .plan sub{
text-transform: uppercase;
margin-left:2px;
}
Enhancing our pricing plan
Multiple plans
CSS
#pricing .plan.starter .plan-price{
color: #5D9CEC;
}
#pricing .plan.starter .signup{
background-color: #5D9CEC;
}
#pricing .plan .signup a{
color: white;
text-decoration: none;
}
Enhancing our pricing plan
Multiple plans
CSS
/* Starter Plan */
#pricing .plan.starter .plan-price{
color: #5D9CEC;
}
#pricing .plan.starter .signup{
background-color: #5D9CEC;
}
/* Basic Plan */
#pricing .plan.basic .plan-price{
color: #48CFAE;
}
#pricing .plan.basic .signup{
background-color: #48CFAE;
}
/* Premium Plan */
#pricing .plan.premium .plan-price{
color: #ED5564;
}
#pricing .plan.premium .signup{
background-color: #ED5564;
}
/* Master Plan */
#pricing .plan.master .plan-price{
color: #FFAD33;
}
#pricing .plan.master .signup{
background-color: #FFAD33;
}
Recommended By
(OR) Testimonials
Recommended By
Overview
- HTML
- CSS
- Responsiveness
Recommended By
HTML
<!doctype html>
<section id="recommended" class="recommended box">
<h2>Recommended By Folks At</h2>
<div class="companies">
<img src="images/gibson_logo.png" class="company"/>
<img src="images/netflix_logo.png" class="company"/>
<img src="images/google_logo.png" class="company"/>
<!-- Insert More Companies Here -->
</div>
</section>
Recommended By
CSS
#recommended{
text-align: center;
}
#recommended .companies{
padding: 70px 10px;
background-color: #f4f4f4;
border: 1px solid #e2e2e2;
}
#recommended .company{
height: 50px;
padding: 20px 20px;
}
Blog Posts
Blog Posts
Overview
- HTML: Starting Structure
- HTML: Post Header
- CSS
- HTML + CSS: Blog Description
- Responsiveness
Blog Posts
Starting Structure
HTML
<!doctype html>
<section id="blog" class="blog box">
<h2>Recent Posts
<div class="post">
<header class="post-header"> </header>
<div class="blog-description"> </div>
</div>
</section>
Blog Posts
Post Header
HTML - Expanding out the Post Header
<!doctype html>
<header class="post-header">
<img src="images/profile.jpg" class="post-avatar">
<h4 class="post-title">Blogpost Title</h4>
<p class="post-meta">
By
<a href="#" class="post-author">Haris Mahmood</a>
under <a href="#" class="post-category">JavaScript</a>
<a href="#" class="post-category">Rails</a>
</p>
</header>
Blog Posts
CSS
#blog .post{
text-align: left;
margin: 30px 0;
}
#blog .post .post-avatar{
float: left;
height: 55px;
width: 55px;
border-radius: 50%;
margin-right: 15px;
}
#blog .post .post-title{
font-size: 24px;
font-weight: bold;
margin: 0;
}
Blog Posts
CSS (Continued)
#blog .post .post-meta{
color: #999999;
margin: 5px 0 15px;
}
#blog .post .post-author{
color: #3d92c9;
text-decoration: none;
}
#blog .post .post-author:hover{
text-decoration: underline;
}
#blog .post .post-category{
margin: 0 0.1em;
padding: 0.3em 1em;
color: #fff;
background: #df2d4f;
font-size: 80%;
text-decoration: none;
}
Blog Posts
Blog Description Content
CSS
#blog .post .blog-description{
line-height: 26px;
}