if you want to work as a freelancer online it's a must to have a portfolio in this video i will show you step by step in less than 20 minutes how to create an awesome portfolio like this one and boost your freelancing career online stay tuned and follow up with me hi everyone i'm hasan from h-educate and today i'm so excited to publish this new awesome tutorial on how to create a free totally free portfolio website with blogger. com just one question now imagine you are a client and you are asking and contacting a freelancer for a project the first thing you ask is his portfolio his work his experience so it's very nice to have a portfolio a simple link you send to your client and he can see your work and give him some trust before working together so let's start together and build this awesome portfolio in less than 20 minutes but before please don't forget subscribe now to my channel and like the video to get every new update almost every day okay friends so the first step is to have a gmail account i think you already have one so simply open your browser and go to a website called blogger. com this company is by google so you will see this simple screen what you are going to do simply is click on create a blog that simple and now you need to name it i will say now my port my portfolio and click on next and now it will tell you to enter the url the address it's like a domain of your blog now we will go with a free name from blogspot so i will say like my name now and while you are writing it will tell you if this address exists or not so now with tell me it doesn't exist i will say like very nice so this address exists this is my user anything you want write your name here whatever and check if it's available that's simple and click on save now our blog our website will be created so simple now click on view blog to view our website and here is our portfolio the empty website that's simple now the next step is to update or to change the theme of the website okay so let's go back here and then click on theme and simply now click on this small arrow here and click on restore so we can get a custom theme click now on upload and now on my desktop i have this portfolio theme you will find this attached description below just download it and get this theme you'll find this xml file just click on it and now the theme will be restored and updated very nice it now shows a custom modified theme click on this now view blog let's refresh and now let's see this awesome design you see we have this awesome portfolio let's navigate down about me services portfolio get a free code we have a link here we have a contact form so it's a full portfolio website in just one minute now we need just to edit some stuff inside the website and you will be ready to publish it online so let's start you see here hi i am and this is the sample name john smith so you need to change this and replace it with your name what you are going to do is simply just copy this john smith ctrl c copy it and go back to blogger theme options go here and click on edit html that's simple now the html editor will open don't worry you are not going to code anything just ctrl f to find something you see the search bar here and simply here write down joan smith which is this name here and go down you will see it's highlighted automatically what you are going to do simply is change the name so just say in my case my name save it now go to my portfolio website refresh and now hi i am hasan so you can see i changed the name this is how you can edit any text in the website just get the text you want and search for it here and then you can change it now you can see here i am a blogger this effect this really awesome effect i am a creator photographer whatever you want change to add your skills or your domain what you work in so let's go back to template and you will see here data type list under your name just edit those so i will say i am a content creator as an example and a programmer that's simple save it and let's go back and refresh and now you can see i am a content creator it will say now i am an online instructor so whatever you want you can edit them here and you will see that the template will be updated directly i think it's so simple just edit the text inside the code now if you go back we have these social links so it's very important to link to your social media accounts and profiles or whatever you want from this portfolio so how to make these links clickable so if one clicks on facebook facebook profile will open a click on twitter and so on i will show you one example and you can do everything else you can see here the facebook icon let's go back to template if you go here down header social links everything is simple and described you will see here f facebook you just need to replace this hashtag with your facebook profile so i will get my facebook profile i will open facebook let's say my facebook page i will get this profile this link and just paste it here that simple so the url now of facebook of my facebook page is here click on save and let's go back and refresh and now you will notice when you hover over this icon you can open facebook look at the link open it and facebook my facebook page will open now that's simple now you may ask how to make this link open in a new tab and don't open on the same portfolio website in the same tab simply go back here and you can add this just beside this add target is equal to underscore blank that's simple say save and let's go back refresh click on now facebook and you can see it opens another tab in this way you can keep the user on your website or on your portfolio so i think the idea is simple on how to change text and how to change links and so on so let's continue you see this little icon here or button if you click on it it will move automatically to the about me section and the theme automatically creates this menu here to navigate between sections it's really a cool theme you can just create it in only one or two minutes so you see the about me section there's an image there's this name here there's some contact information website skills whatever so i think now you are familiar how to edit the text anyway so let's say you want to add this name here john doe so go back here and simply click inside the template and click on ctrl f or press ctrl f and then search for john doe this name and you will see here we are now in the page content in the personal title john doe this is the about section you see here the about section it's so simple and clear and organized in a way you can directly identify sections so just rename this again i will enter my name and here and here you can see this text here it's a sample text it appears here here you can enter some information about you a small bio as an example or whatever in my case i will just delete this and paste my small bio so if i go here to my website my about section i have this small bio i will copy it of course you need to write your own bio and then go back here and paste it in this section say save and let's go back to portfolio and refresh it let's see now what will happen this is the about section this is my name and this is my own bio that's simple now we need to change this the contact information again go back to template and you'll see them all here you can change them i don't want to waste your time now editing everything i think the idea is somehow so simple just read the text save and refresh and everything will be fine i want to show you now another tip about changing these progress bar as an example you can add your skills here and add this progress bar effect to see how much is your skill is like you are professional or maybe a beginner or whatever so i will show you how to edit this one here so let's go back to template and go down and you will see here in this section progress bar area you will see the web design it's 90% if you go here back it's a web design 90% what you are going to do to edit this simply is let's say you want to make this uh 65% simply go here to progress bar under it and set the width to 65% that's simple save and see this now will become 65 here refresh and awesome it's 65.
so this is how you can also change the progress bar percentage you can do this on whatever skills you want you can add more progress bars if you want just by copying this section copy let's say ctrl c and ctrl v in this way and add and add this uh new skill you say like 80% here and 80% here save it now we'll have a new progress bar refresh you can see the new skill so this is how you can add a progress bar at a skill in this about me section that simple now you may be wondering how to change images like this one you want to add your image or my image in my case so how to change this image let's go back to template and you will see here the avatar you can see profile photo and this is the image here you need to change the source image so if you get this link let's see this copy this url and open your browser enter and this is the image you see so simply you need to change this image you need to upload an image somewhere on the internet and change the url here now what's nice is that you can do this inside blogger and upload an image inside the blogger how let's go back to our main menu and go to posts say new post we will not write anything just click on this image icon and click upload from computer let's wait a little bit and now i will choose a file go to my desktop i will select my image here is my image a sample image and click on select and here we are okay so what is the url of this image just click on it and you will see now this is the url copy it and let's go and paste it here and this is the image you see it's somehow small it's okay just copy this url and go again to my menu here to my theme and then edit html again and i want to go to the section photo i will search for my name let's go down and here we are and this is again the image just change this ctrl v save let's go up here and refresh and you will see now there's my image it's somehow blurry because it's small resolution it's okay but this is how you can change the image and upload it to a blogger i think also it's so simple just upload get the url and change the source image url inside the template code that's it this is how you can edit the about me section let's go down here we have the services the idea is the same let's say you want to change this text here go back to template go down go down and you will find the services section you will find here is the awesome feature and this is the description you can just change this text and save and update this services section that's it and as a small note if you want to remove a full section as an example here is the services section you can just select it this way select it and you can see services section and just remove it and save and then refresh again and you'll see now we don't have a services section so it's gone let's go back and undo our work and keep the services section and let's go back and here we are that's it you see please anytime you feel there's something unclear you need help anything you want just comment down below and i will try my best to answer all your questions any problem you face just comment it below and i'll try my best to help you so let's go down now we have this counters that gives really a nice impression on your portfolio like how many projects you've done how many facebook likes you have whatever so in the same way you can also just go copy this number 310 go down here and you'll you'll see the counter section there's 310 you see completed projects you just edit them also and save i don't want to waste more time on this it's the same concept just edit save and refresh and you'll have the updated theme that's simple here i have a small note about the portfolio you can see here we don't have any post so here you can show your projects whatever you have you can show here in this section how to do this let's see together simply go back to our dashboard here go back and here you need to create a new post that simple new post and let's say now i wanna show a project i did let's say my application i created H-supertools a free digital marketing so let's say i created and developed H-supertools. com that's simple and this is the website H-supertools. com by the way if you don't know H-supertools it's a free platform for seo and digital marketing tools you'll find a lot of free tools to help you grow online so anyway i will open my pc and go to the snipping tool to get a screenshot let's say this is a screenshot like this and i will save it on my desktop save okay now let's go back to my portfolio or my post and i will add an image the same way upload it from my pc and i will say choose file on my desktop this is the captured image just wait a little bit so this is one of my projects that i want to show on my portfolio that's it i will say H-supertools as the name of my post and click on publish so simply you can add your posts like this your projects your work what you have did before whatever you want to show to users to give them some trust and to show your work so that's it go back to my portfolio and refresh and you will see now that H-supertools will be available here in my portfolio this is my work what i do in this way you can add multiple projects whatever you did before your experiences any project you created if you're a developer if you're a graphic designer whatever you did you can add here as simple post and when someone click on read more the post will open and he can read more about the project and comment and so on so it's a full portfolio it's a full website for your work it's very important as a freelancer to have this website whenever you contact someone you can send him this portfolio and see your work in this way you give him some trust and you show him that you are ready to work with him anyway so this is how you can add the portfolio section i think the idea is somehow simple if you want to change anything else like the address here telephone just change them inside your template html code in the theme section customize here edit html and edit whatever you want that's simple and if you have any questions you need any help just comment below I will be with you almost every day so this is how you can create this awesome portfolio okay friends so the last point in this video is how to change the domain name you can see here it's . blogspot.
com as a beginner you can go with this free domain it's okay but maybe one of you may tell me how to change the domain i want to use my own custom domain so now i will show you two options how to get a free domain from some companies and how to map this domain okay so simply if you want to change this domain you can go to a website called dot. 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 prefer using such domains they have some low reputation and not so trusted usually hackers and spammers use these domains so don't use them and keep the free blogspot it's better but anyway if you want to go with a domain i will show you now how to map your domain name to blogspot so i will open godaddy let's go to daddy to my domains and i will show you how to map the domain to your blogger account so you can access the website the portfolio with your custom domain that simple and you see here i have a lot of domains so you can see i have this testing domain here i will test with in this video so let's go back i will go to my blogger dashboard again and go to settings and simply go down here to publishing section you will saw you will see the custom domain click on it and enter it here say www and copy this ctrl c and paste it here that simple click on save now it will tell you that google did not verify the ownership of this domain so how you can connect things together how you can point your domain to google so it can verify it it tells you here go to dns settings and enter the following two cnames name www destination this and name this destination this okay so i will copy this one the first one copy it and open godaddy again click here on manage dns by the way if you are using something else other than godaddy it's the same concept just open dns management and edit this so here i am in the dns management zone let's wait a little bit and you can see here now the cname www i will edit this and just rename with this that was given by blogger save and let's go back again to my blogger settings and get the second name the second cname this is one this one add cname okay this is the host and just paste the destination here is the destination ctrl c and paste here and save so simple now just wait like 5 minutes or 10 minutes for things to migrate then click on save and that's it now check this to direct to this domain and let's copy this custom domain to here and paste it and great now we opened our portfolio using our custom domain that's it now my last tip for you it's important also you see this small icon we call it the fav icon how to change this and replace with your own icon maybe your face maybe a special icon whatever you want let's go back to blogger settings simply the settings under the basic section you will find the fav icon click on it and now you can choose a file to upload and replace with your default fav icon that simple so this is how you can create this awesome portfolio in blogger for free in less than 20 minutes it's very important as i told you as a freelancer as a beginner to give some trust and to give some real value to your clients before they get any project from you i hope you enjoyed this video please don't forget subscribe like and share this video and spread knowledge all over the world see you later
Comments
Post a Comment