Table of contents
"Everything was first an idea"
Overview
If you've ever needed an internship, apprenticeship, or a job, you've almost likely needed a resume or CV (depending on the company's choice).
You may have even utilized CV generators such as Visualcv or Novoresume. These are fantastic resume-creation tools.
The goal of this instructional application is to create your own Résumé using Django.
Setup
1- Create a python project
poetry new my-project
cd my-project
# install poetry and activate the virtual environment
poetry install
poetry shell
2- Install Django
poetry add django
3- Start the project
django-admin startproject mywebsite
cd mywebsite
4- Let's migrate!
python manage.py migrate
5- Run your server to check that everything is working fine
python manage.py runserver
6- Now we need to create our app
python manage.py startapp resumeapp
7- After that, we need to add couple of folders to the project
1- static
- CSS
- main.css
- images
- personal photo
- (Twitter, LinkedIn, Facebook, YouTube) icons
2- templates
- home.html
Your project skeleton should look like this
Django Commands: Startproject vs Startapp
You may be wondering "What is the difference between startproject and startapp?".
startproject is the base for every Django application to reside, think of a folder inside another folder or a parent folder. Most of Django's setup happens in the settings.py file of the root folder.
startapp creates the child folder, here, you as the developer, go about your business on this folder level. Little Django setups are found in folders created using startapp command.
What next?
Now, we've got the first steps. We set up our Django application in the next part.
>> code .
Getting started!
1- First things first we need to add our app to the project so in the setting.py we add the following:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'resumeapp', <------- By adding the app name to setting.py
]
2- Since we are at the setting.py let's connect between our folders. you'll know why later on :)
STATIC_URL = 'static/'
MEDIA_URL = '/images/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
3- Now back to the resumeapp / views.py
- we will handle the request & response
from django.shortcuts import render
# Create your views here.
def home(request):
return render(request, 'home.html')
4- In the resumeapp we will create a new file urls.py and we will add our views there
from django.urls import path
from . import views
urlpatterns = [
path('', views.home, name='home'),
]
5- now in the project mywebsite / urls.py we have to add the app URLs.
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('resumeapp.urls')),
]
Do we need to migrate?
What are migrations?
Migrations are a way to keep track of changes made to a database schema (Django models).
One can think of migrations as mini version control for databases.
Similar to version control systems like Git and Subversion, migrations can be reverted to a previously known working version also known as rollback.
Makemigrations vs Migrate
The command makemigrations creates the migration files in children's apps which reflect changes made in their models.py whereas the migrate command implements the changes in the migration files to the database:
>> python manage.py makemigrations
>> python manage.py migrate
So we don't need to migrate in our case!
We need to add a few more stages before we can get the final results.
Templates
head
- we have home.html in the templates
- In our templates, use the static template tag to build the URL for the given relative path using the configured STATICFILES_STORAGE.
we have already done the first step of configuring static files by defining STATIC_URL in the setting.py file
{% load static %}
- Then starting with the head let's connect the main.css page with our HTML page
<link href="{% static '../static/css/main.css' %}" rel="stylesheet" type="text/css">
- Because we gonna use Bootstrap in our HTML file we first need to add this line to the head
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
or you can generate it by yourself
- Go to Bootstrap CDN
- copy the given command from the CSS section
- And past it in your code
Body
In the Body, we will add 2 columns and 3 rows.
The first row will look like this:
To define the column size we can do that by using the command:
For the first card
<div class="col-md-3">
For the second card
<div class="col-md-9">
To make their height equal we will add (h-100), now to make these cards special than other cards we will add a blue border to each one (border-info)
<div class="card card-body h-100 border-info" id="profile-wrapper">
<body>
<br>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="card card-body h-100 border-info" id="profile-wrapper">
<img id="profile-pic" src="{% static '../static/images/sarah.png' %}" >
<hr>
<h4>Hi I'm Sarah!</h4>
<p>I love coding, doing research and collaborating</p>
</div>
</div>
<div class="col-md-9">
<div class="card card-body h-100 border-info">
<h4>My First Job as a Developer</h4>
<hr>
<p>3 months after writing my first Hello World program (While working in the Business development department) I had convinced my boss to let me take a stab at building a better version of the outdated laboratory management system my company was running on.</p>
<p>Before I knew it we transitioned from the old system and we're on to mine. My newbie self was now in charge of hosting hundreds of thousands of lab samples and supporting thousands of clients.</p>
<p>From this you’ll see that I’m someone that jumps before I can talk myself out of doing something scary.</p>
<ul class="social-links">
<li><img class="social" src="{% static 'images/facebook.png' %}"></li>
<li><img class="social" src="{% static 'images/linkedin.png' %}"></li>
<li><img class="social" src="{% static 'images/twitter.png' %}"></li>
<li><img class="social" src="{% static 'images/youtube.png' %}"></li>
</ul>
</div>
</div>
</div>
The other cards will look like this:
<div class="row">
<div class="col-md-6">
<div class="card card-body h-100">
<h5>My Experience as a Developer</h5>
<hr>
<p>Full stack developer/ Python.</p>
<p>Designed, built and managed a GUI desktop app, that is made specifically for performing basic and advanced mathematical operations (as will be mentioned below) without any additional hassle as it ensures that it serves the main purpose of providing a top-tier mathematical help with not much spent effort by the user.</p>
</div>
</div>
<div class="col-md-6">
<div class="card card-body h-100">
<h5>What I Know</h5>
<hr>
<p>Python, Django, HTML/CSS, JavaScript/Jquery, React, Postgres, and a whole bunch more I can’t possibly mention in one sentence! ;)</p>
<p>PS: Working on Node JS, Mongo DB and Machine Learning, Data Science, and Artificial Intelligence.</p>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<div class="card card-body h-100">
<h5>How I Learn</h5>
<hr>
<p>Reverse Engineer & Build Ugly Prototypes First.</p>
<p>I can learn just about anything by having a final product to tear apart piece by piece. I break the code where I need to figure out why things work the way they do. </p>
<p>Documentation is just a reference.</p>
</div>
</div>
<div class="col-md-6">
<div class="card card-body h-100">
<h5>My Short Term Goals</h5>
<hr>
<p>I’m always ready to learn something new. I like to collaborating and sharing my experience with others on my blog (sarahthedeveloper.hashnode) & on my GitHub account.</p>
<p>Aside from building small projects I would love to enter a position where I can be part of a bigger team & learn from others with more experience than myself.</p>
</div>
</div>
</div>
<br>
</div>
</body>
The final result:
Source Code:
What should I study in addition to Django?
- You must master the following skills to become a Full-Stack Django Developer.
Python/HTML/CSS (Must to build a full-fledged web app)
In two to three days, you may learn Jinja Templating (This is only needed when you want to serve your views from Django but is not mandatory)
Individually learn React.js/Angular.js to create the UI (Given react.js demand, you should go with that only)
Discover how to deploy a Django app on AWS.