Minimalist Web Development Tutorial – Part 2: Print and Screen Styles
⇒ Continued from Part 1
Imagine you got a girlfriend; she's sexy and French. She's invited you to meet her parents in Aix-en-Provence — but instead of studying la langue française, you brought along a pocket translator. After exchanging some air kisses with la madame, a hearty handshake with le vieux monsieur, and some "bonjour"s all around, you're ready to make a good first impression. The family waits expectantly...you whip out your translator, punch in an English sentence...wait 30 interminable seconds...and then the device farts some robot caveman French at them. The smiles evaporate off your ex-future in-laws' faces. They reluctantly take the translator from you and now it's their turn to disgrace themselves.
Your hot French girlfriend don't want no scrubs. But you didn't bother to learn her mother tongue. You won't get that good love from your web browser neither, if you rely on Bootstrap instead of learning CSS properly.
You see, back in the day, we was out-of-control...
Early web development was primitive and frustrating. HTML content was polluted with styling elements and attributes. And web content wasn't suitable for low-resolution screens, printing, or screen readers.
CSS (Cascading Style Sheets) was created in order to ameliorate these issues. Until 2015 or so, web development was still miserable because web browsers, especially Internet Explorer, were slow to support CSS standards completely.
But now in the present future, users can take their pick from many different web browsers on many hardware platforms. We can write semantic HTML markup and style it using CSS.
Page Styles
We first create a stylesheet by adding a <link> element to the <head> element.
index.html
<head>
...
<link href="./site.css" rel="stylesheet" />
</head>
<body>
...
</body>
This first stylesheet contains some generic styles that are meant to apply site-wide. We create styles in CSS to choose the font-family, font-weight, and page dimensions. These styles usually have element or wildcard selectors, unlike the class or id selectors we will be using for most of our other stylesheets.
site.css
*
{
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
body
{
background-color: #eeeee8;
color: #111b1e;
font-family: Georgia, serif;
margin: auto;
max-width: 1280px;
}
@media screen
{
body
{
font-size: 18px;
padding: .5in;
}
}
@media print
{
body
{
font-size: 12px;
padding: 0;
}
}
h1,
h2,
h3,
h4,
h5,
h6
{
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
b
{
white-space: nowrap;
}
Because we always work with a version-control system (it's always Git, of course), we alphabetize the CSS properties that we set with each rule. This ensures that stylesheet changes will merge smoothly.
Note that we are setting the default font size at the body element level and we are using px units. We are following a specific technique to support accessibility: we set a base text size in px units, and then later use em units for sizing headers, scalable margins, etc. This ensures that users may increase or decrease the zoom level with text scaling as designed.
We set the font size to 18px for screens and 12px for paper, so that there are appropriate defaults for different media. In order to achieve this, we use media query selectors in our CSS rules.
Section Styles
Now we wish to style the different sections of the résumé, so we link a new stylesheet in <head>. The optimal size for a source file is between 20-200 lines, so we break apart our styles into multiple files.
We will be creating styles for the different <section>s of our webpage, so we want to create CSS ids/classes in order to reference specific elements. Notice that we have added the resume-section, resume-section-title, and resume-section-body classes so that our CSS rules can target them efficiently.
index.html
<head>
...
<link href="./section.css" rel="stylesheet" />
</head>
<body>
<main>
...
<section class="resume-section">
<h2 class="resume-section-title">Education</h2>
<div class="resume-section-body">
...
</div>
</section>
<section class="resume-section">
<h2 class="resume-section-title">Technical Experience</h2>
<div class="resume-section-body">
...
</div>
</section>
<section class="resume-section">
<h2 class="resume-section-title">Work History</h2>
<div class="resume-section-body">
...
</div>
</section>
</main>
</body>
section.css
.resume-section
{
margin-top: .5in;
}
.resume-section-title
{
background-color: #d0d0c0;
border: 2px solid #afafa8;
font-size: 1em;
padding: 5px;
}
.resume-section-body
{
margin-left: .5in;
margin-right: .5in;
}
Header Styles
The next stylesheet adds styles to the header at top of page.
index.html
<head>
...
<link href="./header.css" rel="stylesheet" />
</head>
<body>
<header id="resume-header">
<h1 id="resume-heading">Amir Lewis</h1>
<i id="resume-tagline">
Enthusiastic <b>Full-Stack Web Developer</b> with a passion
for crafting elegant and efficient web solutions
</i>
</header>
<main>
...
</main>
</body>
header.css
@media screen
{
#resume-header
{
align-items: center;
display: flex;
flex-direction: column;
row-gap: .25em;
}
}
@media print
{
#resume-header
{
text-align: center;
}
}
#resume-heading
{
background-color: #6a93a1;
color: #fff;
font-size: 3em;
margin: 0;
padding-bottom: .25em;
width: 100%;
}
#resume-heading,
#resume-tagline
{
padding-top: .25em;
text-align: center;
}
#resume-tagline
{
display: block;
padding-left: 1.5em;
padding-right: 1.5em;
}
@media screen
{
#resume-tagline
{
font-size: 1.25em;
}
}
@media print
{
#resume-tagline
{
font-size: 1em;
margin-top: .25em;
}
}
Working on the header inspires our first use of an advanced layout technology: Flexbox. We're flexing down rows in a column with gaps between the rows.
The resume tagline is a good candidate for the <i> element because it is an example of idiomatic text.
Education section styles
For the education section, we want a table with interior borders. We make an exception to our usual policy of using id/class selectors because we want to target non-initial rows and columns. For these sorts of tables, the border is still always applied to the <td> element.
index.html
<head>
...
<link href="./education.css" rel="stylesheet" />
</head>
education.css
#education-table
{
border-collapse: collapse;
}
#education-table td
{
padding: .35em;
}
#education-table tr+tr td
{
border-top: 1px solid #afafa8;
}
#education-table td+td
{
border-left: 1px solid #afafa8;
}
Technical Experience section styles
We add another stylesheet for the styles relating to the Technical Experience section.
index.html
<head>
...
<link href="./technical-experience.css" rel="stylesheet" />
</head>
technical-experience.css
#technical-experience-container
{
align-items: flex-start;
display: flex;
justify-content: space-around;
}
.technical-experience-table
{
border-collapse: collapse;
}
.technical-experience-table td
{
padding: .35em;
}
.technical-experience-table tr+tr td
{
border-top: 1px solid #afafa8;
}
.technical-experience-table td+td
{
border-left: 1px solid #afafa8;
}
.technical-experience-skill
{
text-align: right;
}
We organize the list of skills into two tables for greater visibility. We give each technical experience table the same inner borders that we used for the education table.
Work History section styles
Our final stylesheet will contain styles for the Work History section. We are arranging these in a grid, so this is an opportunity to use CSS grid layout. We do not wish for any work history item to be page-split, so we add break-inside: avoid; and page-break-inside: avoid;.
index.html
<head>
...
<link href="./work-history.css" rel="stylesheet" />
</head>
<body>
<main>
...
<section class="resume-section">
<h2 class="resume-section-title">Work History</h2>
<div class="resume-section-body">
<div id="work-history-grid">
<article class="work-history-item">
<header class="work-history-item-header">
...
</header>
<ul class="work-history-item-body-details">
...
</ul>
</article>
...
</div>
</div>
</section>
</main>
</body>
work-history.css
#work-history-grid
{
column-gap: 1.5em;
display: grid;
grid-column-gap: 1.5em;
-webkit-column-gap: 1.5em;
grid-row-gap: 2.5em;
grid-template-columns: 1fr 1fr;
margin-top: 1.5em;
row-gap: 2.5em;
}
.work-history-item
{
border: 2px solid #afafa8;
break-inside: avoid;
-webkit-column-break-inside: avoid;
display: inline-block;
page-break-inside: avoid;
}
.work-history-item-header
{
background-color: #deebef;
border-bottom: 1px solid #afafa8;
display: flex;
font-size: .85em;
gap: .15em;
justify-content: space-between;
padding: .35em;
}
.work-history-item-term
{
text-align: right;
width: 9em;
}
.work-history-item-body-details
{
display: flex;
flex-direction: column;
font-size: .875em;
gap: .5em;
margin: 1em;
margin-block: .5em;
padding-inline-start: 1em;
}
I am an experienced computer science instructor and programmer, boasting over 15 years of expertise in the field. Throughout my career, I’ve primarily focused on full-stack web development, honing my skills in various programming languages and frameworks. Additionally, I have delved into desktop, embedded systems, and game development, diversifying my portfolio and gaining valuable insights into different areas of software engineering.
My journey in the tech industry has been dynamic and multifaceted. As a full-stack web developer, I’ve tackled a wide range of projects, from building robust backend systems to crafting intuitive user interfaces. This experience has equipped me with a comprehensive understanding of web development principles and practices.
Beyond web development, I’ve also ventured into desktop application development, leveraging my programming prowess to create efficient and user-friendly software solutions. Additionally, my foray into embedded systems has allowed me to explore the intersection of hardware and software, developing firmware for various embedded devices.
Furthermore, I’ve dabbled in game development, harnessing my creativity and technical skills to bring immersive gaming experiences to life. Whether it’s coding gameplay mechanics or optimizing performance, I thrive on the challenges and rewards of game development. https://attractivenesstest.online/
Throughout my career, I’ve remained committed to continuous learning and staying abreast of emerging technologies. I take pride in sharing my knowledge and expertise with aspiring developers as a computer science instructor, nurturing the next generation of tech talent.
In summary, my extensive experience spans across full-stack web development, desktop applications, embedded systems, and game development. With a passion for innovation and a wealth of knowledge in software engineering, I am poised to tackle any challenge that comes my way in the ever-evolving world of technology.