- MAKE AN IMAGE A LINK IN BOOTSTRAP STUDIO UPDATE
- MAKE AN IMAGE A LINK IN BOOTSTRAP STUDIO SOFTWARE
- MAKE AN IMAGE A LINK IN BOOTSTRAP STUDIO CODE
- MAKE AN IMAGE A LINK IN BOOTSTRAP STUDIO DOWNLOAD
in the Header section change the class of the image from “img-fluid” to “img-circle”.add the following line in the section:.go to css/freelancer.css and open the file in your editor.Your picture will either be too big or too small so here is a quick fix for that: Refresh the web page in your browser and you should see your picture instead of that rounded one. In my case, it will be “img/myprofilepic.jpg” Source of the picture Add your profile picture In the code, change that ‘src’ path to the name of your picture. In that ‘img’ folder add the picture that you want to add to the website. That ‘img/profile.png’ it’s the path to a picture you have on your computer, in the project directory. Therefore, make sure you don’t put a selfie from a wild party from back in college. You want this page to be seen by clients and people that would be interested in collaborating with you. If you have a Linkedin account, use that profile picture here as well. Let’s change that profile picture to something more meaningful.
MAKE AN IMAGE A LINK IN BOOTSTRAP STUDIO CODE
The header section of the code How the header section looks after updating the codeĮverything looks good so far. If we go back to our web page in the browser and click refresh we should see our name and skills below the rounded picture.
MAKE AN IMAGE A LINK IN BOOTSTRAP STUDIO SOFTWARE
Change the text “Web Developer – Graphic Artist – User Experience Designer” to your skills, in my case “Web Developer – Software Engineer”. I will put my name in there since in a few minutes we are going to change that picture from above the text to a selfie. First, change the name from “Start Bootstrap” to something else.
MAKE AN IMAGE A LINK IN BOOTSTRAP STUDIO UPDATE
Change the text between the tags to the name you want for your portfolio How the navigation bar looks once you update the name The name at the top of the page should change from “Start bootstrap” to the name you’ve set, in my case “Doru Somcutean – Portfolio”. If you refresh the web page in the browser. Let’s just put the same name as the name of the web page: “Doru Somcutean – Portfolio”. The first block of code you can see in the section is the Navigation. This is actually the menu that you can see at the top of the web page in your browser: Code for Navigation bar The navigation bar in the browserĪll you have to change in the code here is the “Start Bootstrap” text between the elements. Let’s move on onto the section of our code. You don’t need to edit anything else in the section. There you can see the name of the web page. You can do that by going to the section of the page, look for the tags. Start by changing the name of the web page from “Freelancer – Start Bootstrap Theme” to your preferred name, in my case “Doru Somcutean – Portfolio”. Just open the index.html file with one of those editors. You don’t have to be an expert in HTML and CSS, all you have got to do is edit the actual text between the tags. You can start editing the HTML code by using any code editor (Notepad++, Sublime Text, WebStorm, Netbeans, Visual Code, etc…). The bootstrap template comes with dummy data inserted already, as you can see on the picture above. Every time you change something in the code, just refresh that page and the changes should appear in the browser. Make sure you open the index.html file in your browser before starting to edit the code. What it’s the main purpose, how should be structured and in our case, since is a personal portfolio: what projects are we going to show to the world. Download file and extract content into your folder Step 4: Decide on the contentīefore starting to work on any code/project it’s really important that you have at least a brief idea of what the project is going to do. Once you have decided on a template just click “Download” and then extract the contents of that. All the bootstrap templates are responsive so all you need to worry about is just putting in the content.
MAKE AN IMAGE A LINK IN BOOTSTRAP STUDIO DOWNLOAD
It’s very easy to start with, taking no more than two minutes to download the template and start editing. I usually tend to use bootstrap templates and designs. Step 1: Create a “Portfolio” folder on your computer. In this post I will be showing you in very simple steps how you can create your own portfolio.