https://site-neon-seven./

The link to the project as it progress.

I've always wanted to do this.

In this tutorial, we'll be building an individual a portfolio website. He's name shall be revealed soon.

The idea behind it is to not use any fancy framework or library, we'll make it as vanilla as we can.

We'll only use a framework or library when writing the code will be long. So no react or vue.

This is a beginner friendly tutorial.

shoot!!

What will you learn?

---

HTML

CSS

Javascript

Git

Command Line Interface (CLI)




The tutorial will be more focused on the front end but if time and chance permits, we'll boot up a nodejs server to send mail in the contact section.


We will also host our code on a live server when we are done. Either on nelify or varcel or maybe heroku.



Also, the website will be mobile responsive on major screens. That is, mobile and desktop. We might do something for tablets. The difference between tablets and mobile screens for most websites aren't always big though.

Planning!


1. To make the website look good on all major browser, we will be using normalize css.


2. The website will be one HTML paged website.


3. The CSS will be broken up to many files though. We'll leverage on the css @import syntax to combine them all. The reason is to stop us from writing spaghetti code.

4. We will have a header section that contains the site name and links or a hamburger menu that toggles the links display on mobile.

5. The section below it will contain the picture, the name and the social media links of the developer.

6. The next section will be the about me section.

7. Next will be the contact section which will contain a contact form.

8. Next will be the footer, which will contain the social media links, the current year amongst other things.

---

During the course of the tutorial, some items not listed here might be implemented. It's called scope creep.




Later in the day I'll upload a rough HTML scetch and the folder structure.

Following

Don't be angry guy's, there is no power since. When they restore it I will do a major update.

Nice. Following this thread

Folder structure and sketch.

The sketch doesn't contain a section to show off past work, that's because it is just a sketch.

By the time we start coding our project, it might vary slightly or greatly from the sketch.

The folder structure also contains the sketch folder, that's because I don't want to scatter the files.


Your own folder structure should not contain the sketch folder.


But if you put it (sketch folder), we'll include it in our git ignore file by the time we start using git, so it doesn't get pushed to github. It is not needed in production.

You can name your folder anything you like, I chose site because what we are building is a site.

REAME.md will give information about the project so when a stranger visit our github page, they'll know what the project is all about.

The .md essentially means markdown, so we'll write it in markdown. Markdown is another way to write HTML without actually writing HTML.

You can research about it but be rest assured that the little markdown you'll need in this project will be provided by myself. So don't bother too much about markdown.

Creating the folder structure via command line.


Go to the directory you want to create the project and use the following commands:


mkdir site
cd site
mkdir css
touch css/index.css
mkdir images
mkdir js
touch js/app.js
touch index.html
touch README.md


cd means change directory
mkdir means make directory that is, a folder.
touch creates a file, it will create a file inside a folder if you prepend the folder to the file.


To learn more about CLI, visit https://www.w3schools.com/whatis/whatis_cli.asp#:~:text=CLI%20is%20a%20command%20line,MS-DOS%20and%20Apple%20DOS



WARNING: Do not use "rm - rf" anyhow. I will not be responsible for any damages.

..

Update on the sketch

Now, let us add git to our folder.


Before you can do the below, you need to add git to your system.

Head over to https://git-scm.com/downloads to get git.


Go to your folder through the terminal and type git init.


Type touch .gitignore

.gitignore is a file that will stay in our root folder to filter out any file or folder we do not want to push to github.

Your project can have as many as possible .gitignore file and you can have them in any folder. If I like, I can have another .gitignore in images or css folder.

I added /sketch in my .gitignore file because I don't want it pushed to github or production.

Type git status.
This will show us our tracked or untracked files. That is, files that has been added or not added to git. They files show red because they have not being added to git.

Next is git add .
This command adds all the files to git. The dot or period essentially means everything, you can specify individual files if you don't want everything add to git. for example, git add index.html will only add the index.html file to git.

Move over to github and create an account.

https://github.com/

We will stick to github because it is popular.

https://kbroman.org/github_tutorial/pages/first_time.html

The above link is a simple tutorial on how to link your github account to your system, so you can easily push code from your terminal to your github account. It is important and better and faster than going to github website to add code. It is what professionals do, you should too.

Checkout this 1 hour video on git and github.

https://www.youtube.com/watch?v=RGOj5yH7evk

...and this article on common git commands

https://www.freecodecamp.org/news/10-important-git-commands-that-every-developer-should-know/

---

Next, head over to vercel and open an acoount. It is preferable you do it with your github account.

I am using vercel because I find it easy. If you have deployed with nelify easily before now, please stick to it.

https://vercel.com/

Next we will create a git repository that contains the same name as the folder we have in our local environment, that is, our computer.

Since the my folder is named "site", my git repository will aslo be "site".

We will copy the below commands in our command line terminal.


git remote add origin git@github.com:karlebh/site.git
git branch -M main
git push -u origin main


This command will connect the repository on your github account to the one you have locally and makes committing and pushing of codes easy.



Now, if you browse to your repo on github, you'll see that the codes you have on your local environment is same as the one on github. The .gitignore file works properly as sketch folder is not pushed in my own case.

Abeg if you are following this tutorial, drop a like.

"site" project from github mobile.

I just realized I didn't provide link to the project on my github.

Here you have it.

https://github.com/karlebh/site


I've not been pushing works to my github lately. Don't judge me!


I'm thinking I should create another git branch that contains the sketch folder for those that may be interested and also host it, not on vercel though but on github.

For those that don't know, you can actually host your front-end project on github but we won't host this particular project on it, the reason is because to me, hosting on github is too simple.

In a development environment, the last place people think of when hosting is github. Hosting on vercel or nelify is better for this project in my opinion.



Do note that storing your codes on github is different from hosting your codes (HTML, CSS and Javascript only) on github.



When I get closer to my laptop, I'll implement these, for now, I dey hustle.

If you're following this tutorial, try to star the repository on github. Thank you.

For those interested in the github page site link for the sketch of this project.

Here you go https://karlebh.github.io/

This link https://github.com/karlebh/site/tree/sketch also leads to the github repo branch that has the sketch folder. check it out!

---

I have done a lot of work on the header and by now it is obvious who owns the portfolio website.

There is still work to be done but for now, I will retire.

Checkout the github repo https://github.com/karlebh/site for the update.

Download the code and see for yourself.

Note: There is still a lot of refactor to be done.

I saw it, men. Thanks.

tensazangetsu20:
I saw it, men. Thanks.

You deserve it bro.

Personally, I consider you the NL tech bro of the year 2020.

You can make a special request though.

Good news! Even though the site is not yet completed, it is live on vercel!

Here is the link.

https://site-neon-seven./

We will keep pushing to github and from github to vercel until we finish the project.

That is one of the beauty of github.

I will be back for explanation!

So what have I done behind the scene?

1. I have included normalize.css in the css folder and import it using @import rule in the index.css file.

2. I also imported some Google fonts in the index.css file.

3. I created a header.css file which is duly imported in the index.css. The HTML file will be long i.e. Spaghetti, there's nothing we can do about it. There's is no easy way to split html files into many components without using a Javascript library/framework.

The header.css contains css codes that styles the header section in the HTML.

3. I used media query to make the header responsive. The breakpoint is 768px width.

4. I made two nav tags that contain the navigation links. One for desktop, the other for mobile. Although they are styled differently but the contain thesame thing.

5. The header was styled using flexbox/grid in the layout. The navigation links for desktop are positioned differently using transform/translate. When you hover over them, they also change positions. It's a style I think is cool though.

Note that it is susceptible to change.

6. On mobile, the nav is has 0 height by default and displays to the full height when you click on the menu icon.

This action leverage on Javascript classList keyword.

I created two styles in utility.css. h-0 and h-100.

Javascript's classlist.replace('h-0', 'h-100') and classList.replace('h-100', 'h-0') are responsible for the toggle. The nav has transition on the height which gives it the smooth toggle display.

I have made some update on the portfolio website.


Check it out! https://site-neon-seven./

What we have as at today.

You can always visit the link here https://site-neon-seven./


Of course, there's still a lot of refactor to be done.

Amazing karleb. There's going to be a Gatsby conference for Jamstack development by the creators of Gatsby. You might be interested https://gatsbyconf.com/

tensazangetsu20:
Amazing karleb. There's going to be a Gatsby conference for Jamstack development by the creators of Gatsby. You might be interested https://gatsbyconf.com/

Thanks for the invite.

I'm not sure of my availability on those days though.

Karleb:
You can name your folder anything you like, I chose site because what we are building is a site.

REAME.md will give information about the project so when a stranger visit our github page, they'll know what the project is all about.

The .md essentially means markdown, so we'll write it in markdown. Markdown is another way to write HTML without actually writing HTML.

You can research about it but be rest assured that the little markdown you'll need in this project will be provided by myself. So don't bother too much about markdown.

the .md extension; what does it stand for please?

Modified: Never mind, I just read the rest of the post

Good job Op