Cloud Resume Challenge Tutorial — Part 1 of 6
Part 1: Development and Workflow Setup
Introduction
This tutorial is a hands-on, project-based review of web development fundamentals designed to prepare you to pass your Azure Fundamentals Certification (AZ900). You will apply the concepts from AZ900 to a real project in Azure using real processes and approaches that engineers use for real projects. You don’t need to know command line, HTML, or networking. But by the time you finish, you will have a basic understanding of these concepts. It is written for the non-technical person, starting from an absolute beginner point of view.
Based on Forrest Brazeal’s Cloud Resume Challenge, this tutorial shows you one of many possible ways to build and host a simple website in Azure. The tutorial also will show you which tools to use and how to build a software development workflow. I’ve consulted with software developers throughout so that you can have confidence that the workflow is based on real, best practices. With a solid workflow foundation in place, you can expand the Cloud Resume Challenge to some of the optional enhancements, or even start new your own new projects, learning, exploring and building with Azure.
Project Overview
In this six-part project, you’ll complete the following:
· Part 1 — Create Your Resume in a GitHub Workflow (you are here)
· Part 2 — Activate Azure Storage Static Webpage
· Part 3 — Activate a URL and Configure DNS and Azure Front Door CDN
· Part 4 — Activate HTTPS
· Part 5 — Automate Your Workflow using GitHub Actions
· Part 6 — Add a Staging Webpage to Your Workflow
Tutorial Overview
Goals of Part 1
In Part 1 you will learn how to Use GitHub Desktop and Visual Studio Code to build a simple, functional resume and deploy it to a cloud-based repository in GitHub. GitHub Desktop makes learning Git easier. It simplifies Git with a graphical user interface (GUI), making it ideal for beginners who do not have experience in command line interface.
Components and Costs
· GitHub Desktop — free
· Github account — free
· Visual Studio Code — free
· Windows or Mac Workstation
AZ900 & Technology Terms
This section includes definitions of some technical terms that will be used in the tutorial for context and explanation that will also be helpful in your study for the AZ900 exam.
Workflow
A workflow is a process that keeps you organized, minimizes errors and makes you more efficient. It also enables you to scale change management on your website without taking it offline.
With a development workflow, you shouldn’t need to take your website offline while you make changes. Nor should you fear that making a change will break your production website. That is because when you use a development workflow based on Git, you create branches, make your changes in the branch, test those changes in a staging website. Once it passes the tests, it gets seamlessly merged into the production website. If something does break, you can use the workflow, based on Git, to revert to a prior version while you fix the bug.
In this project we’ll create the production (main) branch. Once you have completed steps 1–5, including your live website in Azure, we’ll come back and add the staging functionality. Once completed this is what your development environment will look like:
Repository
A repository is a folder where you keep your code base and other related files.
Git
Git is a version control system that runs in the background across your local and cloud repositories (folders) allows you to create branches off the main code base. It keeps track of all changes made against main so you (and others) can make changes and test them before merging them into your staging or main branch. The magic of Git is that it keeps track of all these changes so you can review and if needed, go back and undo changes back to prior versions if something breaks.
GitHub
GitHub is a cloud repository that leverages Git to manage changes. It enables developers to save, share and collaborate on code projects, all while leveraging Git to track and manage changes to a code base. For an explanation of Git see GitHub Flashcard or Git under Setup Resources
GitHub Desktop
GitHub Desktop is a graphical user interface (GUI) management system based on Git. It makes it easier to configure Git on your local machine and to keep track of your work as you work with local applications like Visual Studio Code, and GitHub.
HTML, CSS, Javascript
HTML, CSS and Javascript are the code that control the display, design and interactivity of web applications. Through them you design and display content through a web browser like Edge or Chrome.
· HTML — Structure and content.
· CSS — Style and design
· Javascript — Interactivity
Part 1 will keep the HTML code simple. I’ve included a basic resume template so you can focus on mastering the development workflow while you dabble a bit with HTML programming.
Setup Your Local Dev Environment with GitHub Desktop
Step 1 — Download tools and setup your workspace
· Download and install GitHub Desktop
· Create a GitHub account and use this to login to GitHub Desktop
· Using GitHub Desktop, create a new repository for your production / main website
· Give it a name like “Cloud Resume Challenge”
· Git Ignore — None
· License — None
· Create repository
· Publish the repository to GitHub
· View the repository in GitHub
GitHub desktop just guided you through the process to setup a local and cloud repository / folder for your code project and linked them together through Git change management. You are now ready to build your resume and track changes through GitHub desktop.
Step 2 — Code your resume
· Open Visual Studio Code from Github Desktop
· In Visual Studio Code, click “New” and type “index.html”, then click “create new”
· Follow prompts in Explorer to create the file
· Place your cursor on line 1 and paste the html resume template below into Visual Studio Code
· ChatGPT can generate your code. Here is the prompt I used to generate the template for this tutorial:
ChatGPT Prompt:
“generate html code for an online resume”
<!DOCTYPE html>
<html>
<head>
<title>Resume - Your Name</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f7f7f7;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
h1, h2, h3, h4 {
font-weight: normal;
margin: 0 0 10px;
color: #333;
}
h1 {
font-size: 36px;
line-height: 1.2;
}
h2 {
font-size: 24px;
line-height: 1.2;
}
h3 {
font-size: 18px;
line-height: 1.2;
}
p {
margin: 0 0 10px;
line-height: 1.5;
}
ul {
margin: 0 0 10px 20px;
padding: 0;
list-style: disc;
}
ul li {
margin: 0 0 5px;
padding: 0;
}
.section {
margin: 0 0 20px;
}
.section:last-of-type {
margin: 0;
}
.section-header {
display: flex;
align-items: center;
margin: 0 0 10px;
}
.section-header h2 {
flex: 1;
}
.section-content {
margin: 0;
}
@media only screen and (max-width: 768px) {
h1 {
font-size: 28px;
}
h2 {
font-size: 20px;
}
h3 {
font-size: 16px;
}
.container {
padding: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Your Name</h1>
<p>Email: youremail@example.com</p>
<p>Phone: (123) 456-7890</p>
<p>Website: yourwebsite.com</p>
<hr>
</header>
<section class="section">
<div class="section-header">
<h2>Summary</h2>
</div>
<div class="section-content">
<p>A highly motivated individual with experience in various fields, seeking an opportunity to utilize and further develop my skills in a challenging and dynamic environment.</p>
</div>
</section>
<section class="section">
<div class="section-header">
<h2>Education</h2>
</div>
<div class="section-content">
<ul>
<li>Bachelor of Science in Computer Science, University of XYZ, Graduated May 2021</li>
<li>
<body>· Save the file
· In Explorer, navigate to the repository folder you created and find the index.html file
· Open the file with your browser
· View your webpage
Step 3 — Commit and Push the change to GitHub
· Return to GitHub desktop
· Ensure you are in the “current branch” à main
· Navigate to “changes”
· Notice the index.html file has been added
· Click commit to main
Commit to main creates a log of your change in GitHub Desktop. You can also add a description to keep these logs organized.
By toggling to the history view in GitHub Desktop, you can view each commit. For each commit, GitHub desktop also highlights the changes made to the code so you can visualize what changed with each commit and pinpoint actions to fix the website.
If you return to Visual Studio Code and look at the bottom right-hand corner you’ll see “main” and a refresh wheel. This allows you to commit this change directly from Visual Studio Code to your local and cloud repositories. This is the power of the Microsoft Developer stack. It’s all integrated and gives you multiple ways to manage your project.
· Return to GitHub Desktop
· Push to Origin
Push to Origin uploads your code to GitHub, creating a copy of it in the cloud.
· Go to GitHub.com and look for the file
References
Getting Started with Visual Studio Code — YouTube
By Microsoft, this playlist is a great resource that explains how to setup Visual Studio Code.
Git, GitHub, & GitHub Desktop for beginners — YouTube
A good companion video for beginners.
Disclaimer
This tutorial is not an official Microsoft publication. Sources are indicated in the References section. No warranties or guarantees are implied. Links and instructions may be outdated. Use at your own risk.
