|Join Nairaland / LOGIN! / Trending / Recent / New|
Stats: 2,638,325 members, 6,172,446 topics. Date: Saturday, 27 February 2021 at 08:15 PM
|Let's Build Someone A Portfolio Website by Karleb(m): 12:14am On Feb 20|
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.
|Re: Let's Build Someone A Portfolio Website by PAWG(m): 12:16am On Feb 20|
|Re: Let's Build Someone A Portfolio Website by Karleb(m): 12:18am On Feb 20|
What will you learn?
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.
|Re: Let's Build Someone A Portfolio Website by Karleb(m): 12:26am On Feb 20|
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.
|Re: Let's Build Someone A Portfolio Website by Jahzrockballer(m): 5:02pm On Feb 20|
|Re: Let's Build Someone A Portfolio Website by Karleb(m): 7:23pm On Feb 20|
Don't be angry guy's, there is no power since. When they restore it I will do a major update.
|Re: Let's Build Someone A Portfolio Website by Naijatask: 7:30pm On Feb 20|
Nice. Following this thread
|Re: Let's Build Someone A Portfolio Website by Karleb(m): 9:33pm On Feb 20|
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.
|Re: Let's Build Someone A Portfolio Website by Karleb(m): 9:42pm On Feb 20|
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.
|Re: Let's Build Someone A Portfolio Website by Karleb(m): 9:49pm On Feb 20|
Creating the folder structure via command line.
Go to the directory you want to create the project and use the following commands:
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.
|Re: Let's Build Someone A Portfolio Website by Karlebolu(m): 3:22pm On Feb 21|
|Re: Let's Build Someone A Portfolio Website by Karleb(m): 3:24pm On Feb 21|
Update on the sketch
|Re: Let's Build Someone A Portfolio Website by Karleb(m): 3:58pm On Feb 21|
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.
|Re: Let's Build Someone A Portfolio Website by Karleb(m): 4:11pm On Feb 21|
Move over to github and create an account.
We will stick to github because it is popular.
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.
...and this article on common git commands
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.
|Re: Let's Build Someone A Portfolio Website by Karleb(m): 8:26pm On Feb 21|
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 firstname.lastname@example.org: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.
|Re: Let's Build Someone A Portfolio Website by Karleb(m): 8:38pm On Feb 21|
Abeg if you are following this tutorial, drop a like.
|Re: Let's Build Someone A Portfolio Website by Karleb(m): 8:47pm On Feb 21|
"site" project from github mobile.
|Re: Let's Build Someone A Portfolio Website by Karleb(m): 9:03am On Feb 22|
I just realized I didn't provide link to the project on my github.
Here you have it.
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.
When I get closer to my laptop, I'll implement these, for now, I dey hustle.
|Re: Let's Build Someone A Portfolio Website by Karleb(m): 3:16pm On Feb 22|
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!
|Re: Let's Build Someone A Portfolio Website by Karleb(m): 9:24pm On Feb 22|
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.
2 Likes 1 Share
|Re: Let's Build Someone A Portfolio Website by tensazangetsu20(m): 10:11pm On Feb 22|
I saw it, men. Thanks.
|Re: Let's Build Someone A Portfolio Website by Karleb(m): 10:28pm On Feb 22|
You deserve it bro.
Personally, I consider you the NL tech bro of the year 2020.
You can make a special request though.
|Re: Let's Build Someone A Portfolio Website by Karleb(m): 10:57pm On Feb 22|
Good news! Even though the site is not yet completed, it is live on vercel!
Here is the link.
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!
|Re: Let's Build Someone A Portfolio Website by Karleb(m): 10:43am On Feb 23|
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.
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.
I created two styles in utility.css. h-0 and h-100.
|Re: Let's Build Someone A Portfolio Website by Karleb(m): 11:20pm On Feb 23|
I have made some update on the portfolio website.
Check it out! https://site-neon-seven.vercel.app/
|Re: Let's Build Someone A Portfolio Website by Karleb(m): 4:55pm On Feb 24|
What we have as at today.
|Re: Let's Build Someone A Portfolio Website by Karleb(m): 4:56pm On Feb 24|
|Re: Let's Build Someone A Portfolio Website by Karleb(m): 4:57pm On Feb 24|
You can always visit the link here https://site-neon-seven.vercel.app/
Of course, there's still a lot of refactor to be done.
|Re: Let's Build Someone A Portfolio Website by tensazangetsu20(m): 5:20pm On Feb 24|
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/
|Re: Let's Build Someone A Portfolio Website by Karleb(m): 5:35pm On Feb 24|
|Re: Let's Build Someone A Portfolio Website by Rgade: 6:42am On Feb 25|
Karleb:the .md extension; what does it stand for please?
Modified: Never mind, I just read the rest of the post
|Re: Let's Build Someone A Portfolio Website by bularuz(m): 10:14am On Feb 25|
Good job Op
|Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health |
religion celebs tv-movies music-radio literature webmasters programming techmarket
Nairaland - Copyright © 2005 - 2021 Oluwaseun Osewa. All rights reserved. See How To Advertise. 123