Codementor Events

Start Your Developer Journey Building Your Portfolio - SETTING UP

Published Sep 07, 2023Last updated Sep 19, 2023
Start Your Developer Journey Building Your Portfolio - SETTING UP

SETTING UP

This is the first of a series of lessons to help you on your journey to being a developer without a computer science degree.
I found that, sometimes, developers get carried away with learning and working and rarely get the chance to build their porfolio. However, a portfolio is crucial for developers as it provides a way to showcase their skills, experience, and problem-solving abilities. Also, a porfolio serves as a marketing tool, a means of professional branding, and it opens doors to various opportunities in the industry.
We will start learning by building a professional portfolio. That way, we will have used one stone to kill two birds; learn and have a portfolio ready.
The lessons are expected to make the journey easier and, hopefully, fun.

The first series of the lessons will cover:
Basic HTML
Basic CSS
Responsiveness
Basic JavaScript
No Code build (Webflow)
Appreciation of the Web

We will be building a portfolio close to this. So let's get started!

1. Requirements

For this journey, you will need the following:

  1. A laptop
  2. Internet connection
  3. A browser on your laptop
  4. A can-do attitude
  5. At least one hour every weekday(try to hang out with loved ones on weekends)

2. Create Github Account

Git is a version control system. For now, we will say git will help us track our coding activities and progress and we will be using Github.
Visit https://github.com/ and click on signup to create an account.
(Since we are just starting out, we will not go into exlaining Git so we don't get overwhelmed.)

3. Set Up PC

3b. Install tools

Follow the instructions here to install git on your PC.
Also download and install VSCode.

Create a directory(folder) called onestitch on your PC where you want to store the codes from the lessons.

3b. Open Terminal

Open the folder with VSCode using the "open with ..." command in your file manager.
Click "Terminal" at the top of your VSCode interface and select "New Terminal"
Screenshot from 2023-07-24 13-58-02.png
At the bottom of your VSCode, you see a terminal.
Selection_085.png
We will be needing a terminal in most of the other steps.

4. Set Up Local And Remote Git Authentication

We will be using ssh(secure shell) keys to access github from our PC. ssh is a more secure way to access your account compared to username and password. You can use the terminal opened in step 3b.
Follow these directions to generate SSH keys.
Follow these to add the key to your github account.
Follow these to test the connection

5. Create Repository

Visit Github
Selection_080.png
Click the + at the top and select New repository
Type in repository name, my_portfolio.
Type in description, My Portfolio.
Select Public
Click create repository button to create repository
Copy the setup code provided by clicking the copy icon
Selection_083.png

6. Set Up Local Repository

Use the terminal opened in step 3b.
Inside the terminal, paste the setup code copied from github in the step above and hit enter.

mkdir my_portfolio
cd my_portfolio
echo "# my_portfolio" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:{MY REPO}/my_portfolio.git
git push -u origin main

** Replace {MY REPO} with your github username
If you check your onestitch folder, you should find another folder called my_portfolio

ALWAYS SAVE

Whenever you make changes to your files, hit SAVE so that your changes will take effect.
When it looks like you cannot see the changes taking effect, go back to your file and hit SAVE again!

ADIEU!

With a successful setup, I can say that the hard part is over for now 😉.
In the next lesson, we will start HTML Basics.
Until then, have fun!

PREV <--------------------------------------------------------> NEXT

Discover and read more posts from Olaide Alaka Afolayan
get started