If you want to work as a freelanceronline it's a must to have a portfolio in this video i will show you step by step inless than 20 minutes how to create an awesome portfolio like this one and boost your freelancingcareer online stay tuned and follow up with me hi everyone i'm hasan from h-educateand today i'm so excited to publish this new awesome tutorial on how to create a freetotally free portfolio website with blogger.com just one question now imagine you are a clientand you are asking and contacting a freelancer for a project the first thing you ask is hisportfolio his work his experience so it's very nice to have a portfolio a simple link you sendto your client and he can see your work and give him some trust before working together so let'sstart together and build this awesome portfolio.
In less than 20 minutes but before please don'tforget subscribe now to my channel and like the video to get every new update almost every dayokay friends so the first step is to have a gmail account i think you already have one so simplyopen your browser and go to a website called blogger.com this company is by google so you willsee this simple screen what you are going to do simply is click on create a blog that simpleand now you need to name it i will say now my port my portfolio and click on next and nowit will tell you to enter the url the address it's like a domain of your blog now we will gowith a free name from blogspot so i will say like my name now and while you are writing it will tellyou if this address exists or not so now with tell me it doesn't exist i will say like very nice sothis address exists this is my user anything you.
Want write your name here whatever and check ifit's available that's simple and click on save now our blog our website will be created sosimple now click on view blog to view our website and here is our portfolio the emptywebsite that's simple now the next step is to update or to change the theme of the websiteokay so let's go back here and then click on theme and simply now click on this small arrow hereand click on restore so we can get a custom theme click now on upload and now on my desktop i havethis portfolio theme you will find this attached description below just download it and get thistheme you'll find this xml file just click on it and now the theme will be restored and updatedvery nice it now shows a custom modified theme click on this now view blog let's refreshand now let's see this awesome design you see.
We have this awesome portfolio let'snavigate down about me services portfolio get a free code we have a link here we have acontact form so it's a full portfolio website in just one minute now we need just to edit somestuff inside the website and you will be ready to publish it online so let's start you see here hii am and this is the sample name john smith so you need to change this and replace it with your namewhat you are going to do is simply just copy this john smith ctrl c copy it and go back to bloggertheme options go here and click on edit html that's simple now the html editor will opendon't worry you are not going to code anything just ctrl f to find something you see thesearch bar here and simply here write down joan smith which is this name here and go downyou will see it's highlighted automatically.
What you are going to do simply is change thename so just say in my case my name save it now go to my portfolio website refresh and now hii am hasan so you can see i changed the name this is how you can edit any text in the website justget the text you want and search for it here and then you can change it now you can see here i ama blogger this effect this really awesome effect i am a creator photographer whatever you want changeto add your skills or your domain what you work in so let's go back to template and you willsee here data type list under your name just edit those so i will say i am a content creatoras an example and a programmer that's simple save it and let's go back and refresh andnow you can see i am a content creator it will say now i am an online instructorso whatever you want you can edit them here.
And you will see that the template willbe updated directly i think it's so simple just edit the text inside the code now if yougo back we have these social links so it's very important to link to your social media accountsand profiles or whatever you want from this portfolio so how to make these links clickable soif one clicks on facebook facebook profile will open a click on twitter and so on i will showyou one example and you can do everything else you can see here the facebook icon let's go backto template if you go here down header social links everything is simple and described you willsee here f facebook you just need to replace this hashtag with your facebook profile so i willget my facebook profile i will open facebook let's say my facebook page i will getthis profile this link and just paste it.
Here that simple so the url now of facebookof my facebook page is here click on save and let's go back and refresh and now you willnotice when you hover over this icon you can open facebook look at the link open it and facebookmy facebook page will open now that's simple now you may ask how to make this link open ina new tab and don't open on the same portfolio website in the same tab simply go back here andyou can add this just beside this add target is equal to underscore blank that's simplesay save and let's go back refresh click on now facebook and you can see it opens another tabin this way you can keep the user on your website or on your portfolio so i think the idea is simpleon how to change text and how to change links and so on so let's continue you see this little iconhere or button if you click on it it will move.
Automatically to the about me section and thetheme automatically creates this menu here to navigate between sections it's really a cool themeyou can just create it in only one or two minutes so you see the about me section there's animage there's this name here there's some contact information website skills whatever so ithink now you are familiar how to edit the text anyway so let's say you want to add this namehere john doe so go back here and simply click inside the template and click on ctrl for press ctrl f and then search for john doe this name and you will see here we are now inthe page content in the personal title john doe this is the about section you see here theabout section it's so simple and clear and organized in a way you can directly identifysections so just rename this again i will enter.
My name and here and here you can see thistext here it's a sample text it appears here here you can enter some information about you asmall bio as an example or whatever in my case i will just delete this and paste my small bio soif i go here to my website my about section i have this small bio i will copy it of course you needto write your own bio and then go back here and paste it in this section say save andlet's go back to portfolio and refresh it let's see now what will happen this is the aboutsection this is my name and this is my own bio that's simple now we need to change this thecontact information again go back to template and you'll see them all here you can changethem i don't want to waste your time now editing everything i think the idea is somehow so simplejust read the text save and refresh and everything.
Will be fine i want to show you now anothertip about changing these progress bar as an example you can add your skills here and add thisprogress bar effect to see how much is your skill is like you are professional or maybe a beginneror whatever so i will show you how to edit this one here so let's go back to template and godown and you will see here in this section progress bar area you will see the web designit's 90% if you go here back it's a web design 90% what you are going to do to edit this simplyis let's say you want to make this uh 65% simply go here to progress bar under it and set the widthto 65% that's simple save and see this now will become 65 here refresh and awesome it's 65. sothis is how you can also change the progress bar percentage you can do this on whatever skills youwant you can add more progress bars if you want.
Just by copying this section copy let's say ctrl cand ctrl v in this way and add and add this uh new skill you say like 80% here and 80% here save itnow we'll have a new progress bar refresh you can see the new skill so this is how you can add aprogress bar at a skill in this about me section that simple now you may be wondering how tochange images like this one you want to add your image or my image in my case so how tochange this image let's go back to template and you will see here the avatar you can seeprofile photo and this is the image here you need to change the source image so if you get this linklet's see this copy this url and open your browser enter and this is the image you see so simply youneed to change this image you need to upload an image somewhere on the internet and change theurl here now what's nice is that you can do this.
Inside blogger and upload an image inside theblogger how let's go back to our main menu and go to posts say new post we will not writeanything just click on this image icon and click upload from computer let's waita little bit and now i will choose a file go to my desktop i will select my image here is myimage a sample image and click on select and here we are okay so what is the url of this image justclick on it and you will see now this is the url copy it and let's go and paste it here andthis is the image you see it's somehow small it's okay just copy this url and go again tomy menu here to my theme and then edit html again and i want to go to the section photo iwill search for my name let's go down and here we are and this is again the image just changethis ctrl v save let's go up here and refresh.
And you will see now there's my image it's somehowblurry because it's small resolution it's okay but this is how you can change the image and uploadit to a blogger i think also it's so simple just upload get the url and change the source imageurl inside the template code that's it this is how you can edit the about me section let's go downhere we have the services the idea is the same let's say you want to change this text here goback to template go down go down and you will find the services section you will find here isthe awesome feature and this is the description you can just change this text and save and updatethis services section that's it and as a small note if you want to remove a full section as anexample here is the services section you can just select it this way select it and you can seeservices section and just remove it and save.
And then refresh again and you'll see now we don't havea services section so it's gone let's go back and undo our work and keepthe services section and let's go back and here we are that's it you see please anytimeyou feel there's something unclear you need help anything you want just comment down below andi will try my best to answer all your questions any problem you face just comment it below andi'll try my best to help you so let's go down now we have this counters that gives really anice impression on your portfolio like how many projects you've done how many facebook likes youhave whatever so in the same way you can also just go copy this number 310 go down here and you'llyou'll see the counter section there's 310.
You see completed projects you just editthem also and save i don't want to waste more time on this it's the same concept just editsave and refresh and you'll have the updated theme that's simple here i have a small note aboutthe portfolio you can see here we don't have any post so here you can show your projects whateveryou have you can show here in this section how to do this let's see together simply go backto our dashboard here go back and here you need to create a new post that simple new post and let'ssay now i wanna show a project i did let's say my application i created H-supertools a free digitalmarketing so let's say i created and developed H-supertools.com that's simple andthis is the website H-supertools.com by the way if you don't know H-supertools it's afree platform for seo and digital marketing tools.
You'll find a lot of free tools to help yougrow online so anyway i will open my pc and go to the snipping tool to get a screenshotlet's say this is a screenshot like this and i will save it on my desktop save okay nowlet's go back to my portfolio or my post and i will add an image the same way upload it frommy pc and i will say choose file on my desktop this is the captured image just wait a littlebit so this is one of my projects that i want to show on my portfolio that's it i will sayH-supertools as the name of my post and click on publish so simply you can add your posts likethis your projects your work what you have did before whatever you want to show to users to givethem some trust and to show your work so that's it go back to my portfolio and refresh and youwill see now that H-supertools will be available.
Here in my portfolio this is my work what i do inthis way you can add multiple projects whatever you did before your experiences any project youcreated if you're a developer if you're a graphic designer whatever you did you can add here assimple post and when someone click on read more the post will open and he can read moreabout the project and comment and so on so it's a full portfolio it's a full website foryour work it's very important as a freelancer to have this website whenever you contact someoneyou can send him this portfolio and see your work in this way you give him some trust and youshow him that you are ready to work with him anyway so this is how you can add the portfoliosection i think the idea is somehow simple if you want to change anything else like the address heretelephone just change them inside your template.
Html code in the theme section customize here edithtml and edit whatever you want that's simple and if you have any questions you need any help justcomment below I will be with you almost every day so this is how you can create this awesomeportfolio okay friends so the last point in this video is how to change the domain name you cansee here it's .blogspot.com as a beginner you can go with this free domain it's okay butmaybe one of you may tell me how to change the domain i want to use my own custom domainso now i will show you two options how to get a free domain from some companies and how to mapthis domain okay so simply if you want to change this domain you can go to a website calleddot.tk and search for a name as an example cs91 check availability and you can see we have.tk, .ml, .ga these types of domains are free.
But to be honest with you i don't preferusing such domains they have some low reputation and not so trusted usually hackersand spammers use these domains so don't use them and keep the free blogspot it's better butanyway if you want to go with a domain i will show you now how to map your domain name toblogspot so i will open godaddy let's go to daddy to my domains and i will show you how to mapthe domain to your blogger account so you can access the website the portfoliowith your custom domain that simple and you see here i have a lot of domains so youcan see i have this testing domain here i will test with in this video so let's go back i will goto my blogger dashboard again and go to settings and simply go down here to publishing section youwill saw you will see the custom domain click on.
It and enter it here say www and copy this ctrlc and paste it here that simple click on save now it will tell you that google did not verify theownership of this domain so how you can connect things together how you can point your domainto google so it can verify it it tells you here go to dns settings and enter the following twocnames name www destination this and name this destination this okay so i will copy this onethe first one copy it and open godaddy again click here on manage dns by the way if you areusing something else other than godaddy it's the same concept just open dns management and editthis so here i am in the dns management zone let's wait a little bit and you can see here nowthe cname www i will edit this and just rename with this that was given by blogger save and let'sgo back again to my blogger settings and get the.
Second name the second cname this is one this oneadd cname okay this is the host and just paste the destination here is the destination ctrl c andpaste here and save so simple now just wait like 5 minutes or 10 minutes for things tomigrate then click on save and that's it now check this to direct to this domain and let'scopy this custom domain to here and paste it and great now we opened our portfoliousing our custom domain that's it now my last tip for you it's important also yousee this small icon we call it the fav icon how to change this and replace with your own icon maybeyour face maybe a special icon whatever you want let's go back to blogger settings simply thesettings under the basic section you will find the fav icon click on it and now you canchoose a file to upload and replace with your.
Default fav icon that simple so this ishow you can create this awesome portfolio in blogger for free in less than 20 minutes it'svery important as i told you as a freelancer as a beginner to give some trust andto give some real value to your clients before they get any project from you i hopeyou enjoyed this video please don't forget subscribe like and share this video and spreadknowledge all over the world see you later