Forem: Charalambos Ioannou

Getting Started with Git and GitHub: A simple roadmap

Charalambos Ioannou — Sun, 04 Jun 2023 03:00:00 +0000

This guide will offer a summary on how to get started and learn about Git and Github.

TL;DR

Here is the roadmap in a simple image representation:

Roadmap:

What is Git and Github
- Learn what is Git and GitHub.
- Understand why it is important for developers
- Install Git locally and create GitHub account.
Basic and Useful Git Commands
- Learn basic Git commands, such as git init, git add, and git commit.
- Link Git and GitHub together
- Learn about branches, for example creating and merging branches
Collaborate with Git
- Learn about cloning repositories and forking repositories.
- Learn about pull requests and how they are used.
- Practise pulling and pushing changes.
Advanced Git and GitHub commands and features
- Learn advanced Git commands, such as, git rebase, and git reset.
- Learn to resolve merge conflicts
- Learn about GitHub workflows, actions and codespaces.
Learn Markdown
- Everything in GitHub is written in Markdown so it is a good idea to know the basics of how to write in Markdown.
- Useful rescources for this are: Markdown Cheatsheet and Markdown Editor

I hope you enjoyed reading this short guide and found the content helpful. If you want more information you can always reach out to me and I will help as best as I can 😄.

Dream Job vs. Tech Job?

Charalambos Ioannou — Wed, 01 Jun 2022 09:02:27 +0000

Hello Devs!

I have recently stumbled upon a dilemma which I would appreciate your input.

Since I was a kid I had in mind a job which I would have liked to dedicate my life to. However the chances of getting that job were 15 out of 1000 people, so I gave up that dream because of the minimal odds of acceptance and followed my second passion which was technology. Now I have dedicated my entire studies and life to tech and managed to get a job in a FAANG company starting in September. It’s worth noting that I am very passionate and love tech, coding and the community.

However, one day I decided to interview for my dream job as well. This interview process is very lengthy and is done once every 2 years. Without believing it I got an offer again starting in September.

So I am asking what would you do. Would you take a job at FAANG which you know dedicated and studied for a long time or would you reject the FAANG offer and accept your dream job?

Any feedback is appreciated! 😀

Create an Awesome Cover Letter with GPT-3

Charalambos Ioannou — Wed, 27 Apr 2022 16:02:44 +0000

In this tutorial I am going to show you how to use a deep learning model called GPT-3 to create a cover letter for you in seconds with tons of variation. This cover letter can be used when applying for new jobs.

Sections:

What is GPT-3?
Is it cheating?
What will we be coding?
Tutorial Steps
1. Step 1: Create a new account with OpenAI
2. Step 2: Create new API key
3. Step 3: Time To Code
Full Code

What is GPT-3?

GPT-3 stands for Generative Pre-trained Transformer 3 and is a transformer model created by OpenAI. In short this model was created and trained using text on the internet, and can be used to generate realistic human text.

Is it cheating?

Since all of us here are developers, having an algorithm generate realistic text for a cover letter shows innovation and staying up to date with all the latest trends in technology. So I do not believe this is cheating in any way but shows dedication and curiosity to learn new technologies.

I have personally used this for a job application and the feedback that I got was that "Your application stood out to us..." and finally after passing the next interview steps got offered a job.

What will we be coding?

What we will be coding is very simple, we are just utilizing the power of the GPT-3 algorithm. We will not be training or testing anything. We will simply supply the GPT-3 algorithm with some sample cover letters so that it will understand what we are trying to generate and then call a function which runs the GPT-3 algorithm and generates our cover letter.

Without further ado let’s dive into the tutorial.

Steps

Step 1: Create a new account with OpenAI

Click here to go to OpenAI's sign up page and create a new account.

After the account is created some free credits are given to you which expire within one month. So be sure to create your cover letter within that month.

Step 2: Create new API key

By going to your account on the top right corner and clicking on "View API keys" you are redirected to the page where you can create a new key. This can be seen on the screenshot below. Go ahead and create a new API key.

Step 3: Time To Code

Open up your favourite code editor and follow along with me. We only need to do 5 steps.

1) First we import the necessary libraries. Most probably you will need to install the openai library by typing pip install openai.

import openai as ai
import json

2) Then we add our API key as a variable:

ai.api_key = "YOUR_API_KEY_HERE"

3) Then we import our text file which contains some sample inputs along with responses so that GPT-3 will know what to generate.

with open("prompt.txt") as pro:
    prompt = pro.read()

This file has the form of:

Input: Generate a cover letter for a Management Consulting job at Goldman Sachs. 

Output: Dear Hiring Manager,

I would like .....

Input: "Generate a cover letter for a Management Consulting job at ABC company."

Output:

By leaving the output as blank in the last line, the algorithm will know and fill out the text by itself. By adding more input/output combinations the algorithm learns better what to generate.
The full text file that I used can be found here.

4) We then create our model using the following:

returns = ai.Completion.create(
    engine="davinci", # OpenAI has made four text completion engines available, named davinci, ada, babbage and curie. We are using davinci, which is the most capable of the four.
    prompt=prompt, # The text file we use as input (step 3)
    max_tokens=100, # how many maximum characters the text will consists of.
    temperature=0.9, # a number between 0 and 1 that determines how many creative risks the engine takes when generating text.,
    top_p=1, # an alternative way to control the originality and creativity of the generated text.
    n=1, # number of predictions to generate
    frequency_penalty=0.5, # a number between 0 and 1. The higher this value the model will make a bigger effort in not repeating itself.
    presence_penalty=0.9 # a number between 0 and 1. The higher this value the model will make a bigger effort in talking about new topics.
)

All parameters this function takes are explained as comments.

5) Lastly we need to obtain the actual text return from the function. This is done using the following line:

text = returns['choices'][0]['text']
print(text)

If you choose to return more than 1 sample (set n>1 in the function above) you need to change the [0] to the corresponding
index.

Full Code:

For those who just need the code here is the complete file:

import openai as ai
import json

ai.api_key = "YOUR_API_KEY_HERE"

# Import text prompt
with open("prompt.txt") as pro:
    prompt = pro.read()

# The Model
returns = ai.Completion.create(
    engine="davinci", # OpenAI has made four text completion engines available, named davinci, ada, babbage and curie. We are using davinci, which is the most capable of the four.
    prompt=prompt, # The text file we use as input (step 3)
    max_tokens=100, # how many maximum characters the text will consists of.
    temperature=0.9, # a number between 0 and 1 that determines how many creative risks the engine takes when generating text.,
    top_p=1, # an alternative way to control the originality and creativity of the generated text.
    n=1, # number of predictions to generate
    frequency_penalty=0.5, # a number between 0 and 1. The higher this value the model will make a bigger effort in not repeating itself.
    presence_penalty=0.9 # a number between 0 and 1. The higher this value the model will make a bigger effort in talking about new topics.
)


text = returns['choices'][0]['text']

print(text)

This along with the sample text file can be found on my GitHub repo as well.

THAT’S IT!!!
I hope you find this easy and useful.

Hope you enjoyed it 😄.

Happy Exploring!!

10+1 Useful Python Code Snippets for Everyday Problems

Charalambos Ioannou — Thu, 06 Jan 2022 09:36:41 +0000

Hello Everyone,

Python is the most frequently used programming languages for Machine Learning, Data Science and Analytics and even Web Development.

This post lists 10 + 1 bonus Python code snippets which will assist with common and everyday problems. Also, these code snippets are only a single line!

Here are the sections for quick navigation:

Variable Swapping
Select a Random Element
Remove Duplicates in a List
Find All Indices of an Element in a List
Display the Current Date and Time in String Format
Filter a List
One Line Dictionary from List
String to Integer
Flatten a list
Load file in a list
Bonus

1. Variable Swapping

One of the most common problems that we face each day is how to swap two variables. Algorithms and data structures have taught us that we need a third temporary variable in order to swap two variables. However this is not needed in Python:

# Instead of this:
tmp = var1
var1 = var2
var2 = tmp

# We can do this:
var1, var2 = var2, var1

2. Select a Random Element

The following code snippet yes depends on a library however it can provide cryptographically secure random choices and a usage for this is for generating a passphrase from a wordlist.

import secrets
res = secrets.choice(['cat', 'dog', 'horse', 'car'])

Note: secrets was added in Python 3.6. On older versions of Python you can use the random.SystemRandom from the random library.

3. Remove Duplicates in a List

This one liner is used to remove duplicates in a list when the ordering of the elements is not important.

res = list(set([1,1,1,2,3,3,3]))

4. Find All Indices of an Element in a List

The following snippet uses list comprehension to return all the indices of the search element instead of just the first occurrence as done by .index().

lst = [1, 2, 3, 'Alice', 'Bob', 'Alice']
res = [i for i in range(len(lst)) if lst[i]=='Alice']

5. Display the Current Date and Time in String Format

This one liner imports the datetime library, gets the current date and time and converts it into a string. This can be frequently used to integrate the date and time into various results shown to a user.

import datetime; res = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")

6. Filter a List

List comprehension has become the Pythonic way of filtering a list. Here is the code snippet:

lst= [5,6,7,8,10,20,30]
res = [i for i in lst if i > 10]

7. One Line Dictionary from List

The following code snippet creates a dictionary with the list indices as key and their elements as values.

lst = ["a", "b", "c", "d"]
res = dict(enumerate(lst))

8. String to Integer

Using the map method we can convert a string list containing numbers into integers. This can be useful when taking input from the user as a string and need to convert it into integer.

lst = ["5", "6", "7", "8", "9"]
res = list(map(int, lst))

9. Flatten a list

Machine Learning experts, and Data Scientists frequently deal with multi-dimensional lists and might need to convert these data into one-dimensional. The following one-liner does this without the use of any libraries like numpy.

lst = [[1],[2],[3]]
res = [item for sublist in lst for item in sublist]

10. Load file in a list

The following one liner reads a txt file and adds each line as a new element in a list.

lst = [line.strip() for line in open('input_file.txt', 'r')]

Bonus

These libraries have saved me tons on time in my development process and can still be categorised as one-liners since just one command is needed for these to work.

Pipreqs

This library comes in handy when you need to generate a requirements file. It automatically generates the requirements.txt file with all the import libraries and versions you are using in your current project only.
Here's how to generate your requirements.txt file.

pip install pipreqs
pipreqs /path/to/project/location

Pyforest

With this library you are able to use all your favorite Python libraries without importing them before. It contains the most popular Python libraries such as pandas, matplotlib, seaborn, numpy and sklearn. The best part of this package is that if you don't use a library, it won't be imported.
Here's how to use Pyforest in your own project

pip install --upgrade pyforest
python -m pyforest install_extensions

Then simply add import pyforest in your project and you are good to go.

THATS ALL! I hope you enjoyed reading this article and found the content helpful 😃.

Develop a mobile app with NO coding!!

Charalambos Ioannou — Wed, 21 Apr 2021 00:45:50 +0000

I have recently stumbled upon a website which allows you to create mobile apps for free without any coding. In fact, the first thing you see when you land on Glideapps website is "Build an app from a Google Sheet in five minutes, for free".

I was very intrigued by this statement, so I quickly signed up and started browsing around. I quickly saw that this was extremely easy, and the end result looks very professional. The only thing you need is just a spreadsheet with some data.

Glideapps can quickly transform spreadsheets into beautiful, very easy-to-use and professional apps, without any code. You first create a spreadsheet and then you can build your app from scratch or with a template. Then you can share it with anyone without the need to install an APK. Its just a browser link.

Here is a glimpse of what Glideapps can do, with my currently in development personal project of a price tracker for any product that exists in the web. You just need to add the link of the item to the spreadsheet!

As you can see, the same spreadsheet data can be shown with different formats that best suits your needs.

And the best part about it... The free tier is very generous if you are going to develop small personal projects.

P.S: If this seems like an interesting website and would like to know more about it, I can release a tutorial series about Glideapps. I welcome any comments 😀

Awesome typing effect overlay on images (CSS+JS)

Charalambos Ioannou — Thu, 20 Aug 2020 12:05:57 +0000

This is a tutorial on how to create a typing effect overlay on images. It was done with pure CSS and JS without any additional libraries. The result is this:

Here the typing effect was added on a hero image. A hero image is a large image that is prominently placed on a web page (Source: wikipedia). It is used to immediately attract a visitor’s attention.

Sections:

Step 1 - Finding the image
Step 2 - Beautify it using CSS
Step 3 - Creating the typing effect using JS
1. Explanation of JS code
Full code (codepen)

Step 1 - Finding the image

To start with, we first find a hero image that best suits our needs. My go to website for getting free stock images is https://www.pexels.com/. Once you have found your image, create a new HTML file and add the following script inside the body tag. Replace the hero_image.jpg with the path and name of your own image.

<div class="container">
        <img src="hero_image.jpg" alt="Hero Image">
        <div class='console-container'>
            <span id='text'></span>
            <div class='console-underscore' id='cursor'>|</div>
        </div>
    </div>

Now your page should look like this:

Step 2 - Beautify it using CSS

Now we will add some CSS to make our image look like a hero image and attract more attention. Add the following code in your CSS file or in a style tab inside the HTML.

        @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap');

        .console-container {
            font-family: 'Open Sans', sans-serif;
            font-size: 4vw;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .console-underscore {
            display: inline-block;
            position: relative;
            color: white;
        }

        .container {
            position: relative;
            text-align: center;
        }
        img {
            width:100%;
        }

Now your page should look like this:

Don't mind the vertical bar. We will animate it and use it as a cursor in the next step

Step 3 - Creating the typing effect using JS

The final step is to add the text we want to animate and actually animate it using JavaScript. To do that add the following block of code which is a function we can call:

Important: Place this script below the div tags which contain the image. Otherwise the typing effect will not work.

function typing_effect(words, colors) {

      var cursor = document.getElementById('cursor'); //cursor
      var text = document.getElementById('text') //text

      var blink = true;
      var wait = false;
      var letters_count = 1;
      var temp = 1;

      text.style.color = colors[0]
      window.setInterval(function () { //wait between words when it starts writting
        if (letters_count === 0 && wait === false) {
          wait = true;

          text.innerHTML = '' // leave a blank
          window.setTimeout(function () {
            var usedColor = colors.splice(0, 1)[0] //remove first element and get it as str
            colors.push(usedColor);
            var usedWord = words.splice(0, 1)[0]
            words.push(usedWord);
            temp = 1;
            text.style.color = colors[0]
            letters_count += temp;
            wait = false;
          }, 1000)
        } else if (letters_count === words[0].length + 1 && wait === false) {
          wait = true;
          window.setTimeout(function () { //wait a bit until words finished and start deleting
            temp = -1;
            letters_count += temp;
            wait = false;
          }, 1000)
        } else if (wait === false) { //write words                    
          text.innerHTML = words[0].substr(0, letters_count)
          letters_count += temp;
        }
      }, 120)
      window.setInterval(function () {
        if (blink) {
          cursor.style.opacity = "0";
          blink = false;
        } else {
          cursor.style.opacity = "1";
          blink = true;
        }
      }, 400)
    }

The call to the function is: typing_effect(words , colors). These parameters are lists. The first parameter is a list of strings containing all the phrases that will be displayed. The second parameter is a list of strings containing the colors that each phrase will have. Note: The two lists don't have to have the same length. The call in my example is:

typing_effect(['Hello World', 'My name is Harry', 'I am a programmer', 'This is a JS+CSS example'],
            ['#FFFFFF', 'orange', 'blue', 'yellow']);

Explanation of JS code

If you want to skip the explanation of the code just click here to go to the next section.

Parameters

The code is a single function that takes 2 input parameters. They have been explained in the previous section.

The call to the function is: typing_effect(words , colors). These parameters are lists. The first parameter is a list of strings containing all the phrases that will be displayed. The second parameter is a list of strings containing the colors that each phrase will have. Note: The two lists don't have to have the same length.

Variables

var cursor= document.getElementById('cursor'); - gets the cursor
var text= document.getElementById('text'); - gets the area which we will add the text
var blink= true; - flag that shows/hides cursor
var wait= false;- flag that waits between phrases
var letters_count= 1; - int which counts the letters
var temp= 1; - int used to increment/decrement letters_count

Function

The function consists of 2 setTimeout and 2 setInterval functions. The first setInterval is used to type the phrases, delete them and then type the next one.
This block of code waits between phrases before starting to type the next phrase.

  if (letters_count === 0 && wait === false) {
          wait = true;

          text.innerHTML = '' // leave a blank
          window.setTimeout(function () {
            var usedColor = colors.splice(0, 1)[0] 
            colors.push(usedColor);
            var usedWord = words.splice(0, 1)[0]
            words.push(usedWord);
            temp = 1;
            text.style.color = colors[0]
            letters_count += temp;
            wait = false;
          }, 1000)
}

This block of code waits 1 second after the phrase is typed and starts deleting it.

 else if (letters_count === words[0].length + 1 && wait === false) {
          wait = true;
          window.setTimeout(function () {
            temp = -1;
            letters_count += temp;
            wait = false;
          }, 1000)
        }

This block of code simply types the words

else if (wait === false) {                    
          text.innerHTML = words[0].substr(0, letters_count)
          letters_count += temp;
        }

Lastly this block of code makes the cursor blink to simulate the cursor when typing.

window.setInterval(function () {
        if (blink) {
          cursor.style.opacity = "0";
          blink = false;
        } else {
          cursor.style.opacity = "1";
          blink = true;
        }
      }, 400)

Full Code

The full code in codepen is here:

THAT’S IT!!!
I hope you find this easy and useful.

Hope you enjoyed it 😄.

Happy Exploring!!

Create a dynamic GitHub profile Readme

Charalambos Ioannou — Mon, 03 Aug 2020 20:29:46 +0000

GitHub recently released a feature that allows users to create a profile Readme markdown file. This has not been officially documented by GitHub but it is used by plenty of people. This profile Readme file acts like a portfolio for users and allows the users to convey important information about them to whoever is watching their profile.

There are a lot of articles which show how to create a profile readme. In this article I will describe how to make it dynamic. For example, show some GitHub profile stats (stars, commits, etc), show the most used languages or even show the most recent blog posts of the user. You can check my profile here here: https://github.com/CharalambosIoannou. Now let’s begin:

Step 1: Create the profile readme

Go to GitHub and create a new repository with your username as the name of the repository as seen below. Also tick the box which says Initialize this repository with a README. Mine shows a warning since I have already created the repo.

Step 2: Add the details you want to show to the rest of the world

What I did was display my name in the top along with the link to my website for easy access by anyone.
Then I completed the default information provided by GitHub once the readme file is created.
Then I added links to social media and contact info for anyone who wants to contact me and afterwards I added icons to all the languages and tools I frequently use and I am familiar with. The code for these is seen below: (I removed most of the language links so that it does not take much space here. If you want the full list check my readme file from the link at the end of the article)

## ✉️ Find me on:


<p align="center">
 <a href="https://charalambosioannou.github.io/" target="_blank" rel="noopener noreferrer"> <img src="https://raw.githubusercontent.com/iconic/open-iconic/master/svg/globe.svg" alt="Python" height="40" style="vertical-align:top; margin:4px"> </a>
 <a href="https://linkedin.com/in/charalambosioannou" target="_blank" rel="noopener noreferrer"> <img src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/linkedin.svg" alt="Python" height="40" style="vertical-align:top; margin:4px"></a>
 <a href="mailto:cioannou1997@gmail.com"> <img src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/gmail.svg" alt="Python" height="40" style="vertical-align:top; margin:4px"></a>
</p>

<br />

## 🧰 Languages and Tools:
<p align="center">
<img src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/python/python.png" alt="Python" height="40" style="vertical-align:top; margin:4px">
<img src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/javascript/javascript.png" alt="Javascript" height="40" style="vertical-align:top; margin:4px">
<img src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/visual-studio-code/visual-studio-code.png" alt="VS Code" height="40" style="vertical-align:top; margin:4px">
</p>

I used html style for showing the images instead of markdown because I can center the images.

My readme profile with those details is shown below

Step 3: Add dynamic data

The dynamic data I use are:

1) GitHub profile visitor count
2) GitHub profile followers count
3) Dev.to blog posts
4) GitHub profile statistics (stars, commits, etc)
5) Most used languages in my repositories

1) GitHub profile visitor count

Add this line of code to the readme but replace my username CharalambosIoannou with your github username.

![](https://visitor-badge.laobi.icu/badge?page_id=CharalambosIoannou.CharalambosIoannou)

2) GitHub profile followers count

Add this line of code to the readme but replace my username CharalambosIoannou with your github username.

[![Github](https://img.shields.io/github/followers/CharalambosIoannou?label=Follow&style=social)](https://github.com/CharalambosIoannou)

3) Dev.to blog posts

In order to dynamically get the latest dev.to blog posts we have to create a YAML file and a GitHub action, however thanks to this repo https://github.com/gautamkrishnar/blog-post-workflow this has never been easier.
The first step to do this is to copy and paste this code section inside your readme file:

# Blog posts
<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->

The next step is to create a folder named .github and inside that create another folder named workflows.
In the workflows folder create a file named blog-post-workflow.yml
In the blog-post-workflow.yml file copy and paste this code:

name: Latest blog post workflow
on:
  schedule:
    # Runs every hour
    - cron: '0 * * * *'
  workflow_dispatch:

jobs:
  update-readme-with-blog:
    name: Update this repo's README with latest blog posts
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: gautamkrishnar/blog-post-workflow@master
        with:
          feed_list: "https://dev.to/feed/charalambosioannou"

In the feed_list section replace my dev.to username charalambosioannou with your own dev.to username.
There are a lot of other settings here like changing the number of posts shown (the default is 5) or adding multiple sources (dev.to, stackoverflow,etc). All these settings can be found here: https://github.com/gautamkrishnar/blog-post-workflow#options
Then push your changes if you have done them locally and go to the actions section.

The next step is to click on the Latest blog post workflow button, then Run workflow and again Run workflow. Then wait a few seconds and the task will run.

4) GitHub profile statistics (stars, commits, etc)

Add this line of code to the readme but replace my username CharalambosIoannou with your github username.

![GitHub stats](https://github-readme-stats.vercel.app/api?username=CharalambosIoannou&show_icons=true&theme=tokyonight)

If you want to change the theme of the stats go to https://github.com/anuraghazra/github-readme-stats/blob/master/themes/README.md and choose the theme you like and replace the tokyonight text in the url with the name of the theme you want.

5) Most used languages in my repositories

Add this line of code to the readme but replace my username CharalambosIoannou with your github username.

![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=CharalambosIoannou&theme=tokyonight)

If you want to change the theme of the stats go to https://github.com/anuraghazra/github-readme-stats/blob/master/themes/README.md and choose the theme you like and replace the tokyonight text in the url with the name of the theme you want.
You can also hide a language by adding the parameter &hide=language in the url. Replace language with the language name you want to hide.

Conclusion

The end result looks like this:

I suggest for your own profile to make it concise and be creative with it. I hope you enjoyed this tutorial and found it useful. You can check mine here: https://github.com/CharalambosIoannou. If you need some ideas on how to create your own readme you can find plenty of examples in this repo: https://github.com/abhisheknaiidu/awesome-github-profile-readme

I hope you enjoyed reading this article and found the content helpful. You can support me by clicking the button below to buy me a cup of coffee. Your generosity will encourage me to write articles more frequently.

Create a static webpage with a contact form on Github pages

Charalambos Ioannou — Mon, 18 May 2020 17:10:58 +0000

What are GitHub pages?

GitHub pages allow you to host a website directly from your GitHub repository. It can host static websites that take HTML, CSS, and JavaScript files straight from your GitHub repository. It cannot execute server-side code like PHP so we can not add a contact form that redirects to a PHP file. That is where formspree comes in.

Steps

Step 1: Create a new repository named `<username>.github.io`. `<username>` is your GitHub username.

Note: My repo name shows an error since I already have a repository named CharalambosIoannou.github.io. Also, the repository must be set to public.

Step 2: Create your static page. Make sure the main html file is named `index.html`.

In my case I have created my portfolio website as can be seen from the image below.

Step 3: Navigate to formspree

1) In formspree click the sign-up button in the top right corner and enter your email address along with a password.
2) Verify your email
3) Press the + button and enter a form name. The email input box should be auto filled with the email address used to sign up to fromspree.

4) You can then copy paste the code provided by formspree into your website.

I have altered this code slightly to allow visitors to add a message as well. The code used is:



<div id="contact">
        <h2>Get in Touch</h2>
        <div id="contact-form">
                <form action="https://formspree.io/mpzyqdng" method="POST">
                <input type="hidden" name="_subject" value="Contact request from personal website" />
                <input type="email" name="_replyto" placeholder="Your email" required>
                <textarea name="message" placeholder="Type your message" required></textarea>
                <button type="submit">Send</button>
            </form>
        </div>
    </div>

And this code produces the following result:

Step 4: Push your code to GitHub and navigate to your website by typing `https://<username>.github.io/` in the URL.

If you cannot see your website after some time has passed then go to your repository, click on settings, scroll down until you see a section named "GitHub Pages" and click on the None dropdown in the Source subsection and set it to master branch.

You know if your website is published if you see this message in the "GitHub Pages" section:

Step 5: Testing your form.

If you want to test your form, then go to your website and fill out your form.
When clicking the send button we get redirected and have to authenticate that we are not a robot 🤖. When ticking the box, soon enough you will receive an email with all the details the sender has provided.

THAT’S IT!!!

I hope you find this easy and useful.

P/S: This is my first post ever. Hope you enjoyed it 😄.

Happy Exploring!!

Resources: GitHub

Forem: Charalambos Ioannou

Getting Started with Git and GitHub: A simple roadmap

TL;DR

Roadmap:

Dream Job vs. Tech Job?

Create an Awesome Cover Letter with GPT-3

Sections:

What is GPT-3?

Is it cheating?

What will we be coding?

Steps

Step 1: Create a new account with OpenAI

Step 2: Create new API key

Step 3: Time To Code

Full Code:

10+1 Useful Python Code Snippets for Everyday Problems

Here are the sections for quick navigation:

1. Variable Swapping

2. Select a Random Element

3. Remove Duplicates in a List

4. Find All Indices of an Element in a List

5. Display the Current Date and Time in String Format

6. Filter a List

7. One Line Dictionary from List

8. String to Integer

9. Flatten a list

10. Load file in a list

Bonus

Pipreqs

Pyforest

Develop a mobile app with NO coding!!

Awesome typing effect overlay on images (CSS+JS)

Sections:

Step 1 - Finding the image

Step 2 - Beautify it using CSS

Step 3 - Creating the typing effect using JS

Explanation of JS code

Parameters

Variables

Function

Full Code

Create a dynamic GitHub profile Readme

Step 1: Create the profile readme

Step 2: Add the details you want to show to the rest of the world

Step 3: Add dynamic data

1) GitHub profile visitor count

2) GitHub profile followers count

3) Dev.to blog posts

4) GitHub profile statistics (stars, commits, etc)

5) Most used languages in my repositories

Conclusion

Create a static webpage with a contact form on Github pages

What are GitHub pages?

Steps

Step 1: Create a new repository named <username>.github.io. <username> is your GitHub username.

Step 2: Create your static page. Make sure the main html file is named index.html.

Step 3: Navigate to formspree

Step 4: Push your code to GitHub and navigate to your website by typing https://<username>.github.io/ in the URL.

Step 5: Testing your form.

THAT’S IT!!!

Step 1: Create a new repository named `<username>.github.io`. `<username>` is your GitHub username.

Step 2: Create your static page. Make sure the main html file is named `index.html`.

Step 4: Push your code to GitHub and navigate to your website by typing `https://<username>.github.io/` in the URL.