Hello viewers, Today in this video you’ll learn how to create a Fully Responsive Personal Portfolio Website using HTML CSS & JavaScript. A single or one-page website is simply a website that only contains one HTML page. There are no additional pages like about, contact, etc. Nowadays most the peoples prefer single-page website for their personal portfolio or resume. The main benefit of the one-page website is, users can see all the valuable information just by scrolling.
Today you will learn to create a single-page website for your personal presentation. This post will be the best HTML CSS practice for beginners because they can learn the proper use of tags and properties. You use this as your own portfolio website by just changing the matters and links. The best face of this template is a minimal design with fewer codes.
So, Today I am sharing One Page Portfolio Template With HTML CSS Bootstrap. This is an attractive web template for your personal portfolio with responsive design. There I have used bootstrap to create a responsive layout, and have not used other libraries just used a little bit of jQuery for smooth scrolling.
If you are thinking now how this web template actually is, Then you can watch the video below to see all the features.
Before sharing source code, let’s talk about it. As you know I have used Bootstrap for creating responsive layouts easily (get). Most of the works have been done in HTML file, because used special tags for elements like navbar, section, footer, etc. Bootstrap is very easy to use, you just have to place class and ID.
There are fewer line codes of jQuery for smooth scrolling when we click on any item in the navbar then its scrolls to the targeted container. There is some image of the element’s background, I have placed these for good-looking UI. BTW this design is inspired by a post on the dribble. As you can see in the preview there is a verticle timeline for showing experiences.
Now in the CSS File, I have done many works like placing all elements by giving margin and padding, font style, colors, element style, etc. I also have used CSS @media query for reduced font size in the small screen. Talk about extra things: I have used a google font and font-awesome library for icons.
Download Code: Click Here {Google Drive}
Watch Video Tutorial: Click Here {YouTube}
Top comments (2)
Try using github to store the code & host it online to let others see the page, so you can always see a live page online, instead of loading it manually
In Google drive you have to download the files to view the code,
My portfolio might not be as good as yours but I am giving as a example: chittojimuralisreekrishna.github.i...
I really liked your portfolio 👌🏻