90-Day Visual Studio Code with website portfolio project study plan

90-day DevOps creation portfolio on VS CODE. Each day includes thorough theoretical context, shell commands, configuration files, and practical implementation code.

Phase 1: Environment Setup & Foundations (Days 1–20)

Day 1: Install VS Code & Configure Extensions

Lecture & Conceptual Overview

Visual Studio Code serves as the command center for modern web development and DevOps automation. Configuring a streamlined environment early prevents syntax errors, speeds up formatting, and provides live visibility into active container states.

Execution Steps & Commands

Install VS Code: Download and install the latest platform-specific binary.
Install Core Extensions:

Launch VS Code and open the Quick Open panel (Ctrl+P / Cmd+P). Run the following extension installation commands:

Bash

# Code formatting & linting

code --install-extension esbenp.prettier-vscode

code --install-extension dbaeumer.vscode-eslint

# Visual design & HTML tools

code --install-extension formulahendry.auto-rename-tag

code --install-extension ritwickdey.LiveServer

# DevOps & Git tools

code --install-extension eamodio.gitlens

code --install-extension ms-azuretools.vscode-docker

Workspace Settings Configuration:

Open settings.json (Ctrl+Shift+P $\rightarrow$ Preferences: Open User Settings (JSON)) and append the following configuration:

JSON

{

"editor.defaultFormatter": "esbenp.prettier-vscode",

"editor.formatOnSave": true,

"editor.tabSize": 2,

"files.autoSave": "afterDelay",

"emmet.includeLanguages": {

"javascript": "javascriptreact"

}

Day 2: Set Up Node.js & Git

Lecture & Conceptual Overview

Node.js provides the JavaScript runtime necessary for local development servers, build tooling, and backend API routing. Git is the industry-standard distributed version control system required for tracking code changes and triggering downstream CI/CD pipelines.

Execution Steps & Commands

Node.js Installation & Verification:

Install Node.js LTS via your platform package manager or direct installer, then verify the environment:

Bash

node -v

npm -v

Git Global Configuration:

Configure identity settings so commits are mapped accurately to your GitHub profile:

Bash

git config --global user.name "Your Name"

git config --global user.email "your.email@example.com"

git config --global init.defaultBranch main

SSH Key Generation for GitHub:

Generate an SSH key pair to authenticate securely without hardcoding credentials:

Bash

ssh-keygen -t ed25519 -C "your.email@example.com"

eval "$(ssh-agent -s)"

ssh-add ~/.ssh/id_ed25519

cat ~/.ssh/id_ed25519.pub

Copy the output and add it under GitHub Settings $\rightarrow$ SSH and GPG keys.

Day 3: Install Docker Desktop

Lecture & Conceptual Overview

Containerization eliminates the "works on my machine" anti-pattern by bundling runtime environments, dependencies, and web servers into portable images. Docker Desktop manages local container runtimes, images, and networking bridge interfaces.

Execution Steps & Commands

Installation: Install Docker Desktop and launch the daemon.
Verification & Hello-World Container:

Execute the canonical test container to confirm the engine interface, local daemon socket, and remote registry pulls operate as expected:

Bash

docker --version

docker run hello-world

Inspect Running Processes:

Bash

docker ps -a

Day 4: Workspace Setup & Git Initialization

Lecture & Conceptual Overview

A clean directory layout coupled with a proper .gitignore file prevents security leaks (such as environment secrets or node modules) from reaching distant remote repositories.

Execution Steps & Commands

Create Project Structure:

Bash

mkdir devops-portfolio

cd devops-portfolio

mkdir -p src/{css,js,assets/images}

touch index.html src/css/styles.css src/js/main.js .gitignore README.md

Configure .gitignore:

Add common temporary and sensitive files to .gitignore:

Plaintext

node_modules/

.DS_Store

.env

dist/

*.log

Initialize Git Repository:

Bash

git init

git add .

git commit -m "chore: initial repository structure"

Day 5: HTML Basics

Lecture & Conceptual Overview

HyperText Markup Language (HTML) defines the foundational structural nodes of a web document. Browsers read tree structures (the Document Object Model, or DOM) constructed from opening, closing, and self-closing tags.

Implementation (index.html)

HTML

<!DOCTYPE html>

<head>

<title>DevOps Engineer Portfolio</title>

</head>

<body>

<h1>Alex Rivera | DevOps & Platform Engineer</h1>

<p>

Automating cloud infrastructure, CI/CD pipelines, and high-availability systems.

</p>

</body>

</html>

Day 6: Semantic HTML Architecture

Lecture & Conceptual Overview

Semantic elements (<header>, <nav>, <main>, <section>, <article>, <footer>) give structural context to web crawlers, search engines, and screen readers. They replace generic <div> wrappers with meaningful boundaries.

Implementation (index.html update)

HTML

<!DOCTYPE html>

<head>

<title>Alex Rivera | DevOps Engineer</title>

</head>

<body>

<nav>

<a href="#about">About</a>

<a href="#skills">Skills</a>

<a href="#projects">Projects</a>

<a href="#contact">Contact</a>

</nav>

</header>

<main>

<h2>About Me</h2>

<p>Specializing in Kubernetes, Terraform, and GitOps automation.</p>

</section>

</main>

</footer>

</body>

</html>

Day 7: CSS Fundamentals

Lecture & Conceptual Overview

Cascading Style Sheets (CSS) describe the visual presentation of HTML elements. Understanding CSS specificity (inline styles > IDs > classes > elements) and the CSS Box Model (content, padding, border, margin) is essential for predictable layout design.

Implementation (src/css/styles.css)

CSS

:root {

--bg-primary: #0f172a;

--text-primary: #f8fafc;

--accent-color: #38bdf8;

--spacing-md: 1.5rem;

}

* {

box-sizing: border-box;

margin: 0;

padding: 0;

}

body {

background-color: var(--bg-primary);

color: var(--text-primary);

font-family: 'Segoe UI', system-ui, sans-serif;

line-height: 1.6;

padding: var(--spacing-md);

}

h1, h2 {

color: var(--accent-color);

margin-bottom: 1rem;

}

Day 8: Flexbox Navigation Layout

Lecture & Conceptual Overview

Flexible Box Layout (Flexbox) is a 1D layout mechanism designed for aligning items horizontally or vertically. Setting display: flex establishes a flex container, unlocking spatial control via justify-content (main axis alignment) and align-items (cross axis alignment).

Implementation (src/css/styles.css addition)

CSS

header {

background-color: #1e293b;

padding: 1rem 2rem;

border-radius: 8px;

}

nav {

display: flex;

justify-content: space-between;

align-items: center;

}

nav a {

color: #94a3b8;

text-decoration: none;

font-weight: 600;

transition: color 0.2s ease-in-out;

}

nav a:hover {

color: var(--accent-color);

}

Day 9: Grid Layout for Card Containers

Lecture & Conceptual Overview

CSS Grid is a 2D layout engine capable of arranging items simultaneously into rows and columns. Using properties like grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) creates fluid layouts that reorganize automatically across screen sizes without complex media queries.

Implementation (src/css/styles.css addition)

CSS

.grid-container {

display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 1.5rem;

margin-top: 2rem;

}

.card {

background-color: #1e293b;

padding: 1.5rem;

border: 1px solid #334155;

border-radius: 8px;

}

Day 10: Responsive Design & Media Queries

Lecture & Conceptual Overview

Responsive Web Design uses fluid grids, flexible images, and CSS @media rules to adapt page presentation based on screen resolution, device orientation, and viewports.

Implementation (src/css/styles.css addition)

CSS

@media (max-width: 768px) {

nav {

flex-direction: column;

gap: 1rem;

}

.grid-container {

grid-template-columns: 1fr;

}

Day 11: JavaScript Foundations

Lecture & Conceptual Overview

JavaScript (ECMAScript) adds interactive behavior and client-side logic to web applications. Focus on modern standards (const, let, arrow functions, array methods, and template literals).

Implementation (src/js/main.js)

JavaScript

const developerProfile = {

title: 'DevOps Engineer',

yearsExperience: 5,

skills: ['Docker', 'Kubernetes', 'Terraform', 'GitHub Actions'],

};

const getStatusMessage = (profile) => {

return `${profile.name} (${profile.title}) - ${profile.skills.length} core competencies tracked.`;

};

console.log(getStatusMessage(developerProfile));

Day 12: DOM Manipulation

Lecture & Conceptual Overview

The Document Object Model (DOM) represents the web page as an addressable tree structure. JavaScript reads and mutates nodes using query selectors, content modifiers (textContent, innerHTML), and style attributes.

Implementation (src/js/main.js addition)

JavaScript

document.addEventListener('DOMContentLoaded', () => {

const profileHero = document.querySelector('#about p');

if (profileHero) {

profileHero.textContent =

'Automating hybrid cloud architecture, securing GitOps pipelines, and driving zero-downtime deployments.';

}

});

Day 13: Event Listeners & Interactive UI Actions

Lecture & Conceptual Overview

Event-driven programming allows web apps to react to user actions (clicks, keypresses, input changes). Adding event listeners decouples visual elements from procedural logic execution.

Implementation (src/js/main.js addition)

JavaScript

const themeToggleButton = document.createElement('button');

themeToggleButton.textContent = 'Toggle Status Badge';

themeToggleButton.className = 'btn-primary';

document.querySelector('header').appendChild(themeToggleButton);

themeToggleButton.addEventListener('click', () => {

const header = document.querySelector('header');

header.classList.toggle('active-deployment');

console.log('Status visual context toggled.');

});

Day 14: Client-Side Form Validation

Lecture & Conceptual Overview

Form validation prevents malformed payload transmission before hitting backend network endpoints. Regular expressions verify input structures (such as email formats) client-side to improve responsiveness and reduce unnecessary API calls.

Implementation (src/js/main.js addition)

JavaScript

function validateEmail(email) {

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

return emailRegex.test(email);

}

const handleFormSubmit = (event) => {

event.preventDefault();

const emailInput = document.querySelector('#contact-email');

if (!emailInput || !validateEmail(emailInput.value)) {

alert('Please provide a valid corporate email address.');

return;

}

console.log('Payload validated:', emailInput.value);

};

Day 15: Tailwind CSS Tooling Setup

Lecture & Conceptual Overview

Tailwind CSS provides low-level utility classes that reduce the need for custom, redundant CSS rules. Modern projects compile Tailwind utility directives into optimized CSS assets using CLI toolchains.

Execution Steps & Commands

Initialize Node Package Manager:

Bash

npm init -y

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init

Configure Content Paths (tailwind.config.js):

JavaScript

module.exports = {

content: ["./*.html", "./src/**/*.{js,html}"],

theme: {

extend: {

colors: {

devops: {

dark: '#0f172a',

accent: '#0284c7',

success: '#10b981'

}

plugins: [],

}

Build Directive Injection (src/css/styles.css):

CSS

@tailwind base;

@tailwind components;

@tailwind utilities;

Day 16: Portfolio Wireframing & Structural Architecture

Lecture & Conceptual Overview

Before building complex components, establish clear document zones. A DevOps portfolio needs clear functional areas: About/Summary, Core Competencies (Skills), Infrastructure Projects (Architectures), and Interactive Contact Options.

Structural Blueprints (index.html structure)

HTML

</main>

Day 17: Developing the "About Me" Section

Lecture & Conceptual Overview

The hero section introduces your technical focus and engineering philosophy. It should communicate key responsibilities—such as infrastructure stability, security, and continuous delivery—at a glance.

Implementation (index.html section update)

HTML

<h1 class="text-4xl font-bold text-sky-400 mb-2">Alex Rivera</h1>

<h2 class="text-xl text-slate-300 mb-4">Senior DevOps & Site Reliability Engineer</h2>

Engineered resilient multi-cloud environments, automated zero-downtime CI/CD workflows,

and managed containerized architectures using GitOps principles.

</p>

</section>

Day 18: Developing the "Skills" Section

Lecture & Conceptual Overview

Organize technical competencies into clear operational categories (Containerization, IaC, CI/CD, Monitoring) rather than listing unorganized tools. This shows a systematic approach to platform engineering.

Implementation (index.html section update)

HTML

<h2 class="text-2xl font-bold text-slate-100 mb-6">Technical Competencies</h2>

<h3 class="text-lg font-semibold text-sky-400 mb-2">Containers & Orchestration</h3>

<p class="text-slate-400 text-sm">Docker, Docker Compose, Kubernetes, Helm</p>

</div>

<h3 class="text-lg font-semibold text-sky-400 mb-2">Infrastructure as Code</h3>

<p class="text-slate-400 text-sm">Terraform, Ansible, AWS CloudFormation</p>

</div>

<h3 class="text-lg font-semibold text-sky-400 mb-2">CI/CD & Monitoring</h3>

<p class="text-slate-400 text-sm">GitHub Actions, Prometheus, Grafana, ArgoCD</p>

</div>

</section>

Day 19: Developing the "Projects" Section

Lecture & Conceptual Overview

Project cards highlight real-world architecture achievements. Each card should clearly state the problem, technological solution, and operational results (e.g., lower deployment latency or reduced resource footprint).

Implementation (index.html section update)

HTML

<h2 class="text-2xl font-bold text-slate-100 mb-6">Automated Infrastructure Projects</h2>

<div>

<h3 class="text-xl font-bold text-slate-200">GitOps-Driven K8s Deployment Pipeline</h3>

Designed an automated deployment workflow using ArgoCD and GitHub Actions, cutting manual deployment overhead by 80%.

</p>

</div>

<span class="px-2 py-1 bg-sky-950 text-sky-300 text-xs rounded border border-sky-800">Kubernetes</span>

<span class="px-2 py-1 bg-sky-950 text-sky-300 text-xs rounded border border-sky-800">ArgoCD</span>

</div>

</article>

</div>

</section>

Day 20: Developing the "Contact" Form & Interface

Lecture & Conceptual Overview

A reliable contact interface allows potential stakeholders to reach out easily. Using accessible form elements ensures high usability across varied input methods.

Implementation (index.html section update)

HTML

<h2 class="text-2xl font-bold text-slate-100 mb-4">Contact Platform Engineering</h2>

<div>

</div>

<div>

<label for="contact-email" class="block text-slate-300 text-sm mb-1">Email Address</label>

</div>

<div>

<label for="contact-message" class="block text-slate-300 text-sm mb-1">Inquiry / Project Scope</label>

</div>

Send Message

</button>

</form>

</section>

Phase 2: Intermediate Development (Days 21–50)

Day 21: Git Version Control Essentials

Lecture & Conceptual Overview

Git operates as a content-addressable filesystem tracking snapshot differentials over time. Understanding local repository states—Working Directory, Staging Area (Index), and Local Repository—is essential before synchronizing with remote hubs.

Execution Steps & Commands

Bash

# Check current repository status

git status

# Stage updated files selectively

git add index.html src/css/styles.css src/js/main.js

# Commit staged changes with conventional commit standard

git commit -m "feat(ui): complete initial layout with tailwind css and accessibility markers"

# Review commit history tree

git log --oneline --graph --all

Day 22: Remote Configuration & Pushing to GitHub

Lecture & Conceptual Overview

Remote tracking branches create an upstream connection between your local .git engine and GitHub endpoints. Authenticating via SSH guarantees safe, passwordless delivery across continuous integration channels.

Execution Steps & Commands

Bash

# Link local repository to your GitHub remote destination

git remote add origin git@github.com:<your-github-username>/devops-portfolio.git

# Verify upstream target mapping

git remote -v

# Set default upstream tracking branch and push local history

git push -u origin main

Day 23: Git Branching & Isolation Strategies

Lecture & Conceptual Overview

Directly modifying your main production branch creates high deployment risk. Feature branching enforces isolated environments for experimental builds, security testing, and bug remediation.

Execution Steps & Commands

Bash

# Create and switch to a dedicated feature branch

git checkout -b feature/contact-express-backend

# Confirm active working branch

git branch

Day 24: Pull Requests, Merging & Conflict Resolution

Lecture & Conceptual Overview

Pull Requests (PRs) introduce structural peer review, policy checks, and automated CI scans prior to integrating code into primary production streams. Fast-forward merges keep commit logs clean, while merge commits preserve feature context.

Execution Steps & Commands

Bash

# Merge feature branch back into main locally

git checkout main

git pull origin main

git merge --no-ff feature/contact-express-backend -m "merge: integrate node backend express route infrastructure"

# Push consolidated state upstream

git push origin main

# Clean up merged feature branch

git branch -d feature/contact-express-backend

Day 25: DevOps Branding & Vector Assets Integration

Lecture & Conceptual Overview

Scalable Vector Graphics (SVG) scale crisp visuals without adding large image footprints to your portfolio loading budget. Embedding raw inline SVGs lets you customize styling directly using CSS/Tailwind classes.

Implementation (index.html update)

HTML

</svg>

<span class="text-sm font-semibold text-slate-200">Docker Containerization</span>

</div>

Day 26: Micro-Interactions & CSS Transition Effects

Lecture & Conceptual Overview

Subtle micro-interactions give feedback on user actions. Adding hover transformations and dynamic shadows improves the interactive experience without impacting runtime rendering performance.

Implementation (src/css/styles.css update)

CSS

.card-hover {

transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),

box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),

border-color 0.2s ease;

}

.card-hover:hover {

transform: translateY(-4px);

box-shadow: 0 10px 25px -5px rgba(56, 189, 248, 0.15);

border-color: #38bdf8;

}

Day 27: Contact Form Backend Setup (Node.js & Express)

Lecture & Conceptual Overview

Express handles client interaction logic, parsing HTTP request bodies, enforcing API safety rules, and structuring backend responses.

Execution Steps & Commands

Install Dependencies:

Bash

npm install express cors dotenv body-parser

Create Server Initialization Engine (server.js):

JavaScript

const express = require('express');

const cors = require('cors');

require('dotenv').config();

const app = express();

const PORT = process.env.PORT || 5000;

app.use(cors());

app.use(express.json());

app.get('/api/health', (req, res) => {

res.status(200).json({ status: 'UP', timestamp: new Date().toISOString() });

});

app.listen(PORT, () => {

console.log(`[SYS] Server running on port ${PORT}`);

});

Day 28: Express API Route Handlers

Lecture & Conceptual Overview

API route endpoints isolate backend actions. The contact endpoint receives JSON payloads, validates parameter presence, and returns structured HTTP status codes (200 OK, 400 Bad Request, 500 Internal Error).

Implementation (server.js endpoint addition)

JavaScript

app.post('/api/contact', (req, res) => {

const { name, email, message } = req.body;

if (!name || !email || !message) {

return res.status(400).json({

error: 'ValidationError',

message: 'All fields (name, email, message) are required.'

});

}

// Log incoming payload simulated message store

console.log(`[CONTACT INGEST] From: ${name} <${email}> | Message: ${message}`);

return res.status(200).json({

success: true,

message: 'Inquiry processed successfully by DevOps notification router.'

});

Day 29: API Route Verification & Testing

Lecture & Conceptual Overview

Verifying backend endpoints ensures routes handle inputs correctly before you connect frontend views. Using curl or automated testing verifies HTTP headers, status outputs, and JSON payloads.

Execution Commands

Bash

# Check server health endpoint

curl -X GET http://localhost:5000/api/health

# Test POST submission payload

curl -X POST http://localhost:5000/api/contact \

-H "Content-Type: application/json" \

-d '{"name":"DevOps Lead","email":"lead@platform.internal","message":"Deployment inquiry."}'

Day 30: Application Dockerization

Lecture & Conceptual Overview

A Dockerfile outlines step-by-step instructions for generating a reproducible container image. Using multi-stage builds minimizes final output size by stripping unnecessary build dependencies.

Implementation (Dockerfile)

Dockerfile

# Use minimal official Node.js Alpine image

FROM node:20-alpine AS base

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm ci --only=production

COPY . .

EXPOSE 5000

USER node

CMD ["node", "server.js"]

Day 31: Multi-Container Setup with Docker Compose

Lecture & Conceptual Overview

Docker Compose simplifies managing multi-container application stacks. It handles shared network configuration, port bindings, runtime environment variables, and persistent volume storage in a single YAML declaration.

Implementation (docker-compose.yml)

YAML

version: '3.8'

services:

portfolio-app:

build:

context: .

dockerfile: Dockerfile

ports:

- "5000:5000"

environment:

- PORT=5000

- NODE_ENV=production

restart: unless-stopped

networks:

- portfolio-network

networks:

portfolio-network:

driver: bridge

Day 32: Node.js & Visual Studio Code Debugging

Lecture & Conceptual Overview

VS Code's interactive debugger lets you pause runtime execution, set breakpoints, step through stack traces, and inspect variable values in memory without relying on arbitrary console.log statements.

Implementation (.vscode/launch.json)

JSON

{

"version": "0.2.0",

"configurations": [

{

"type": "node",

"request": "launch",

"name": "Launch Express Server",

"program": "${workspaceFolder}/server.js",

"restart": true,

"console": "integratedTerminal"

}

]

}

Day 33: Unit Testing Setup with Jest

Lecture & Conceptual Overview

Unit testing isolates individual methods and logic paths. Jest runs assertions across test suites to confirm utilities work predictably before code reaches build pipelines.

Execution & Implementation

Install Jest and Supertest:

Bash

npm install -D jest supertest

Create Test File (tests/unit.test.js):

JavaScript

const validateEmail = (email) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);

describe('Email Validation Logic', () => {

test('returns true for valid corporate email patterns', () => {

expect(validateEmail('sre@company.io')).toBe(true);

});

test('returns false for malformed addresses', () => {

expect(validateEmail('sre-company-io')).toBe(false);

});

Day 34: API Integration Testing

Lecture & Conceptual Overview

Integration tests verify interaction paths across server routes, request middleware, parameter validation, and JSON payload handling.

Implementation (tests/api.test.js)

JavaScript

const request = require('supertest');

const express = require('express');

const app = express();

app.use(express.json());

app.post('/api/contact', (req, res) => {

const { name, email, message } = req.body;

if (!name || !email || !message) return res.status(400).json({ error: 'Missing parameters' });

res.status(200).json({ success: true });

});

describe('POST /api/contact', () => {

it('rejects requests with missing properties', async () => {

const response = await request(app)

.post('/api/contact')

.send({ email: 'sre@domain.com' });

expect(response.statusCode).toBe(400);

});

Day 35: Continuous Integration Principles

Lecture & Conceptual Overview

Continuous Integration (CI) enforces code checks by running automated builds, linters, and unit tests on every pull request. This catches bugs early before changes can merge into primary production streams.

Day 36: GitHub Actions Workflow Configuration

Lecture & Conceptual Overview

GitHub Actions orchestrates automated pipelines triggered by repository events (like push or pull_request). Workflow steps run in isolated runner environments defined in .github/workflows/.

Implementation (.github/workflows/ci.yml)

YAML

on:

push:

branches: [ main ]

pull_request:

branches: [ main ]

jobs:

audit-and-test:

runs-on: ubuntu-latest

steps:

- name: Checkout Code Repository

uses: actions/checkout@v4

- name: Initialize Node.js Environment

uses: actions/setup-node@v4

with:

node-version: '20'

cache: 'npm'

- name: Install Project Dependencies

run: npm ci

- name: Run Unit & Integration Test Suites

run: npm test

Day 37: Pipeline Build Step Automation

Lecture & Conceptual Overview

Explicit build verification ensures compilation assets, tailwind utilities, and backend files bundle cleanly without breaking system imports or generating fatal runtime errors.

Implementation (.github/workflows/ci.yml append)

YAML

- name: Compile Tailwind Assets

run: npx tailwindcss -i ./src/css/styles.css -o ./dist/styles.css --minify

- name: Verify Bundle Outputs

run: test -f ./dist/styles.css && echo "Build output compiled successfully."

Day 38: Pipeline Test Automation & Quality Gates

Lecture & Conceptual Overview

Quality gates block code deployment if unit testing fails, test coverage drops below required thresholds, or security syntax checks fail.

Implementation (package.json test configuration update)

JSON

{

"scripts": {

"test": "jest --coverage --ci",

"lint": "eslint ."

}

Day 39: Automated Deployment Step Design

Lecture & Conceptual Overview

Continuous Deployment (CD) automates pushing verified build assets directly to hosting targets once pull requests pass initial validation pipelines.

Implementation (.github/workflows/cd.yml)

YAML

on:

push:

branches: [ main ]

jobs:

deploy-to-staging:

runs-on: ubuntu-latest

needs: []

steps:

- name: Trigger Remote Azure Deployment Webhook

run: echo "Initiating deployment sequence to Azure App Service container registry target."

Day 40: Cloud Provisioning Setup (Microsoft Azure)

Lecture & Conceptual Overview

Provisioning infrastructure requires authenticating through cloud provider CLIs. Setting up service credentials allows deployment tools to interact securely with Azure resources without exposing accounts.

Execution Commands

Bash

# Authenticate with Microsoft Azure environment

az login

# Create isolated DevOps resource group

az group create --name rg-devops-portfolio --location eastus

# Provision Azure Container Registry (ACR)

az acr create --resource-group rg-devops-portfolio --name acrdevopsportfolio2026 --sku Basic

Day 41: Application Deployment to Azure App Service

Lecture & Conceptual Overview

Azure App Services provides managed web hosting environments. Running application containers directly inside App Services offloads OS updates, web server routing, and framework patching to the platform provider.

Execution Commands

Bash

# Provision App Service plan running Linux host instances

az appservice plan create --name plan-devops-portfolio --resource-group rg-devops-portfolio --sku B1 --is-linux

# Deploy App Service container target

az webapp create --resource-group rg-devops-portfolio --plan plan-devops-portfolio --name app-devops-portfolio-live --deployment-container-image-name node:20-alpine

Day 42: Custom Domain Mapping & DNS Configuration

Lecture & Conceptual Overview

Domain Name System (DNS) maps human-readable domain names to server IP addresses. Canonical (CNAME) records route traffic seamlessly to target application endpoints without exposing underlying hosting structures.

Record Mapping Configuration Table

Record Type	Host / Name	Target / Value	Purpose
A	@	20.x.x.x (Azure Virtual IP)	Root domain routing
CNAME	www	app-devops-portfolio-live.azurewebsites.net	Subdomain resolution
TXT	asuid	<Verification Token>	Domain ownership validation

Day 43: SSL/TLS Security Configuration

Lecture & Conceptual Overview

Transport Layer Security (TLS/SSL) encrypts network traffic between client browsers and hosting servers, guarding against intercept attacks and data tampering.

Execution Commands

Bash

# Bind free managed SSL Certificate via Azure CLI

az webapp config hostname add --webapp-name app-devops-portfolio-live --resource-group rg-devops-portfolio --hostname portfolio.yourdomain.com

# Enforce HTTPS-only redirection rules

az webapp update --resource-group rg-devops-portfolio --name app-devops-portfolio-live --https-only true

Day 44: Performance Profiling & Optimization

Lecture & Conceptual Overview

Web Vitals measure layout stability, interaction responsiveness, and initial paint speeds. Reducing resource payloads speeds up load times and improves search ranking metrics.

Day 45: Asset Compression & Bundle Minification

Lecture & Conceptual Overview

Minification strips out whitespaces, structural comments, and unneeded variable names from production assets, shrinking payload sizes without altering application logic.

Implementation (package.json build task update)

JSON

{

"scripts": {

"build:css": "tailwindcss -i ./src/css/styles.css -o ./dist/styles.css --minify",

"build:js": "terser ./src/js/main.js -o ./dist/main.min.js --compress --mangle"

}

Day 46: Caching Strategies & HTTP Header Configuration

Lecture & Conceptual Overview

Cache-Control response headers tell browser engines and CDN edge locations how long to store static assets locally, preventing unnecessary network trips for unchanged files.

Implementation (server.js dynamic static asset delivery update)

JavaScript

// Cache static assets securely for 1 year

app.use(express.static('public', {

maxAge: '1y',

setHeaders: (res, path) => {

if (path.endsWith('.html')) {

// HTML documents bypass aggressive caching to load new deployment references instantly

res.setHeader('Cache-Control', 'no-cache');

}

}));

Day 47: Image Payload Optimization

Lecture & Conceptual Overview

Replacing bloated PNG and JPEG assets with modern image formats like WebP or AVIF significantly reduces file sizes while maintaining image fidelity.

Execution Commands

Bash

# Convert raw project assets into compressed WebP variations using CLI utilities

npx sharp-cli -i ./src/assets/hero.png -o ./dist/assets/hero.webp -f webp -q 80

Day 48: Web Security Fundamentals & OWASP Best Practices

Lecture & Conceptual Overview

Securing web deployments involves applying security layers across headers, transport channels, input handling, and dependencies to protect against common OWASP threats.

Implementation (server.js security middleware addition)

Bash

npm install helmet

JavaScript

const helmet = require('helmet');

// Inject security headers automatically

app.use(helmet());

Day 49: Input Sanitization & Cross-Site Scripting (XSS) Prevention

Lecture & Conceptual Overview

Cross-Site Scripting (XSS) occurs when untrusted user input renders directly into DOM elements without sanitization. Cleaning incoming strings prevents script injection attacks.

Implementation (src/js/main.js input protection utility)

JavaScript

function sanitizeInput(str) {

const temp = document.createElement('div');

temp.textContent = str;

return temp.innerHTML;

}

// Example usage on user-submitted content

const safeMessage = sanitizeInput(userInputMessage);

Day 50: Container Runtime Security & Hardening

Lecture & Conceptual Overview

Container hardening minimizes attack surfaces by dropping root privileges, using read-only root filesystems, and scanning image dependencies for known vulnerabilities.

Implementation (Dockerfile production security profile)

Dockerfile

FROM node:20-alpine

WORKDIR /app

# Run container process as a non-root user

USER node

# Enforce read-only environment runtime checks

ENV NODE_ENV=production

COPY --chown=node:node package*.json ./

RUN npm ci --only=production

COPY --chown=node:node . .

EXPOSE 5000

CMD ["node", "server.js"]

Phase 3: Advanced Development & Finalization (Days 51–90)

Day 51: Advanced CI/CD Workflow Patterns

Lecture & Conceptual Overview

Advanced pipelines separate build artifacts from environment deployments. Using reusable matrix builds allows you to test code across multiple Node.js runtime environments simultaneously before triggering release pipelines.

Implementation (.github/workflows/matrix-build.yml)

YAML

on:

push:

branches: [ main ]

jobs:

matrix-test:

runs-on: ubuntu-latest

strategy:

matrix:

node-version: [18.x, 20.x, 22.x]

steps:

- uses: actions/checkout@v4

- name: Setup Node.js ${{ matrix.node-version }}

uses: actions/setup-node@v4

with:

node-version: ${{ matrix.node-version }}

- run: npm ci

- run: npm test

Day 52: Pipeline Monitoring & Audit Trails

Lecture & Conceptual Overview

Observability in continuous delivery ensures that build step runtimes, failures, and deployment metrics are logged and searchable. Exporting pipeline telemetry helps teams identify slow build steps and improve release velocity.

Execution Steps & Commands

Bash

# Query recent GitHub Actions workflow run logs via GitHub CLI

gh run list --workflow=ci.yml --limit 5

# View detailed execution logs for a specific pipeline run

gh run view <run-id> --log-failed

Day 53: Automated Rollback Strategies

Lecture & Conceptual Overview

A reliable pipeline needs an automated rollback mechanism. If health checks fail post-deployment, traffic must route immediately back to the last known stable release image to prevent downtime.

Implementation (scripts/rollback.sh)

Bash

#!/usr/bin/env bash

set -e

echo "[ROLLBACK] Health check failed post-deployment!"

echo "[ROLLBACK] Restoring previous container tag: staging-v1.0.4..."

# Azure Web App rollback command

az webapp config container set \

--resource-group rg-devops-portfolio \

--name app-devops-portfolio-live \

--docker-custom-image-name acrdevopsportfolio2026.azurecr.io/portfolio:v1.0.4

echo "[ROLLBACK] Successfully restored version v1.0.4"

Day 54: Cloud Autoscaling Concepts

Lecture & Conceptual Overview

Autoscaling adjusts compute resources based on incoming traffic loads. Horizontal Pod Autoscaling (HPA) or Azure App Service scale rules add or remove container instances dynamically depending on CPU and memory usage thresholds.

Execution Steps & Commands

Bash

# Configure Azure App Service horizontal autoscale rules (scale out at 70% CPU)

az monitor autoscale create \

--resource-group rg-devops-portfolio \

--name autoscale-portfolio \

--resource app-devops-portfolio-live \

--resource-type Microsoft.Web/sites \

--min-count 1 \

--max-count 5 \

--count 1

az monitor autoscale rule create \

--resource-group rg-devops-portfolio \

--autoscale-name autoscale-portfolio \

--condition "CpuPercentage > 70 avg 5m" \

--scale out 1

Day 55: Load Testing & Performance Benchmarking

Lecture & Conceptual Overview

Load testing simulates high concurrent user traffic to identify system bottlenecks, memory leaks, or database connection limits before going live.

Implementation (load-test.js using k6)

JavaScript

import http from 'k6/http';

import { check, sleep } from 'k6';

export const options = {

stages: [

{ duration: '30s', target: 20 }, // Ramp up to 20 users

{ duration: '1m', target: 50 }, // Sustained load of 50 users

{ duration: '20s', target: 0 }, // Ramp down to zero

};

export default function () {

const res = http.get('http://localhost:5000/api/health');

check(res, { 'status is 200': (r) => r.status === 200 });

sleep(1);

}

Day 56: SEO Foundations for Technical Sites

Lecture & Conceptual Overview

Search Engine Optimization (SEO) helps search engine crawlers index your portfolio accurately. Structured page metadata ensures link previews display rich technical cards when shared on platforms like LinkedIn or X.

Day 57: Meta Tags & Open Graph Integration

Lecture & Conceptual Overview

Open Graph metadata tags define structured content attributes (titles, site images, descriptions) used by social media link parsers and search bots.

Implementation (index.html head section)

HTML

<head>

</head>

Day 58: Dynamic Sitemap Generation

Lecture & Conceptual Overview

A sitemap.xml file provides search engines with a structured index of reachable URL paths, update frequencies, and priority values across your web application.

Implementation (public/sitemap.xml)

XML

<?xml version="1.0" encoding="UTF-8"?>

<url>

<loc>https://portfolio.yourdomain.com/</loc>

<changefreq>monthly</changefreq>

</url>

</urlset>

Day 59: Privacy-Focused Web Analytics Integration

Lecture & Conceptual Overview

Tracking visitor metrics helps evaluate site reach. Lightweight, privacy-focused analytics tools collect user engagement data without needing invasive cookies or violating user privacy laws.

Implementation (index.html integration script)

HTML

Day 60: Web Accessibility (a11y) Foundations

Lecture & Conceptual Overview

Web Content Accessibility Guidelines (WCAG 2.1 AA) ensure digital assets are accessible to users relying on assistive technology, keyboard navigation, or screen readers.

Day 61: ARIA Roles & Accessible Names

Lecture & Conceptual Overview

Accessible Rich Internet Applications (ARIA) attributes supplement HTML when native elements cannot fully convey control states or structural relationships.

Implementation (index.html snippet update)

HTML

<button

id="menu-toggle"

aria-expanded="false"

aria-controls="mobile-navigation"

aria-label="Toggle navigation menu"

class="md:hidden p-2 rounded bg-slate-800 text-slate-200">

</button>

Day 62: Screen Reader Testing Fundamentals

Lecture & Conceptual Overview

Testing pages with active screen readers (e.g., VoiceOver on macOS, NVDA on Windows) highlights focus trapping bugs, missing alt text, and confusing page element orders.

Days 63–70: Accessibility & Usability Deep Dive

+-------------------------------------------------------------------------+

| DAY 63: Keyboard Navigation Audits |

| Ensure focus indicators remain visible (`outline-style: solid`). |

+-------------------------------------------------------------------------+

| DAY 64: Color Contrast Testing |

| Maintain a minimum 4.5:1 contrast ratio for normal text nodes. |

+-------------------------------------------------------------------------+

| DAY 65: Image Alt Text Strategy |

| Write descriptive alt tags for diagrams; use `alt=""` for decorative. |

+-------------------------------------------------------------------------+

| DAY 66: Accessible Form Validation |

| Connect error messages using `aria-describedby` attributes. |

+-------------------------------------------------------------------------+

| DAY 67: ARIA Landmark Verification |

| Ensure `<header>`, `<main>`, `<nav>`, and `<footer>` maps are clean. |

+-------------------------------------------------------------------------+

| DAY 68: Screen Reader Simulation |

| Navigate the full site sequentially using only `Tab` and `Shift+Tab`. |

+-------------------------------------------------------------------------+

| DAYS 69–70: Automated Audits & Bug Fixes |

| Run `@axe-core/cli` or Lighthouse to catch remaining a11y issues. |

+-------------------------------------------------------------------------+

Implementation (src/css/styles.css accessible focus indicator)

CSS

/* Ensure strong, visible focus rings for keyboard users */

a:focus-visible, button:focus-visible, input:focus-visible {

outline: 2px solid #38bdf8;

outline-offset: 4px;

}

Day 71: Infrastructure as Code (IaC) with Terraform

Lecture & Conceptual Overview

Infrastructure as Code allows you to define cloud resources in declarative configuration files. This makes infrastructure changes versionable, auditable, and reproducible across multiple environments.

Implementation (main.tf)

Terraform

terraform {

required_version = ">= 1.5.0"

required_providers {

azurerm = {

source = "hashicorp/azurerm"

version = "~> 3.0"

}

provider "azurerm" {

features {}

}

resource "azurerm_resource_group" "rg" {

name = "rg-devops-portfolio-tf"

location = "East US"

}

Day 72: Container Orchestration with Kubernetes

Lecture & Conceptual Overview

Kubernetes manages containerized workloads across node clusters, providing features like automated service discovery, self-healing container restarts, and declarative rolling deployments.

Implementation (k8s/deployment.yaml)

YAML

apiVersion: apps/v1

kind: Deployment

metadata:

labels:

app: portfolio

spec:

replicas: 2

selector:

matchLabels:

app: portfolio

template:

metadata:

labels:

app: portfolio

spec:

containers:

- name: portfolio-container

image: acrdevopsportfolio2026.azurecr.io/portfolio:v1.0.0

ports:

- containerPort: 5000

resources:

limits:

memory: "256Mi"

cpu: "500m"

Day 73: Monitoring & Logging Setup (Prometheus & Grafana)

Lecture & Conceptual Overview

Monitoring collects numeric performance metrics, while logging tracks distinct diagnostic events. Together, they provide visibility into application health and cluster efficiency.

Implementation (server.js Prometheus metrics endpoint update)

JavaScript

const client = require('prom-client');

const collectDefaultMetrics = client.collectDefaultMetrics;

// Collect default metrics (CPU, memory, garbage collection)

collectDefaultMetrics({ timeout: 5000 });

app.get('/metrics', async (req, res) => {

res.set('Content-Type', client.register.contentType);

res.end(await client.register.metrics());

});

Day 74: Pipeline Slack Notifications

Lecture & Conceptual Overview

Integrating Webhooks into your continuous integration pipeline alerts engineering teams in real-time when builds pass or fail.

Implementation (.github/workflows/notify.yml)

YAML

- name: Send Slack Webhook Notification

if: always()

uses: 8398a7/action-slack@v3

with:

status: ${{ job.status }}

fields: repo,message,commit,author,action,eventName,workflow

env:

SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}

Day 75: Simulating Failures & Testing Rollbacks

Lecture & Conceptual Overview

Chaos engineering tests system resilience by deliberately breaking service dependencies. This verifies that automated alerts, health checks, and fallback mechanisms work properly under stress.

Day 76: Configuring Cloud Auto-Scaling Policies

Lecture & Conceptual Overview

Auto-scaling policies handle unexpected traffic spikes by spinning up additional application instances automatically, then scaling back down during off-peak hours to reduce hosting costs.

Day 77: Load Testing Under Stress

Lecture & Conceptual Overview

Stress testing pushes systems past their standard operating limits to evaluate how gracefully they degrade under extreme load or resource starvation.

Day 78: Security Audits with OWASP ZAP

Lecture & Conceptual Overview

Automated security vulnerability scans identify common web risks—such as SQL injection, cross-site scripting (XSS), and exposed API secrets—before code deploys to production.

Execution Steps & Commands

Bash

# Run a quick OWASP ZAP baseline scan against your live portfolio URL

docker run -v $(pwd):/zap/wrk/:rw -t zaproxy/zap-stable zap-baseline.py \

-t https://portfolio.yourdomain.com -g gen.conf -r zap_report.html

Day 79: Patching Vulnerabilities & Updating Dependencies

Lecture & Conceptual Overview

Keeping package dependencies updated protects your application from known security vulnerabilities published in common vulnerability databases (CVEs).

Execution Steps & Commands

Bash

# Audit installed npm packages for security risks

npm audit

# Automatically fix non-breaking dependency vulnerabilities

npm audit fix

Day 80: Developing the DevOps Showcase Section

Lecture & Conceptual Overview

Adding a dedicated DevOps Showcase section to your portfolio highlights your platform engineering work. It visually demonstrates your deployment pipelines, infrastructure architecture, and operational workflows directly on the page.

Implementation (index.html pipeline architecture block)

HTML

<h2 class="text-2xl font-bold text-sky-400 mb-4">Platform Pipeline Architecture</h2>

<div class="p-4 bg-slate-900 rounded border border-slate-700 w-full">1. Git Commit</div>

<div class="p-4 bg-slate-900 rounded border border-slate-700 w-full">2. GitHub Actions CI</div>

<div class="p-4 bg-slate-900 rounded border border-slate-700 w-full">3. Docker Build & ACR</div>

<div class="p-4 bg-slate-900 rounded border border-slate-700 w-full">4. Azure K8s / App Service</div>

</div>

</section>

Days 81–85: UI Polish, UX Refinements & Audits

Lecture & Conceptual Overview

Fine-tuning visual typography, spacing alignment, smooth scroll actions, and auditing metrics ensures a polished user experience across all screen sizes and browser engines.

Execution Steps & Commands

Bash

# Run an automated Lighthouse audit for performance, accessibility, and SEO metrics

npx lighthouse-ci collect --url=https://portfolio.yourdomain.com

Days 86–90: Final Deployment & Portfolio Launch

+-------------------------------------------------------------------------+

| DAY 86: Final Pipeline Verification |

| Run a full clean end-to-end build check on the `main` branch. |

+-------------------------------------------------------------------------+

| DAY 87: Custom Domain DNS Finalization |

| Confirm A and CNAME DNS propagation using global lookup tools. |

+-------------------------------------------------------------------------+

| DAY 88: SSL Enforcement Verification |

| Confirm HTTP requests redirect to HTTPS automatically with valid TLS. |

+-------------------------------------------------------------------------+

| DAY 89: Documentation & Repository README |

| Write a clear `README.md` with setup guides and architecture specs. |

+-------------------------------------------------------------------------+

| DAY 90: Live Launch & Portfolio Showcase |

| Publish your GitHub repository and share your live DevOps portfolio! |

+-------------------------------------------------------------------------+

Final Project Verification Checklist

[x] All 90 curriculum days executed and verified.
[x] Responsive, accessible frontend built with semantic HTML, CSS, and Tailwind.
[x] Express API backend dockerized and hosted on cloud infrastructure.
[x] GitHub Actions CI/CD pipeline building, testing, and deploying updates automatically.
[x] Custom domain live with HTTPS/SSL certificates enforced.
[x] DevOps showcase section detailing your pipeline architecture complete.

Here is a summary map of your completed 90-day trajectory:

+-----------------------------------------------------------------------------------+

| PHASE 1 (Days 1–20): Environment & Foundations |

| VS Code 2026, Node.js, Docker, Git, HTML5, CSS3, Flexbox/Grid, Tailwind CSS |

+-----------------------------------------------------------------------------------+

| PHASE 2 (Days 21–50): Intermediate Development |

| Express Backend, Dockerization, Docker Compose, Jest, GitHub Actions, Azure |

+-----------------------------------------------------------------------------------+

| PHASE 3 (Days 51–90): Advanced DevOps & Finalization |

| Matrix Builds, Terraform IaC, K8s, Prometheus, WCAG 2.1 a11y, Final Launch |

+-----------------------------------------------------------------------------------+

Next Steps for Your DevOps Portfolio

GitHub Repository: Ensure your repository includes a comprehensive README.md detailing how to run your stack locally via docker-compose up as well as how to apply the Terraform scripts.
Live URL: Add your live portfolio link to your GitHub profile and resume.
Continuous Maintenance: Keep your dependencies updated using npm audit and keep practicing zero-downtime deployments.

Search This Blog

CarloEsplanaDev

90-Day Visual Studio Code with website portfolio project study plan

Comments

Post a Comment

Popular posts from this blog

average salary of virtual assistant in the Philippines

list the task of a virtual assistant

Google Digital Marketing & E-commerce Professional Certificate