Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,143,339 members, 7,780,890 topics. Date: Friday, 29 March 2024 at 03:01 AM

Let's Build Someone A Portfolio Website - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / Let's Build Someone A Portfolio Website (1457 Views)

Please Rate My Portfolio Website / Rate My Portfolio Website On A Scale Of 1-10 / How To Build A Portfolio Website (2) (3) (4)

(1) (2) (Reply) (Go Down)

Let's Build Someone A Portfolio Website by Karleb(m): 12:14am On Feb 20, 2021
https://site-neon-seven./

The link to the project as it progress.

I've always wanted to do this. cheesy

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, 2021
shoot!!

1 Like

Re: Let's Build Someone A Portfolio Website by Karleb(m): 12:18am On Feb 20, 2021
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.

1 Like

Re: Let's Build Someone A Portfolio Website by Karleb(m): 12:26am On Feb 20, 2021

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.

1 Like

Re: Let's Build Someone A Portfolio Website by Jahzrockballer(m): 5:02pm On Feb 20, 2021
Following
Re: Let's Build Someone A Portfolio Website by Karleb(m): 7:23pm On Feb 20, 2021
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, 2021
Nice. Following this thread
Re: Let's Build Someone A Portfolio Website by Karleb(m): 9:33pm On Feb 20, 2021
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.

1 Like

Re: Let's Build Someone A Portfolio Website by Karleb(m): 9:42pm On Feb 20, 2021
You can name your folder anything you like, I chose site because what we are building is a site. cheesy

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, 2021

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. lipsrsealed

1 Like

Re: Let's Build Someone A Portfolio Website by Karlebolu(m): 3:22pm On Feb 21, 2021
..
Re: Let's Build Someone A Portfolio Website by Karleb(m): 3:24pm On Feb 21, 2021
Update on the sketch

Re: Let's Build Someone A Portfolio Website by Karleb(m): 3:58pm On Feb 21, 2021
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.

1 Like

Re: Let's Build Someone A Portfolio Website by Karleb(m): 4:11pm On Feb 21, 2021
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/

1 Like

Re: Let's Build Someone A Portfolio Website by Karleb(m): 8:26pm On Feb 21, 2021
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.

1 Like

Re: Let's Build Someone A Portfolio Website by Karleb(m): 8:38pm On Feb 21, 2021
Abeg if you are following this tutorial, drop a like. grin

5 Likes

Re: Let's Build Someone A Portfolio Website by Karleb(m): 8:47pm On Feb 21, 2021
"site" project from github mobile.

Re: Let's Build Someone A Portfolio Website by Karleb(m): 9:03am On Feb 22, 2021
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! grin grin


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. grin
Re: Let's Build Someone A Portfolio Website by Karleb(m): 3:16pm On Feb 22, 2021
If you're following this tutorial, try to star the repository on github. Thank you. grin

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!


1 Like

Re: Let's Build Someone A Portfolio Website by Karleb(m): 9:24pm On Feb 22, 2021
I have done a lot of work on the header and by now it is obvious who owns the portfolio website. grin

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, 2021
I saw it, men. Thanks.
Re: Let's Build Someone A Portfolio Website by Karleb(m): 10:28pm On Feb 22, 2021
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.
Re: Let's Build Someone A Portfolio Website by Karleb(m): 10:57pm On Feb 22, 2021
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! wink
Re: Let's Build Someone A Portfolio Website by Karleb(m): 10:43am On Feb 23, 2021
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.
Re: Let's Build Someone A Portfolio Website by Karleb(m): 11:20pm On Feb 23, 2021
I have made some update on the portfolio website.


Check it out! https://site-neon-seven./
Re: Let's Build Someone A Portfolio Website by Karleb(m): 4:55pm On Feb 24, 2021
What we have as at today. cheesy

Re: Let's Build Someone A Portfolio Website by Karleb(m): 4:56pm On Feb 24, 2021
cool

Re: Let's Build Someone A Portfolio Website by Karleb(m): 4:57pm On Feb 24, 2021
tongue

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


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, 2021
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, 2021
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. cheesy
Re: Let's Build Someone A Portfolio Website by Nobody: 6:42am On Feb 25, 2021
Karleb:
You can name your folder anything you like, I chose site because what we are building is a site. cheesy

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 grin
Re: Let's Build Someone A Portfolio Website by bularuz(m): 10:14am On Feb 25, 2021
Good job Op

(1) (2) (Reply)

Where Can I Learn Java In Lagos / OpenAI ChatGPT Conversation AI Shocked The World / Please Help! How Do I Open My Visual Basic Program In Visual Studio 2008?

(Go Up)

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

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 49
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.