Introduction 🌐#
This article marks the beginning of my Cloud Resume Challenge, a project designed to help individuals showcase their cloud skills by creating a personal website hosted on the cloud. In this series, I’ll cover the first three key steps of the challenge.
Here is the link to the Cloud Resume Challenge website if you’d like to take the challenge yourself! It can be tough, but it’s a great way to build your skills and work towards a career in cloud computing.
On the website, you can choose whether you want to take the challenge with AWS, Azure, or GCP. I chose Azure because I use it both at school and at work, so it’s easier for me. 🙂
Certification 📜#
The first objective is to obtain the AZ-900 Certification, which is an introductory certification designed for beginners. I’ve created a guide with useful materials to help you pass this certification!
We will look at these subjects in the next article here !
HTML 💻#
The easiest part of the challenge so far, you need to write an HTML resume !
This breakdown explains each part clearly while maintaining the structure.
HTML Document Structure#
This declaration defines the document type and version of HTML (HTML5). It’s required for modern browsers to render the page correctly.
<!DOCTYPE html>
<html lang="en">
The html tag is the root element of the HTML document. The lang=“en” attribute specifies that the document’s language is English. This is important for accessibility and search engine optimization (SEO).
Metadata: The head Section#
The head section contains metadata (information about the page), links to stylesheets, scripts, and the title of the page.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="resume.css">
<title>Resume Challenge - HTML</title>
</head>
Link is linking to an external CSS file to style the document (styles will be defined in the resume.css file).
Main Content: The body Section#
The body contains the visible content of the webpage, which includes text, images, links, etc.
<body>
<h1>Anonymous</h1>
<h2>Student - Resume Challenge :) </h2>
<p class="title">Skills</p>
<ul>
<li>Cloud Computing</li>
<li>Infrastructure as Code (Terraform, Ansible)</li>
<li>Containerization (Kubernetes, Docker)</li>
<li>Python Scripting</li>
<li>Version Control (GitHub)</li>
</ul>
<p class="title">Education</p>
<ul>
<li>Engineering degree (Expected 2027)</li>
<li>Bachelor's degree in Computer Science (2024)</li>
</ul>
<p class="title">Experience</p>
<ul>
<li>Cloud Infrastructure Engineer - Internship (2024 - 2027)</li>
<li>Network Technician - Internship (2023 - 2024)</li>
</ul>
<p class="title">Certifications</p>
<ul>
<li>AZ-900 Microsoft Fundamentals (2024)</li>
<li>Cybersecurity Concepts - ANSSI MOOC</li>
</ul>
</body>
Main Title (h1)#
The largest heading for your name. Nothing else 😄
<h1>Anonymous</h1>
Subheading (h2)#
A smaller heading that introduces the section (Student and Resume Challenge).
<h2>Student - Resume Challenge :)</h2>
Section Titles ( p class=“title”>)#
Used for each category (Skills, Education, Experience, Certifications).
<p class="title">Skills</p>
Unordered List (ul) and List Items (li)#
Unordered lists ul are used to display a list of items, and each item is wrapped in li tags. The class=“title” is used to style the section titles.
Example for the "Skills" section:
<ul>
<li>Cloud Computing</li>
<li>Infrastructure as Code (Terraform, Ansible)</li>
<li>Containerization (Kubernetes, Docker)</li>
<li>Python Scripting</li>
<li>Version Control (GitHub)</li>
</ul>
All sections use the same structure of a paragraph with a title followed by an unordered list of items ! Very simple isn’t it ?
The footer Section#
The footer is typically used for copyright or additional information. In your case, it’s empty, which might be fine if you want to leave it for now.
<footer></footer>
Nothing too complicated. HTML is straightforward once you get the hang of it. Just using a few basic tags can go a long way in creating a clean, structured resume. You’ve got this!
CSS 🎨#
Once your HTML resume is ready, it’s time to style it! Here is a cheatsheet to modify your website.
Here is a quick example that i’ve done :
Universal Selector (*)#
Applies styles to all elements on the page.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
Resets margin and padding for all elements.
Uses border-box to include padding and borders within an element’s total width and height.
Sets the font to Arial for all text.
Body Styling (body)#
Defines the overall look of the body, including background color, text color, and padding.
body {
background-color: #f0f4f8;
color: #333;
font-size: 16px;
line-height: 1.6;
padding: 20px;
}
Light gray background (#f0f4f8), dark text (#333), and spacing of 20px around the content.
Header Styling (header)#
Centers the header content and adds margin below it.
header {
text-align: center;
margin-bottom: 30px;
}
Main Titles (h1)#
Large main title with a blue-gray color (#2c3e50) and spacing below.
h1 {
font-size: 36px;
color: #2c3e50;
margin-bottom: 10px;
}
Secondary Titles (h2)#
Smaller title with a lighter gray color (#7f8c8d) and space below.
h2 {
font-size: 20px;
color: #7f8c8d;
margin-bottom: 30px;
}
Title Paragraph (p title)#
Bold, uppercase titles for sections, with letter spacing and margin adjustments.
p.title {
font-size: 24px;
font-weight: bold;
color: #2c3e50;
margin-top: 30px;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 2px;
}
Unordered List (ul) and List Items (li)#
Removes default list bullets and adds custom ones (li:before).
ul {
list-style-type: none;
padding-left: 0;
}
li {
font-size: 18px;
margin-bottom: 10px;
padding-left: 20px;
position: relative;
}
li:before {
content: '•';
color: #3498db;
position: absolute;
left: 0;
font-size: 20px;
top: 0;
}
Custom bullet color (#3498db) for list items.#
Footer Styling (footer)
Footer is centered, with a smaller font size and a border above.
footer {
text-align: center;
font-size: 14px;
color: #7f8c8d;
margin-top: 50px;
border-top: 1px solid #ddd;
padding-top: 20px;
}
Links (a)#
Custom link color and a smooth transition when hovered.
a {
color: #3498db;
text-decoration: none;
transition: color 0.3s;
}
a:hover {
color: #2c3e50;
}
Links are blue by default and change to a darker color on hover.
Now, your resume is styled with colors, fonts, and layout adjustments! 🎉
What’s next ? 🚀#
After completing your HTML and CSS, the next step in the Cloud Resume Challenge is to deploy your resume online using an Azure Storage Static Website. This part involves configuring Azure Storage, uploading your resume files, and making your site publicly accessible.
Stay tuned for the next article where I’ll walk you through deploying your website on Azure! 🌐
We will look at these subjects in the next article here !