A Resume for self taught dev's with no experience is probably the most under documented problem in tech, if it is, it does not deal with the problem: Actually presenting yourself with no "commercial/professional" experience in a resume.
you will actually get advice of sort:
- build a social media presence
- make connections
- find a mentor
- build projects
- volunteer
Which don't get me wrong are golden advice, but based on my search it is very rare to see a practical example of a "working" Resume for a self taught dev with no experience.
well friends that's about to change I landed on a beautiful treasure, not only sound but a practical resume by Paul - coding after thirty I definitely encourage you to watch the entire stream, Golden 👌.
This should be the mindset from now on as self taught DEV'S, any project and I mean any that you built yourself, not following a tutorial is experience, you are not learning but applying. That's the mentality.
what essentially makes a self taught dev different from a professional dev, if you can build an entire project from scratch is they are getting paid for it, practically it's the same thing just vetted and much more controlled.
Which means now you have experience in your Resume.
Agenda
This article is split into two parts
First Part - Digital Resume
we will actually build a Digi Resume in JavaScript :
we will translate this static site by Dennis Ivy - Build A Digital Resume & Host For Free , if you want to take the static route by all means do so and follow Dennis Ivy's version and come back for part 2.
However we gonna build a dynamic digital Resume here, following the MVC pattern. Why you ask? great question, to actually make it easier to update, by updating the model, the view will take that new shape without tinkering with it, hence dynamic.
model example:
export const projects = [
{
title:"🚧 DIGITAL MARKETER | UNIFIVE DIGITAL",
period:"2014 - 2017",
description: `Started a digital agency building websites and marketing for
local businesses. Mostly Wordpress sites with small modifications to
themes.`,
points: [
"Organized SEO & SEM campaigns on a local and global scale.",
"Saved a customer $110k a year by reducing Adwords CPC cost with optimization",
"70 + websites built with my small team of developers and freelancers"
]
}
]
export const MoreWork = [
{
name: " Lab - ",
emo: "🏆",
description: "My lab app"
},
{
name: " Doc Site - ",
emo: "🏆",
description: "My Doc site"
}
]
which the view will translate to HTML, adding new projects will be easy: just update the model, the view will do the rest.
Second Part - Actually compiling the resume
in this part we will utilize Paul's advice and interpret our projects as experience and fill up the Resume, of course I will use my projects, you will do the same.
Digital Resume
Setup
I created a tiny lib with few helper functions to aid in creating dynamic elements with state in vanilla JS faster, no learning curve at all.
Vanilla js? if you ever built a large scale project in any framework and one in Vanilla you might have noticed using a framework takes 3 times longer, I thought it was me only but upon further research many dev's go thru the same, example a quote by the Django framework dev:
“I’ve seen SPA projects take months longer than I would expect the same project to take if it was built with boring old JavaScript-free HTML forms.”
I too suffered the same I built a tracker app of sort in ionic and react for a friend and took me about 5 and half months, but recently I started a Desktop/web dataframe app which is way harder than CRUD app's like trackers but in about two weeks I had a working MVP dataframe(for folks not familiar with Data Science it's a data manipulation frame/software), I actually documented it on twitter
Day 1️⃣ #100DaysOfCode #buildinginpublic
— _sk💻| looking for JavaScript developer role (@mhlungusfundo) September 10, 2022
Hey Dev's👋🏽
I've been working on a GUI dataframe desktop app written in #javascript for the past two days, today I added few functionality including histogram, it's not actually slow I am waiting for tooltips b4 clicking, in the vid😁 pic.twitter.com/WqjFtgc7N5
by September 21 I had a working MVP.
and you can view the live the MVP on vercel, note: still full of bugs and not responsive, and you guessed it I built it entirely in JS, this tiny lib actually is the product of this software.
Of course you can use any framework for this, or even follow the static route, Sometimes you feel like explaining a bit before using Vanilla JS.
create a new project
npm init -y && npm i atomicus
atomicus has two functions and class
createElement()
takes an object and return a DOM element(based on React)
{
tag: "div",
attrs: {
class: "container",
id: "myDiv",
onclick: () => console.log("div clicked")
},
children: [
"can take a str - return text node",
{
tag: "p",
children: ['can take another element']
},
document.createElement("div") // can take actual DOM nodes
]
}
you can nest the elements as deep as you want, and pass state as variable etc.
clearEl()
efficiently clears a DOM element of it's children
PubSub
this is a reactive pattern class which allows communication between the model and view, view and view and model and model using the subscribe and notify pattern
let Pub = new PubSub()
// takes a callback
Pub.subscribe("channel1", (data)=> {
console.log("channel one was notified")
})
//passes data to the callback
Pub.notify("channel1", {state: "notification"})
Okay let's get cracking, I actually suggest cloning or viewing Dennis Ivy's Tut as we will directly translate the HTML from that tut to dynamic objects, so you will be able to see them side by side
// file structure
components/
styles/
main.css // copy from Denis Ivy's Tut
app.js // entry file
index.html
Model.js // M
views.js // V
Pub.js // C
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<div id="container--main">
</div>
<script type="module" src="app.js"></script>
</body>
</html>
I am using Parcel as my bundler,
run parcel :
npx parcel index.html
We only have two views: the first being the Main view containing the entire cv and Project view which we route too on project click/select.
// update views.js with the ff
// projects and more are from the model
export function Main(projects, more){
console.log("should return a list of projects");
}
export function Project(project){
console.log("should return an object of project");
return "single project"
}
since we have two views we need a simple router to route between the two, in app.js(basically the glue code)
// app.js
import {Main, Project} from "./views.js"
// state ->
// {
// route: "a route",
// data: "object containing state for the loaded
// component"
// }
const router = (state) => {
switch (state.route) {
case "main":
Main([], [])
case "project":
Project({});
break;
default:
break;
}
}
router({route: "main", data: null}) // when the app run's main view will be loaded
// we will handle routing below
in the console you must see "should return a list of projects"
let's start building the main page: basically the index.html file in Dennis Ivy's Tut/Repo.
In the components folder create a new file:
components/
hero.js
Our hero component will contain the header, skills and tech stack
let's translate the hero section first from
<section id="wrapper--hero" class="section--page">
<img id="profile-pic" src="./assets/images/profile_pic.JPG">
<div>
<h1 id="user-name">Dennis Ivanov</h1>
<p id="bio">Software developer, developer advocate at <a href="https://www.agora.io/en/" target="_blank">Agora</a>, Udemy <a href="https://www.udemy.com/user/dennis-ivanov-5/" target="_blank">instructor</a>, <a href="https://www.youtube.com/c/dennisivy" target="_blank">YouTuber</a> with 166k+ subs and contributor at <a href="https://youtu.be/PtQiiknWUcI?t=6" target="_blank">Traversy Media</a>.</p>
<p id="email">👉 dennis@dennisivy.com</p>
</div>
</section>
to:
// component/hero.js
// the ff helper function create's an <a> tag, I abstracted it away
// to avoid repeating it as it used a lot (DRY principle)
// coming from React you'll notice href and text are props
function atag(href, text){
return {
tag: "a",
attrs:{
href,
target: "_blank" // open's in new tab
},
children: [text]
}
}
export function Hero(){
return {
tag: "section",
attrs: {
class: "section--page",
id: "wrapper--hero"
},
children: [
{
tag: "img",
attrs: {
id: "profile-pic",
src: ""
}
},
{
tag: "div",
children: [
{
tag: "h1",
attrs: {
id: "user-name",
},
children: ["Dennis Ivanov"]
},
{
tag: "p",
attrs: {
id: "bio"
},
children: [
"Software developer, developer advocate at ",
atag("https://www.agora.io/en/","Agora" ),
", ",
"Udemy ",
atag("https://www.agora.io/en/","Instructor" ),
", ",
atag("https://www.agora.io/en/","Youtuber"),
" with 166k+ subs and contributor at ",
atag("https://www.agora.io/en/","Traversy Media"),
]
},
{
tag: "p",
attrs: {
id: "email"
},
children: ["👉 dennis@dennisivy.com"]
}
]
}
]
}
}
we will update with our details in part two, for now we are just creating the structure, making it dynamic of course.
Still in hero.js, let's add the function for social links
export function Socials(){
return {
tag: "section",
attrs: {
class: "section--page"
},
children: [
{
tag: "div",
attrs: {
id: "socials--list"
},
children: [
atag("https://youtube.com/c/dennisivy", "YouTube"),
atag("https://youtube.com/c/dennisivy", "Twitter"),
atag("https://youtube.com/c/dennisivy", "Linkedin"),
atag("https://youtube.com/c/dennisivy", "Github"),
atag("./assets/resume.pdf", "Download Resume"),
]
}
]
}
}
we haven't left hero.js
// another help to creat li element
// place it on top
function li(text){
return {
tag: "li",
children: [text]
}
}
export function Skills(){
return {
tag: "section",
attrs: {
class: "section--page"
},
children: [
{
tag: "ul",
attrs: {
id: "qualifications--list"
},
children: [
li("✔️ 7 Years experience with front & backend development"),
li("✔️ Extensive knowledge in API & Database Design."),
li("✔️ Experienced content creator on YouTube & community leader"),
li("✔️ 7 Years experience with running Adwords campaigns & SEO")
]
}
]
}
}
lastly add the tech stack section
// helper for creating card--techstack as it's repetitive
function cardTechStack(stack){
return {
tag: "div",
attrs: {
class: "card--techstack"
},
children: [
{
tag: "span",
children: [stack]
}
]
}
}
export function techStack(){
return {
tag: "section",
attrs: {
class: "section--page"
},
children: [
{
tag: "h2",
children: ["Tech stack"]
},
{
tag: "div",
attrs: {
id: "wrapper--techstack__items"
},
children: [
cardTechStack("Python, JavaScript, NodeJS"),
cardTechStack("Django, Express, Flask, FastAPI"),
cardTechStack("React, Next JS"),
cardTechStack("Postgres, MongoDB, MySQL")
]
}
]
}
}
we are done with our hero component, if anything goes wrong in the hero, this is the file to look at.
Import the hero in the view and let's mount it
// view.js
import { Hero, Socials, Skills, techStack} from "./components/hero.js";
import { createElement } from "atomicus";
// container for the main view
const innerEmptyDiv = document.createElement("div");
innerEmptyDiv.clientHeight = "100%"
innerEmptyDiv.clientWidth = "100%"
// creating the hero DOM, if you had state this is where you
// pass it in, the functions
innerEmptyDiv.appendChild(createElement(Hero()))
innerEmptyDiv.appendChild(createElement(Socials()))
innerEmptyDiv.appendChild(createElement(Skills()))
innerEmptyDiv.appendChild(createElement(techStack()))
// update the Main function to return the innerDiv
function Main(projects, more){
return innerEmptyDiv
}
in app js let's update the router to actually mount the returned DOM to html
we will cache our views as to avoid recreating them unnecessary
import {clearEl} from "atomicus"
const cache = new Map(); // like object, better API and simpler
const app = document.getElementById("container--main"); // to mount everything
// update the router to this
const router = (state) => {
// if we have a cache of our route
// don't create it anew append the cached version
if(cache.has(state.route)){
if(app.innerHTML !== ""){
clearEl(app) // clearing old content
}
app.appendChild(cache.get(state.route));
console.log("returning early")
return // will not reach the switch statement
}
switch (state.route) {
case "main":
const m = Main([], [])
app.appendChild(m) // appending innerEmptyDiv
cache.set('main',m); // caching main
break;
case "project":
Project({});
break;
default:
break;
}
}
by now the you should see the entire hero section on your webpage.
next, the fun dynamic part work section:
// update model.js
// const projects = [
// ]
/**
* work = {
* title
* period
* description
* points[]
* }
*/
// this is the model we will update with our projects/experience
export const projects = [
{
title:"🚧 DIGITAL MARKETER | UNIFIVE DIGITAL",
period:"2014 - 2017",
description: `Started a digital agency building websites and marketing for
local businesses. Mostly Wordpress sites with small modifications to
themes.`,
points: [
"Organized SEO & SEM campaigns on a local and global scale.",
"Saved a customer $110k a year by reducing Adwords CPC cost with optimization",
"70 + websites built with my small team of developers and freelancers"
]
}
]
// this will last part of our Digi resume(more projects)
export const MoreWork = [
{
name: " Lab - ",
emo: "🏆",
description: "My lab app"
},
{
name: " Doc Site - ",
emo: "🏆",
description: "My Doc site"
}
]
this is important: you don't import the model directly to the view but the glue code, the view and model must not know about each other accept introduced by Controller or glue code
// app.js
import { projects, MoreWork } from "./Model.js";
// update main in the router
...
app.appendChild(Main(projects, MoreWork))
create a new component
components\
work.js
the hero section was more static than dynamic, that's why the tree object was longer, here I am going full blown dynamic, using advanced array functions etc, to achieve a dynamic and shorter tree so buckle up
translating from :
<section id="work-history-wrapper" class="section--page">
<h2>Work History</h2>
<div class="line-break"></div>
<div class="card--work-history">
<strong>🚧 DEVELOPER ADVOCATE | AGORA.IO</strong>
<p>11/2021 - Present</p>
<p>Worked on making Agora’s Web Based SDK more accessible through video tutorials, articles, demo projects and event based training. Also building out React UI components & leading a team to re-design Agora’s documentation and api reference.</p>
<ul>
<li>Doubled Web SDK’s monthly usage minutes from 15 million to 30 million minutes within my first 4 months</li>
<li>Produced educational video content which resulted in 300k+ views on youtube</li>
<li>Produced SEO campaigns and content to gain market share for related keywords.</li>
</ul>
</div>
<div class="line-break"></div>
... more code here
</section>
to
// work.js
export function linebreak(){
return {
tag: "div",
attrs: {
class: "line-break"
}
}
}
// section for all the work
export function WorkWrapper(){
return {
tag: "div",
attrs: {
id: "work-history-wrapper",
class: "section--page"
},
children: [
{
tag: "h2",
children: ['My Work']
}
]
}
}
still in work.js, as you can see the card--work-history div is repetitive, let's abstract it to it own function
// work.js
function card_work(title, period, description, points){
return {
tag: "div",
attrs: {
class: "card--work-history"
},
children: [
{
tag: "strong",
children: [title]
},
{
tag: "p",
children: [period]
},
{
tag: "p",
children: [description]
},
{
tag: "ul",
children: points.map((point, i)=> {
return {
tag: "li",
children: [point]
}
})
}
]
}
}
lastly the actual work function, which receives the model -> projects
export function Work(work){
const workTree = []
work.forEach((w, i)=> {
workTree.push(card_work(w.title, w.period, w.description, w.points))
})
return workTree
}
// workTree Array[{}] which we can pass to createElement in main
let's mount work in the view
// views.js
import {Work, linebreak, WorkWrapper} from "./components/work"
// update the main function
export function Main(projects, more){
const wrapper = createElement(WorkWrapper())
// this below is the dynamic magic 🙌
const workTree = Work(projects)
workTree.forEach((obj, i)=> {
wrapper.appendChild(createElement(linebreak()))
wrapper.appendChild(createElement(obj))
})
innerEmptyDiv.appendChild(wrapper)
return innerEmptyDiv
}
you can now see the project's on your site, you can add, rearrange and remove projects just by modifying the model, the power of MVC👌,
the top will be projects you are proud of and can talk about in an interview, prolly top 3 or more.
the following component more work will hold all your other work.
create a moreWorkcomp
components/
moreWork.js
// more work will feed from this component
export const MoreWork = [
{
name: " Lab - ",
emo: "🏆",
description: "My lab app"
},
{
name: " Doc Site - ",
emo: "🏆",
description: "My Doc site"
}
]
moreWork tree
// moreWork.js
// basically the same process as work
// the only difference is we are routing here
// and will explain below
import Pub from "../Pub"
function CardProject(work){
return {
tag: "div",
attrs: {
class: "card--project"
},
children: [
{
tag: "a",
attrs: {
href:"#",
onclick: () => Pub.notify("Router", {route: "project", data: work})
},
children: [
{
tag: "span",
children: [work.emo]
},
work.name + work.description
]
}
]
}
}
export function MoreWork(moreWork){
return {
tag: "div",
attrs: {
class: "section-page"
},
children: [{
tag: "h2",
children: ["Projects & Accomplishments"]
}, ...moreWork.map(CardProject)]
}
}
the only new thing here is the pubSub functionality
onclick: () => Pub.notify("Router", {route: "project", data: work})
update the Pub.js file
import { PubSub } from "atomicus";
const Pub = new PubSub() // making sure all importers use the same Pub object
export default Pub
update app.js to handle this notification or it will cause an error: notifying a channel with no subs
// app.js
import Pub from "./Pub.js";
...
router({route: "main", data: null})
// new code
// subbing to the channel router
Pub.subscribe("Router", (data)=> {
router(data)
// when we get a click from a project we need to route
})
All we need now is the project component
create Project.js under components
// project.js
import Pub from "../Pub";
const ul = (project) => ({
tag: "ul",
attrs: {
style: "display:flex; cursor: pointer; width: 100%; justify-content: space-evenly;"
},
children:
project.live && project.source ? [
{
tag: "a",
attrs: {
href: project.live,
target: "_blank"
},
children: ["Live Demo"]
}, {
tag: "a",
attrs: {
href: project.source,
target: "_blank"
},
children: ["Source Code"]
}
] : project.live ? [{
tag: "a",
attrs: {
href: project.live,
target: "_blank"
},
children: ["Live Demo"]
}] : project.source ? [{
tag: "a",
attrs: {
href: project.source,
target: "_blank"
},
children: ["Source Code"]
}] : [""],
})
probably the most complex part with the above code is the following:
children:
project.live && project.source ? [
{
tag: "a",
attrs: {
href: project.live,
target: "_blank"
},
children: ["Live Demo"]
}, {
tag: "a",
attrs: {
href: project.source,
target: "_blank"
},
children: ["Source Code"]
}
] : project.live ? [{
tag: "a",
attrs: {
href: project.live,
target: "_blank"
},
children: ["Live Demo"]
}] : project.source ? [{
tag: "a",
attrs: {
href: project.source,
target: "_blank"
},
children: ["Source Code"]
}] : [""],
what we are basically doing here is based on the model provided, if we have a link for a live demo and source code we show them, otherwise we don't, everything else is the same as we have done before.
// project js continued
export function Project(project){
return {
tag: "div",
attrs: {
id: "container--main"
},
children: [
{
tag: "a",
attrs: {
onclick: () => Pub.notify("Router", {route: "main", data: null})
},
children: ["👈🏽, Go Back"]
},
{
tag: "h1",
children: [project.name]
},
ul(project),
{
tag: "p",
children: [project.description]
},
{
tag: "ul",
children: project.points.map((point, i)=> {
return {
tag: "li",
children: [point]
}
})
}
]
}
}
import project in views
// views.js
import { Project as P } from "./components/Project.js";
// i imported it as p because we already a Project function here
// update Project function
export function Project(project){
return createElement(P(project))
}
update the model a bit to see the difference
export const MoreWork = [
{
name: " Lab - ",
emo: "🏆",
description: "My lab app",
points: [
"Organized SEO & SEM campaigns on a local and global scale.",
"Saved a customer $110k a year by reducing Adwords CPC cost with optimization",
"70 + websites built with my small team of developers and freelancers"
],
live: "https:",
source: "https:"
},
{
name: " Doc Site - ",
emo: "🏆",
description: "My Doc site",
points: [
"Organized SEO & SEM campaigns on a local and global scale.",
"Saved a customer $110k a year by reducing Adwords CPC cost with optimization",
"70 + websites built with my small team of developers and freelancers"
]
}
]
then in app js update the project route
...
case "project":
clearEl(app);
app.appendChild(Project(state.data)); // passing in the given project
break;
...
we are actually done with the first part, we will spend the second part in the model.
Your site should now route to a selected project and back to main.
Actual Resume for Self Taught DEV's with no experience
Of course this is an example using my own projects, you need to make your own using this as an example.
I am assuming you've watched Paul's stream, All I am doing is showing you how I interpreted my projects so you can have a practical example, and note I will refine my Resume everyday and try to find better wording etc, as Paul says himself, writing a Resume should take you a good week. this is the start point
Skills
for the skills and qualifications section you can talk briefly about what you do and what separates you example of mine:
try to cover as much as possible, as you can see I went from the general JS developer to lower level programmer, module developer and technical writer, these basically are my skills(which everything in the Resume is suppose to prove)
Experience
I chose to have three project's as the main/core projects, and changed the title from work to Experience
The thing to notice here are action words like developed, utilized, Abstracted these speak of what you did, basically experience, applying knowledge to build or solve something,
I picked each of the above deliberately to show my broadness,
the first two fall under front-end, whilst the second also fall under Mobile dev, while the last just show's I can play with the language on it's own and build something useful
Other Noteworthy Projects
I called this section Other Noteworthy Projects instead of Accomplishments
Here Also I picked the projects deliberately
Conclusion
Building a resume takes a lot of careful work, but with the dynamic site we created all you need to worry about now is filling it.
as Denis also states a digital resume will not replace your portfolio, in fact you need to the resume from there.
Top comments (0)