business plan

portfolio using html css javascript

  • TechRepublic

Account Information

jsFiddle: An online playground for your JavaScript, HTML, CSS

Share with Your Friends

Your email has been sent

Image of aspatton

jsFiddle lets developers play with the three core elements of Web development. Check out this powerful application for rapid prototyping and testing.

Every developer has been in the situation where you have code or a design that you need to test quickly and possibly share with others. jsFiddle is the perfect solution; it provides a custom environment (based on user selections) to test (or fiddle with) your JavaScript, HTML, and CSS code right inside your browser. A quick tour of jsFiddle will give you a better understanding of what it provides and why you should use it.

The jsFiddle environment

Getting up and running with jsFiddle is as quick as typing its address into your browser. Once the site loads, you are presented with a page divided into various sections. The left portion of the page is the menu area where you configure the jsFiddle environment. The main section of the site (on the right) is divided into four areas:

Figure A shows jsFiddle loaded in Internet Explorer 9 with empty code panes. Figure A

The default interface of the jsFiddle site (Click the image to enlarge.)

Working with the jsfiddle interface.

Putting jsFiddle to use is as simple as loading the site and entering code in the appropriate areas of the page. The jsFiddle interface provides plenty of features to assist in your development. The top of the page includes a line of buttons to use some of these features. These buttons include:

The left pane of the jsFiddle interface allows you to set up the development environment. The following list provides a sample of the available features:

The many features provided by the jsFiddle interface makes it relevant to almost all Web application developers. Figure B shows one of the examples — Delayed Mouse Tracking — which uses the Processing.js library. Additional HTML and CSS has been added. Figure B

Using one of the examples available in jsFiddle (Click the image to enlarge.)

Web playground.

The jsFiddle site brands it as a Web playground, and I can’t think of a better tagline because:

This is a hosted application, so performance can degrade during peak usage. This has not caused problems for me, but hopefully more backend resources (aka servers) will be available as jsFiddle usage increases. The jsFiddle blog allows you to keep up with these issues.

Check out jsFiddle today, and you will quickly see its power for rapid prototyping and testing.

Keep your engineering skills up to date by signing up for TechRepublic’s free Software Engineer newsletter, delivered each Tuesday.

Person using a laptop computer.

Daily Tech Insider Newsletter

Stay up to date on the latest in technology with Daily Tech Insider. We bring you news on industry-leading companies, products, and people, as well as highlighted articles, downloads, and top resources. You’ll receive primers on hot tech topics that will help you stay ahead of the game.

Contact aspatton

Your message has been sent

Editor's Picks

portfolio using html css javascript

TechRepublic Premium editorial calendar: IT policies, checklists, toolkits and research for download

TechRepublic Premium content helps you solve your toughest IT issues and jump-start your career or next project.

An HR team uses HR and Payroll software.

The best human resources payroll software of 2023

With a lot of choices in the market, we have highlighted the top six HR and payroll software options for 2023.

A computer running Windows 11.

Windows 11 update brings Bing Chat into the taskbar

Microsoft's latest Windows 11 allows enterprises to control some of these new features, which also include Notepad, iPhone and Android news.

A software engineer works from home.

Tech jobs: No rush back to the office for software developers as salaries reach $180,000

Salaries for remote roles in software development were higher than location-bound jobs in 2022, Hired finds.

Project management process to manage and develop with resources to deliver quality product, agile development cycle, businessman project manager balance on clock juggling project management elements.

The 10 best agile project management software for 2023

With so many agile project management software tools available, it can be overwhelming to find the best fit for you. We've compiled a list of 10 tools you can use to take advantage of agile within your organization.

A user typing a password.

1Password is looking to a password-free future. Here’s why

With phishing-based credentials theft on the rise, 1Password CPO Steve Won explains why the endgame is to 'eliminate’ passwords entirely.

DNS and DHCP usage policy

Domain Name System and Dynamic Host Configuration Protocol are the foundation of essential network configuration and communication, especially DNS. Internal and external network access could not work as we know it without DNS, and DHCP is invaluable in provisioning temporary IP addresses for workstations and devices to utilize facility connectivity. The purpose of this policy ...

MSP best practices: PC deployment checklist

For managed services providers, deploying new PCs and performing desktop and laptop migrations are common but perilous tasks. The adage “you’re only as good as your last performance” certainly applies. An MSP and its technicians can get everything right, complete a client’s complex cloud migrations, and perform remote work initiatives and proprietary business application upgrades, ...

IT training policy

Successful IT departments are defined not only by the technology they deploy and manage, but by the skills and capabilities of their people. IT workers must keep up to date with the latest technology trends and evolutions, as well as developing soft skills like project management, presentation and persuasion, and general management. Due to the ...

Search icon

Build a JavaScript Loan Calculator With HTML & CSS

portfolio using html css javascript

Too Long; Didn't Read

featured image - Build a JavaScript Loan Calculator With HTML & CSS

@ foolishdeveloper

react to story with heart

Cassandra Forward a free Cassandra-focused community event

RELATED STORIES

Article Thumbnail

How to Create a Portfolio Website Using HTML, CSS, JavaScript, and Bootstrap 5

If you are a web developer or a web designer, it is essential for you to have a portfolio website. It lets you provide information about yourself and showcase your best work with your relevant skills and experience.

In this blog post, I will discuss some of the benefits of creating a portfolio website. Then I'll show you how to create a beautiful responsive portfolio website for yourself using HTML, CSS, JavaScript and Bootstrap version 5.

Table Of Contents

Folder Structure

How to add a navigation menu to your portfolio, how to add a hero header to the portfolio, how to make the about section, how to make the services section, how to add dark background color to navbar on page scroll, how to build the portfolio section, how to build the contact section, how to build the footer section.

Benefits of having a Portfolio Website

Having a portfolio website has several benefits, including:

What is Bootstrap?

Bootstrap is a popular front-end CSS framework which is used to develop responsive and mobile friendly websites. The latest release of Bootstrap is version 5. You can find the official documentation of Bootstrap 5 here .

We will now start working on creating the portfolio website.

First, let's create the folder structure. You can get the project starter files on GitHub . Also, you can visit here to see the live demo of this project.

Screenshot-from-2022-01-22-19-10-25

The folder structure consists of index.html, style.css, and script.js files and an images folder. We'll write all CSS in the style.css file and the JavaScript in the script.js file .

In the index.html file, you can see the HTML boilerplate code with the Bootstrap CDN, font awesome kit , and a link to the external style sheet and JavaScript.

Here, the script.js file is loaded after loading all the HTML code.

Now, let's work on adding a navigation menu in our project. It will help visitors find the relevant info they're looking for.

We will use Bootstrap's fixed-top class in nav element to keep the navbar at the top of the page. The navbar also has a navbar-brand class where we keep the name of the person as a brand.

The navbar has the following features:

You can find more details regarding Bootstrap 5 navbar features here .

However, the navbar has a problem while scrolling. It's fully transparent throughout the page which causes readability issues.  We will fix this issue after we complete the Services section to make you understand the issue properly.

Now, we will be adding a hero image with some text in the center. A hero image is a web design term which refers to a high quality full width image that displays the company or individual's main goals, a representative image, photo, or other eye-catching elements. It helps attract users to your site.

 Also, let's add the CSS for the above code in the style.css file:

Here we can see that the section has an id named bgimage which is responsible for displaying the background hero image with full width. It also displays some text in the center above the background image with the help of the above CSS.

This is how the site looks so far with the navbar and the hero section:

Screenshot-from-2022-01-25-10-13-25

The About page contains important information about you and your background. Visitors to your portfolio site can get to know you through the information you provide in this page.

We will be adding an image to the left side of the row, and on the right side we will add our quick introduction in this section. Let's demonstrate it using the code below:

Let's add some CSS for the left side image:

This will create an about section. You can modify the content based on your use cases. We have added classes named mt-4 and pt-4 with container class which will set the margin top and padding top to 1.5 rem.

The row has two columns. One has the col-lg-4 class for displaying the image which will occupy the left column with a 4-part grid for large screens.

The next column is assigned a class of col-lg-8 which will occupy the right column with an 8-part grid for larger screens. For medium and small screens they will overlap with each other which we can see in the below GIF file:

This section helps convert website visitors into potential clients. This is where you explain what specific services you offer, and where you niche down your offered services.

Let's add the code for this section and describe it below:

Since this website is targeted towards web developers and designers, I've included some of the services which a web developer or designer might offer.

We have used bootstrap cards to display services. Our services section has 2 rows and 3 columns each. For large screens with a width greater than or equal to 992px, three cards are displayed in a row. For screens less than 992px wide, only a single card is displayed in a row.

You can find more about bootstrap breakpoints here .

Also, there are fonts added in each card to make them look better.

Without CSS, the services section would look like this :

Screenshot-from-2022-01-23-14-01-00

So, let's add some CSS to increase the font icon font size and card height and add some extra color when a user hovers over a card.

This is how our services section looks now:

If you look into the above gif properly you will see that the navbar is transparent throughout the page which causes readability issues. So let's work on fixing this issue.

We will write some JavaScript and CSS in order to resolve this problem. We will add a navbarDark class in order to show a dark background color for the navbar on page scroll.

For that we need to go to the script.js file and add the following code:

Now, let's break down the above code:

Let's quickly add CSS for the navbarDark class. For that, go to your style.css file and add the following code:

This is how the navbar will look now:

This section includes your best work. People can see what you are capable of doing, and showcasing strong past work will definitely attract more potential clients or recruiters. So only add your best work in this section.

We will use Bootstrap cards to display the portfolio projects. There will be 2 rows and each row will have 3 columns of cards.

This will be the code for portfolio section:

Each card has an image, title, description, and link to the projects. Three cards are displayed in a row for large screens which have breakpoints of ≥ 992px wide, but for screens < 992px wide only a single card is displayed in a row.

The GIF below shows how the portfolio section looks now:

You should include your contact information in this section so that visitors can contact you if they want to hire you.

Our contact section will include 2 columns in a single row: Google maps for location and a contact form.

In order to embed the Google map, you need to follow these steps:

Our code will look like this with the contact form included:

The first column will display the Google map and the next one will display the contact form.

The form has four different form fields: name, email, subject and project details. The form doesn't submit the request itself. You will need to connect it with any back-end language. Or, you can simply use Netlify Form or Formspree form for this.

This is how the contact section will appear:

Screenshot-from-2022-01-25-11-31-56

Now we have come to the last section of this post, which is the footer section. We have already added a link to the font awesome CDN in the index.html file.

In the Footer, we will add links to our social media through font awesome icons.

Without the CSS, our footer will look like this:

Screenshot-from-2022-01-23-17-56-37

So let's add some styling to the footer with this code:

The icons are now displayed in the center with a hover effect which we can see in the below GIF file.

Final Touches

In order to add some spacing between all the sections, let's add some more styling:

Now we're done making our complete portfolio website.

You can find the full source code of this project here .

This is how you can create a complete responsive portfolio website using HTML, CSS, JavaScript, and Bootstrap 5 .

In this blog post we saw some of the benefits of creating a portfolio website for web developers and designers. We divided the whole website into different sections and discussed each one individually as we built it.

You can customize this website based on your own use cases.

I hope you found this post useful.

Happy Coding!

You can find me on Twitter for daily content regarding Web development.

Software Engineer with a passion for writing articles.

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

DEV Community

DEV Community

Cover image for 🔥🤯 Amazing Portfolio website using HTML, CSS and JS.

Posted on Dec 16, 2021

🔥🤯 Amazing Portfolio website using HTML, CSS and JS.

If you are a beginner or a pro. This blog is for everyone who want to make his/her portfolio an outstanding one. In this tutorial, you’ll learn to create your own modern looking portfolio website using HTML, CSS and JS. In the article, you’ll learn to create smooth transition on navigations, you’ll create CSS timeline to showcase your education and experience, you’ll make a separate section for your project with a cool hover effect. You must make this portfolio to impress your recruiter.

So, without wasting more time, let's start. To see project demo or for better understanding of code, you can watch the tutorial below.

Video Tutorial

I appreciate if you can support me by subscribing my youtube channel.

Source Code

So, let's start by making navbar for the site. But before that you should know our files and folders.

Portfolio Website - Folder Structure

You can download the images here .

So let's start, to create navbar first write the HTML basic template and link style.css and app.js file to index.html file. After done with all of this. Create navbar.

Okay we are done with HTMl, so add some style to it also.

After done with this, you'll probably see something like this.

Portfolio Website - Navbar

Okay, so with that we are done with navbar. So let's move on to our home section

home section

To create home section code this HTML structure after navbar element.

And give it some styles.

If you see the above code, you'll see position: relative and top: 0 under .home-section . These properties are important while navigation, cause how will our navigation work is little complex. All of our sections (home, project, about, contact) all of these will have position: fixed because of this, all sections will be on top of each other. And we'll use active class to indicate the active section. Using active class we'll set section's position's to relative along with its opacity to 1. This is how our navigation will work. Isn't is complicated ??

Output

So, once you are done with home section make sure you change its position to fixed from relative.

Then make active class styles.

You can see I have added each and every section here in order to make smooth navigation.

Project section

Now, let's make project section. For that code this HTML.

Also style it.

In the above code, I have already added fixed position to project-section and defined its opacity to 0. But for you in order to see the output. make sure you add active class in project-section like this.

Output [ With hover effect ]

Project section

Before going forward, let's make the navigation system first. For that code this inside app.js file.

In the above code, first I am selecting all the links and sections. After that, I defined activeLink this variable will track the current active section or link. After that, I used forEach method to loop through all the links. Inside that I am access individual link and its index.

Inside it first, I am adding click event to link using addEventListener . Then I used a simple condition to make sure user is not clicking on the active link. After that, I am removing the active class from the current active link using classList.remove and adding active class to the clicked link using classList.add . I am doing the same to remove the active class from the active section.

Once done with that, I am using setTimeout to add a 1s delay in executing the below codes. Inside the timeout, it is just simply adding the active class again.

You might see the navigation as a very easy one, but it was the second hardest thing to make in this project😅

About section.

Now, let's create the about section. Honestly, my favourite section in this entire website is this about section. Our about section has everything, it has skills section, and also a education timeline.

To create about section, code this after project section .

And style it.

Again you might not see anything, make sure to add active class to about-section and remove it from all other sections.

about section

So, now shall we create the skills section ? Well in our skills section I do not have any skill progress bar which is I think is most used thing in the portfolio. But I think its the worst thing to have. I somewhere read on internet that the progress bar might look awesome to you, but let say it know python 90% and you add it to your website saying, you know 90% of python. There is a change that your client think you know 90% python so maybe you don't know the advance topic although you know the advance topics too. So its create a confusion. Well its just a preference. Anyway, let's make the skills section.

Code the above code under about-section element and style them.

Skill section

And now the hardest thing, CSS timeline. It was little hard for me to make at first, but I tried my best not to use lot of code to achieve the goal.

Make sure to add these codes inside about-section also.

timeline

Contact section

Anddddddd, the last part contact section. Let's create this also.

By the way, the above iframe code is the google map embed link. You can get it using google map.

Contact section

So, that's it. Great work guys. We are done with the portfolio.

I hope you understood each and everything. If you have doubt or I missed something let me know in the comments.

Articles you may find Useful

I really appreciate if you can subscribe my youtube channel. I create awesome web contents.

portfolio using html css javascript

Source Code Thanks for reading

Top comments (37)

pic

Templates let you quickly answer FAQs or store snippets for re-use.

ravavyr profile image

As with any tutorial, i feel the focus here is on "pretty" and "components". Where is the part about the DOCTYPE? The viewport tag? The Meta tags for SEO? What about responsiveness? What about accessibility?

I see none of that in the above.

themodernweb profile image

Oh! Sry. I'll make sure to add that from onwards. Thanks for suggession.

xr0master profile image

I can suggest that you use EmailJS for your contact form, so that your site is not only beautiful but also really works.

trulyprogrammer profile image

Truly, none of his projects are responsive. They're only good looking and functional.

goldfinger profile image

Also, please add, semantic HTML to the list. The tutorial doesn't properly use HTML and heading tags.

cmuralisree profile image

Can you try showing the live demo using codepen for general html, css, js, and codesandbox for react or angular ...., Because everyone won't have enough time to go through with the videos or with the source code,

And if you have a live demo then it will be easy for others to understand how the page works, and the styling and stuff,

These were up to my perspective, i might be wrong.

organizedfellow profile image

I think the Author has done "enough" by providing the source code above! You also want them to create a codepen AND codesandbox?

whats wrong in sharing a live demo mr.aleman ?

Everyone can't understand the functionality or styling of a page by just looking at the source code or photos, until unless they experience it,

And I have already mentioned those were upto my perspective, so i guess we are clear about this.

All the code is there, so, easily, You can copy & Paste into Codepen - shouldn't be a problem. I already made a Codepen of my own, using the above code. Looks nice.

matrixcode

(if the code doesn't make sense to you - perhaps you are in the wrong community)

Perhaps, you should learn English first and then you can comment on others, i have already mentioned it twice it's upto my perspective,

Yeah i know this isn't a stack overflow to just keep looking at the code, so stop giving funny comments,

i guess you have enough time to create pens or keep arguing for pointless statements, then congrats,

But i don't have enough time to keep arguing about this, so i will end here, if you want you can prolong

😉 Okay, Buddy.

It's not enough, the page has to be responsive.

vinaymayavanshi13 profile image

Amazing🔥🔥🔥,but in skill sections remove those percentages😅.Many recruiters have suggested not to put such percentages as how can a candidate knows that he has X% of knowledge with a particular language.Many recruiters gets annoyed by this.

Yeah Sure Its a common mistake. I made that in design but also mentioned in my video tutorial that why is this bad idea to put percentage in skill section. Thanks 👍

jerrykay profile image

You have reason.

geekygaurab profile image

Yup! And because of that, I have replaced the percentage number with a ✔ (to mark checked/completed).

ricobrase profile image

Well, isn't that some kind of redundant information then?

You (hopefully) wouldn't list skills, you don't have in your CV, would you? Therefore everything you mention should have a checkmark. And if everything has it, it's somewhat redundant. 😄

Yes, you are right!

That's why, I have just put the logos (coloured ones looked better than black and white ones) in the skills section and removed the percent scores and checks as well.

ashleyjsheridan profile image

One thing I do on mine is to list my skill level in a thing as either Great, Good, Fair, or Basic. That way, it gives across what I want to convey, but is less rigid than something like a percent score in a skill.

A score of 100% in a skill is effectively impossible, and if 100% is impossible to achive, it means that the other values have no meaning, because they can never be accurate.

abdullmng profile image

Great one, please create another tutorial to add responsiveness. Looking forward to it

michaelrodr profile image

Hello, thanks for sharing, I see the design theme very well focused, it is true that for those who are starting it is a good base, the adaptability to different devices (responsive design) must also be taken into account.

averysinar profile image

I made an account here just to be able to say how much of a lifesaver this guide is. Can't manage to get the links to work but that's fine by me, this gave me an incredibly professional looking template that I could adapt to my own portfolio. Thank you so much, and keep up the great work.

sofiirodriguezc profile image

Excelent! Thank you for this tutorial, it helped me to understand better HTML, css and js

I am glad you liked it ❤️

robsonmuniz16 profile image

Great Article, thanks for sharing it!

leeuw profile image

ten_code_10 profile image

I recently made a basic portfolio, it is clear that it has nothing to do with yours in terms of design. But you help me to improve it. Thanks!

Great! I hope you make it more amazing than mine. 👍

felix715 profile image

Pretty job ...but try to ensure the site is functional

I'll make sure of that. Thanks

joset98 profile image

hey dude thanks, you're crack

I know the images can be fetched from the google drive link. But say I want a C language logo in the same format to be used in the website, where and how can I get that?

you can download the C logo from google and then turn it into black and white with any photo editor

cosminp9 profile image

Navigation system for navbar? Really? Stop!

Hmm! Its just made for fun and UX practice

The projects section and about section is visible only when I make a change in the code and fades away after a second. Please 🙏🏻 help.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

11 Tips That Make You a Better Typescript Programmer

typescript

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

Read the whole post now!

vincod profile image

How to Run Emulator Outside Android Studio

Odipo Otieno - Feb 4

rasaf_ibrahim profile image

Ditching useState and useReducer: Why useImmer is the better option

Rasaf Ibrahim - Feb 25

stakedesigner profile image

6 CSS Features to Make a Responsive Website

StakeDesigner - Mar 1

vulcanwm profile image

Skill section or not?

Medea - Feb 24

Once suspended, themodernweb will not be able to comment or publish posts until their suspension is removed.

Once unsuspended, themodernweb will be able to comment and publish posts again.

Once unpublished, all posts by themodernweb will become hidden and only accessible to themselves.

If themodernweb is not suspended, they can still re-publish their posts from their dashboard.

Once unpublished, this post will become invisible to the public and only accessible to Modern Web.

They can still re-publish the post if they are not suspended.

Thanks for keeping DEV Community safe. Here is what you can do to flag themodernweb:

themodernweb consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy.

Unflagging themodernweb will restore default visibility to their posts.

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

How to create a portfolio

The portfolio is essential to get noticed.

Creating a portfolio is a good way of growing your online presence.

The portfolio is used to showcase your skills and projects.

It can help you to get a job, freelancer gig, or, internship.

What is a portfolio

The portfolio can have the same purpose as a CV. Most CVs are written with text, while the portfolio is for showcasing, so it is visual with images and often more detailed than the CV.

It is a place where you can show your work experience and showcase the projects that you are most proud of.

Your online portfolio can be shared with its link to companies, hiring managers, and recruiters, so that they can notice you.

It is about showing and giving others an understanding of who you are as a professional.

Why create a portfolio

It is a great way of growing your online presence and get noticed.

It can be used to get a job or to attract clients to your services.

Having it online as a website. Makes it possible for people all over the world to find you.

The design of the porfolio will give the reader an impression of who you are. Make sure that it appears in a good and presentable way!

Who is a portfolio for

Creating a portfolio can be important for your career.

It can be helpful when searching for a job, a freelancing gig, or showcasing your skills towards a new client.

Ever heard about W3Schools Spaces ? Here you can create your portfolio from scratch or use a template.

* no credit card required

What are the most important sections in a portfolio

There are many different ways of creating a portfolio.

How to create it depends on what type of professional you are, who you are building it for, and why you are creating it.

You have to test, fail and learn to find out which type of portfolio that is right for you!

There are some sections which is essential for all types of portfolios, summarized below:

1. Hero section.

The hero section is the first thing people see when they enter your portfolio.

It is displayed under your logo and menu.

The hero section helps the reader to understand what you offer, why someone should work with you, and the value that you provide with your services.

It often contains a call to action button like "contact me", "book a meeting" or similar.

hero section

2. About me section.

Give the reader a short summary about yourself.

Include subjects such as your education, work experience, projects and interests.

Help the reader to understand what you are passionate about and your superpowers (the things that you are really good at).

Remember to keep it short and simple.

about section

3. Projects section.

List the projects that you have worked on. The most used way is to order the list by date, but in some cases it can make sense to order them in another logical way.

Add details to each project, which includes your role, what you did, and, how the project turned out.

Adding pictures to showcase what you built is a plus! Showcase the things that you are proud of.

work experience section

4. Contact me section.

Let the reader know how and where they can get in touch with you.

Add your contact details and other contact channels such as your GitHub profile, LinkedIn, Youtube and so on.

contact me section

Portfolio examples

Check out some portfolio examples.

You can load the portfolio templates in W3Schools Spaces . Get started with publishing your portfolio in a few clicks.

Black & White Portfolio Template

Black and White Portfolio Template

Dark Portfolio Template

Dark Icon Bar Template

People Portfolio

Dark Icon Bar Template

My Portfolio Template

Dark Icon Bar Template

What do I need to know to create my own portfolio?

HTML, CSS and JavaScript are the foundational languages to create a website.

You can come a long way just using these three!

Advertisement

How to create a portfolio step-by-step

Follow the steps to create your portfolio from the ground up.

Preparations

Decide which code editor to use and set up your environment.

W3Schools has created an easy to use code editor called W3Schools Spaces . Sign up and get started in a few clicks.

Create your index.html file. So that you are ready to enter the code.

All set up. Lets go!

Step One: Add HTML Skeleton

Type an HTML skeleton code, which is the starting point for your website. It is the structure which holds the code and ensures that it is properly displayed on the internet.

Read here for how to create a basic HTML Skeleton: How to create a HTML Skeleton

Step Two: Add Navigation Bar

The navigation bar is a short representation of the content on the website.

It is one of the first things that a visitor will see.

It helps the visitors to find and navigate through the content on website. It is important to create well-structured navigation. So that your visitors can find what they are looking for.

Here is an example of how to create a top navigation bar: How to create a Top Navigation Bar

Step Three: Add Hero section

The Hero section, together with the navigation bar, is the first section of your portfolio that people will see.

It should contain short information about several things such as:

Write in first-person and keep it short and simple .

Additional things preferred in the hero section are:

Here is an example on how to create a Hero section: How to create a Hero image

Step Four: Add About Me section

In this section, you can get creative. This can help you to to stand out.

Here you can personalize the content and write about yourself more in-depth.

The content you can include in this section is:

In a way, you can consider the "About me" section as a short summary of your CV.

Feel free to write about yourself in first person.

Personalization and making people understand you as a person might bring you more attention.

Here is an example on how to create an about me section: How to create an About Me section

Step Five: Add Work Experience section

The work experience section highlights the experience, knowledge, and competence that you have made along your way.

Here you can add:

Step Six: Add Contact section

The contact section is the section that lets your visitor get in touch with you.

You should always include a way for visitors to contact you, either through a contact form or by writing down your contact information such as:

Here is an example on how to create a basic contact section: How to create a Contact section

Step Seven: Add Footer section

The footer can be experienced as a minor section, but it is an important one of every website.

It is about showing critical information based on your website goals and the needs of your visitors.

Often it contains technical information about copyright, but it can hold other information, such as:

Here is an example on how to build a footer section: How to create a Footer section

W3Schools Spaces

Build and publish your own portfolio with w3schools spaces..

portfolio using html css javascript

COLOR PICKER

colorpicker

Get your certification today!

portfolio using html css javascript

Get certified by completing a course today!

Subscribe

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

[email protected]

Your Suggestion:

Thank you for helping us.

Your message has been sent to W3Schools.

Top Tutorials

Top references, top examples, web certificates, get certified.

You are currently viewing Portfolio Website Using HTML ,CSS ,Bootstrap and JavaScript

Portfolio Website Using HTML ,CSS ,Bootstrap and JavaScript

Telegram Group Join Now

Hello Coders👨‍💻!! In this article, we will see how we can create a Personal Portfolio Website using HTML, CSS, Bootstrap, And JavaScript. Personal portfolio sites must be consistent and maintained throughout your career. It provides a convenient way for potential clients to view your work while also allowing you to expand on your skills, experiences, and services.

This site [Personal Portfolio] has four sections on one page: Home, Portfolio, About, and Contact, and each section is attractive and eye-catching.

A portfolio can be thought of as a digital resume that showcases the user’s talent to the client. A portfolio is a website that developers use to showcase their skills in the market so that they can be hired based on their skill set.

ADVERTISEMENT

50+ HTML, CSS & JavaScript Projects With Source Code

Let’s take a look at our portfolio project

Portfolio Using HTML ,CSS and Javascript Source Code

This portfolio is fully responsive, and anyone can view it using any device, whether it is a mobile phone, tablet, or desktop.This article will teach us how to create this website using HTML, CSS, Bootstrap, and a little JavaScript. You will learn about the CSS and JavaScript frameworks (Boostrap and Jquery) in this project, which will help you build a faster and more responsive website.

Build your Own Tip Calculator in HTML, CSS, JAVASCRIPT

We will be discussing our project step by step :

Step1: To begin with , we will import our bootstrap from the official bootstrap website using the import link into the head section of our HTML.

Step2:  We’ll start with our portfolio’s header and work our way down to the portfolio navbar. To use Bootstrap in our navbar, we will use the Bootstrap class that has already been defined in our HTML elements. If you want to learn more about how we can add the navbar bootstrap class, please visit the bootstrap navbar docs.

Restaurant Website Using HTML and CSS

Step3: Now we’ll add our hero section, where we’ll write the introduction to our website. First, we’ll add a heading and a paragraph with the HTML tag, followed by the background image with CSS and the Font Awesome icon with with <a> tag . Using Bootstrap, we will make the h1 and paragraph tags responsive.

Portfolio Using HTML ,CSS and Javascript Source Code

Step4 :  We will add a portfolio section which we contain our skills and porject section if you have any skills or any project you can add them in this particular section . Here we will add our project in form of card using bootstrap . We have added a grid system in which we will add 3 column in a row which are responsive if the screen size increase the number of colum increase or decrease accordingly.

If you want to learn more about the grid system and card  in bootstrap, click on the link below.

Grid System   Card

Portfolio Using HTML ,CSS and Javascript Source Code

Step5: Now we’ll make the “about” section. The H1 tag will be used to create the heading of our “about” section.

Ecommerce Website Using Html Css And Javascript Source Code

In this about section, we will use bootstrap grid system to create two columns; one column will contain the display picture, and the second will contain some about me content.

Portfolio Using HTML ,CSS and Javascript Source Code

Step6: Now we’ll add the final section to our portfolio, in which we’ll first use the fontawesome icon to add social links like Instagram, Github, and so on, and then we’ll simply embed the map by setting up your location in Google Maps and then embedding in our portfolio. Finally, we’ll include an email icon with a link to our email address so that anyone who clicks on it can contact us.

Portfolio Using HTML ,CSS and Javascript Source Code

Step7:  In this step we wil ad some functionality or animation to our portfolio using jquery which is a javascript framework . The main use of this framework is to decrease the length of our code. Here in this we have added a function to our navbar in which we will add the click function in which we have created a toggle function to add or remove the active class.

Responsive Navbar With Hamburger Menu Using HTML and CSS

Final Output Of Portfolio Using HTML ,CSS and Javascript :

Live preview of portfolio using html ,css and javascript.

5+ HTML CSS project With Source Code

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

You Might Also Like

Read more about the article Create Dictionary App Using HTML , CSS & Javascript

Create Dictionary App Using HTML , CSS & Javascript

Read more about the article Create Responsive Dropdown Menu Html Css Flexbox(Source Code)

Create Responsive Dropdown Menu Html Css Flexbox(Source Code)

Read more about the article Create Responsive Card Layout Using HTML and CSS

Create Responsive Card Layout Using HTML and CSS

Leave a reply cancel reply.

Save my name, email, and website in this browser for the next time I comment.

Quick Intro!!

Thanks 🙏 for visiting Codewithrandom! Join telegram (link available -Scroll Up) for source code files , pdf and ANY Promotion queries 👇 [email protected]

Subscribe Now

Don’t miss our future updates! Get Subscribed Today!

Designed & Maintained By Sahitya Porwal 🔥

Thanks for visiting codewithrandom.

CodingNepal

Responsive Personal Portfolio Website using HTML CSS & JavaScript

Responsive Personal Portfolio Website using HTML CSS & JavaScript

Hello readers, Today in this blog you’ll learn how to create a Fully Responsive Personal Portfolio Website using HTML CSS & JavaScript. I already shared many blogs on web design stuff like [Navigation Bar, Cards, Image Slider, Owl Carousel, Buttons, and many more] but still, I haven’t created a full website and now it’s time to create a portfolio website.

Personal portfolio sites are consistent that need to be taken care of throughout your work. It gives a convenient way for potential clients to view your work while also letting you expand on your skills/experiences and services.

On this site [Personal Portfolio], there are six sections on one page – Home, About, Services, Skills, Teams, and Contact, and each section is attractive and eye-catching. On the home page of this site, on the top, there is a sticky navigation bar with a logo on the left side and some navigation links are on the right side.

On the left side of the home page, there are texts which are about the author’s name, profession, and a button labeled “Hire me” as you can see in the image.

Video Tutorial of Responsive Personal Portfolio Website

  In the video, you’ve seen the Responsive One Page Personal Portfolio Website and I hope you’ve understood the little bit codes of this design. I tried my best to make this video understandable for all viewers and I’ve shown each line output in the video. If this video is a little helpful for you, don’t forget to like it and leave a comment.

If you like this portfolio and want to get the source codes of this tutorial, I have provided all the codes of this program below and I’ve also provided the download link of this program where you can easily download the source files of this program.

You can use this portfolio with your creative customization and can take this portfolio to the next level with your creativity.

You might like this:

Responsive Personal Portfolio Website [Source Codes]

To create this website (Personal Portfolio Website), you need to create three Files: HTML File, CSS File, and JavaScript File. After creating these files just paste the following codes into your file.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension and the images that are used on this website won’t appear. You’ve to download files from the given download button to use images also.

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.

That’s all, now you’ve successfully created a Responsive Personal Portfolio Website using HTML CSS & JavaScript. If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

If you face any problem during downloading or after downloading the source code files then feel free to comment down or contact us through the contact page.

RELATED ARTICLES MORE FROM AUTHOR

Create a toast notification in html css & javascript, facebook post box clone in html css & javascript, login form validation in html css & javascript, 226 comments.

Amazing …

js file error plz provide correnct

Note: I've commented some lines of code because I got multiple errors in codes while uploading this post. So I recommend you download the source code files from the above link instead of copying codes. But If you're going to copy codes then uncomment the commented lines after pasting the following codes.

Thank you for all tutorial. They were very effective.

You're welcome…Keep visiting!

I found a bug! If I try the contact and I press the t or s letters then I can't knock them down.

No there is no js codes have written to restricted these keys. Please download files instead of copying.

Thank you So much bro

You're welcome bro 🙂

Great design

bro u are lagend thanks bro

You're welcome bro…Keep visiting!

I am from Bangladesh, thank you very much, brother, I love your country very much and I pray that you will not forget what you have done for us, may Allah bless you.

Thank you bro

Hi there, can i used this source for my portfolio can i edit this and used it? [email protected] DM

Yes you can use!

You're welcome 🙂

nice design

it is free for use?

thanks bro love u from india i usualy visit your website every day for free sourcecode thanks bro keep making videos like this

nevermind I found it… thanks

hi, what size is the background image in the home section? My about section the line is showing up in my home section above the about me title. I don't know why.

can I use the template commercially without credit or attribution?

proud of you

Thank you 🙂

is it possible to send the correct files to [email protected] ?

Download all files from the above download link.

can you make chat app next?

Sure and I've also uploaded a blog about how to create Chatbot using PHP.

sir,what do you useing app for code ?

Great Bro. Very Helpfull.

Thank you very much !

awesome design

Thank you very much

How I wished i cld be with u guyz'i may be kidding to others buh u guyz re d best

no errors found in js file.but it is not working menu-btn and other js file things.can you please help.

Read the blog carefully.

Can you attaached website zip file. Please! That wiil be very kind of you. Thnkas

Yes there is ZIP file of this website. Please download from the above link.

Please download files, there you get codes with all images which are used in this website.

do you have documentation of this website??

thankyou so much sir

js not working

Download files instead of copying codes.

You're welcome

No, you can watch video tutorial of this website for understanding the codes.

Thank you very helpful! Keep it up. May God Bless you!

I'm web developper. U do the good Job. May i use for my web site?

Yes but don't forget to view our FAQ's.

I can use this source on my website? I love your design and wish use in my portfolio web, hi from Brazil!

Amazing Design

You're the best for doing what you do

Can i get banner images??

Yes you download from above link.

Hye! Thank you so much to provide the code. Can i know your name?

Video tutorial me music ke jagah bolte to aur achchha hota.

Yes bro but I'll try to add my voice in my upcoming videos.

Can y please attached the image and the whole zip file with everyhting in it Include Images Files

Above there big a big button labeled as "Download code files", just click on that button and you'll redirect to another page. In that page, there is timer and you've to just wait. Once timer completed, the zip file automatically download.

I want to practice your website, but I do not have the images used on your website. What if you would benefit from the images?

thanks dude

Can you please create a same contact form for me so when people contact me i get an email. Please create the same css contact but add my email to it so when people email me i get an email.

My Email is [email protected]

Please send me the zip file of the whole website include the contact for Thanks

Sorry for that

You can download all images and code files from the above download button.

I want to know how to make image so better for use in website like in this website you use a boy with no background

what should i alter or edit in code so the message goes to my gmail. plz help. thanks a bunch for providing this great theme for free. mail me at: [email protected]

you are awesome

For that we need backend languages…please check our PHP videos or blogs.

You've to learn Photoshop and I didn't edit this image..I've used non copyright image.

Awesome tutorials are great

Hi Bro awsome design i love it i am making a portfolio website can i use it and add my own changes

I can't find images and background image here. Can you help me out ?

I take 2 weeks to do this Portfolio website I got many new things when while typing coding this website vvvv nice sir and i have question can upload this website ? No copright issues ? Licence?

Yes no copyright issues.

Yes you can

Just click on this link the download button above.

can you its backend

wow thank you, you are great!!! I modified a little bit, just changed the "my team" section to "my works". And now i'm trying to add a modal popup to images so when I click on photo this make bigger :). Hope I succes 😛

Here is the blog – https://www.codingnepalweb.com/2021/01/responsive-image-lightbox-using-javascript.html

No it's only frontend design

unzip and service icons are not visible in google chrome

Is it possible to implement this on google sites?

Sorry I do not know about google sites

unzip means??

Can you please, provide the script sites and icons. Because they are not showing. The site you provided was not working. What can i do?

I have pinned a comment. Please read the first comment of this video to get a solution.

how i recive message on send message

Read this blog – https://www.codingnepalweb.com/2020/09/how-to-send-email-with-php-from-localhost.html

thanks for ur tutorial 🙂

You are awesome Bro, Bro show us the way to become like you

It's all about learning bro

You're most welcome

It was really nice one

Failed while inserting data into database! i am geatting this error

Wow ! it really works and there are no virus in the file.

Thanks so much sir for this piece of work. It has help me a lot and i appreciate that. The Lord bless you.

You are awesome Bro Thank you So much

thank you so much

Can I use this in my own website?

Code file has expired. It’s not downloading

I have a problem to those sticky class and youtuber to blogger animation.

I already downlaod you're work(source code) and same thing happen sticky class not work also the animation.

Do u use any element that imternet (cause i dont have) needid?

I'm just working on plain note++ and run in to chrome

Hi sir please notice me, i have a problem with the sticky class also with the animation of Blogger Youtuber parag. I already download the source code and run it. The result is same even in you're work.

I'm just working on plain note++.

Now my question is do u use any elements that nid a internet(cause i don't have) to run those feature?

Thank you sir.

It’s very trouƄle-free to find out any topic on net as compared to textbooks, as I found this piece of writing at this website.

Hi mate. I know that you’ve stated many times, that there’ll be no copyright issues linked to using your design and your code and modifying it to suit one’s own needs. But does this count for business use as well? I’d use it and modify it to create a website for my local language school. Is that good with you? Thanks in advance.

Yes, it’s free without any limitation.

How do you get them to send me email?

I didn’t understandnd

contact form its not work 🙁 i use work backend

Did you configure your XAMPP??

Welcome bro

Hey Bro, I just want to ask can I change the credits like Created By Coding Nepal can I change it to my name or my company name?

Yes, you can change it. No issue!

no idea why index file had a php file extension…??? i changed it to html and the website seems to function normally…

I think you didn’t read the blog properly. Please read the blog carefully!

there’s an error everytime i try downloading the source code, the tab crashes for some reason

You can try open this page on incognito mode or send us screenshot link but make sure you’ve disabled your AdBlocker on our site.

bro can you help me out i want to make a website for study material so that all the students in our institute can download notes from there and I can upload notes if yes plz let me know that will be a great help and greatly appreciated man

Hello if you want to make a functional and dynamic website then backend languages are required for it.

Nice work…Really loved it.

Thank you so much

how to download the source code?

Amazing …, Teng’s

Sir please make a video on how to make a e-commerce website.

Okay, I’ll think about it.

Nice work bro keep it up!

Thanks bro. Keep visiting.

Nice work…Really loved it.

Thank you so much.

Sir, How Can I Get Messages to my email from the contact page?

If you have basic knowledge of PHP then here is the blog on Working Contact Form in PHP and you can easily add it inside this portfolio.

This is great job, a lot of fun stuff happening here and one can learn a lot, though there is one major flaw with this portfolio. It doesn’t have any section to show projects, which portfolio is all about anyway. I guess I can turn that “people I work with” into the “projects”, but it would be more fun to have you add that section because you have the whole idea what kind of style would it fit here. Anyway, a lot of this could be used so it doesn’t hurt me to learn a bit and code a section myself, but a lot is happening here that I don’t understand, so it will be harder to catch everything that happens. Cheers.

Thank you so much and you can easily customize this portfolio and add your required sections. I assumed you know basic HTML & CSS.

i can not download code file can you please help me with that

Make sure you’ve disabled your AdBlocker for this site.

Hey while running the file on local sever it works well whatever changes i have made it shows there but while publishing it online in nishantnayak.com.npi cannot see my changes like i updated profile i update skill section.

When you upload your files to the server and, do some changes in the files then, it won’t immediately reflect on your site because of the site cache. You can clear the cache or try to open the site in the incognito window.

Hello CodingNepal, this is an awesome template ! How to get the contact form to work? Regards

Here is a blog for it – https://www.codingnepalweb.com/create-working-contact-form-in-php/

i am a ke bad nahi chal rhi h website

Make sure you’re connected to the Internet

Great work. It helped me a lot to learn some good frontend design in such a fast, easier and effective way. Thanks

lmfao can i use it?

Yes, you can use it.

Sir,Do you have the backend part

No, if you want make this contact form working. Here is the blog of it – https://www.codingnepalweb.com/create-working-contact-form-in-php/

Bro your so help full congraturations

Happy to help you

Pretty good

Very Good , Thank you

Script.js file not working

Make sure you’re connected to the Internet.

pls how can i get this online

Can I use this all for free… no issues for copyright

Yes, you can use it and there will be no copyright issues.

Hello! Can i use this portfio for my purposes but with some corrections?

It’s too good and useful

Happy to hear that!

Hello Sir, When I upload this coding file into my WordPress the error “Style.css stylesheet doesn’t have a valid theme header”. Can you please let me know how can I fix this?? Waiting for your good response. Thank you!

Bro you are awesome bro !! Can i use this with myown changes for a school website or will there be copyright issues ?

Yes, you can use it and there are no copyright issues.

bro is this responsive (contact us) javascript

It was really awesome, how can some one appreciate this gesture

am so happy , thanks for free portfilio

thank you yarr broo lots of love. you help us

You’re welcome bro <3

Thank you for this tutorials. So many helpfull for beginners.

Glad to hear that!

wow, thank you so much, can I practice with this design?

Yes, you can!

Hi, My name Is Shivam Can I use this website as my own portfolio website

Please tell me

I really want a portfolio website

hello brother..why cant i run the website in live server?

Make sure to install the live server extension in your vscode..?

Bro, I’m a big fan of anime and I wanna make a website based on anime like with slide shows and all that, I really can’t find any, could you please make one like that. Plssss

It would be great if you could do it 🙂

Hey Man, you are awesome! I subscribed to your youtube channel. The only thing that was giving me issues was the “fas fa-bars”

I do not have any misspellings, I dont know if anyone else had this issue. I’d love your input!

This portfolio, looks amazing bro!

The bars would not show up for some strange reason* meant to put that in my previous comment

What was the problem..? Is the icon not showing or something else..?

Yes for me the icon not showing (section “contact”) (that was giving me issues was the “fas fa-”) I use just html and css ( no JavaScript ) thanks for video thank you so much

Can I create this from my phone ??

Hi, how do i make the footer sticky? Thanks

my js script is not running well

You may did some mistakes with the codes. Please, download the source code files from the given download button and make sure you’re connected to the Internet.

Thanks dude it was nice code ….

Best Bro tq For you

thank you so much bro

1st of all the this portfolio is awesome I m a not pro In these. I used your template but I have a question how can I get messages when someone send me message though my website thnx

Sir can you tell me how to improve my command over html css and java like you have very good command over these

Sir, love your project playlist, helping me a lot. When I click the “menu-bar” icon the “menu” doesn’t show up. I have looked up all the code but not working. Can you help me with that?

Excellent Bro, My Fav Coder <3

LEAVE A REPLY Cancel reply

Save my name, email, and website in this browser for the next time I comment.

Recent Posts

Drag and drop sortable list using html css & javascript, 7 easy javascript games for beginners with source code, how to create a snake game in html css & javascript, top 10 javascript projects for beginners with source code, create random color palette generator in html css & javascript, featured post, build an image editor in html css & javascript.

AdBlock Detected

portfolio using html css javascript

portfolio-website

A portfolio is a compilation of materials that exemplifies your beliefs, skills, qualifications, education, training, and experiences. It provides insight into your personality and work ethic. A portfolio website is generally a static website featuring work samples and other details as explained above. It is closely related to Online Resume or C.V.

Here are 2,231 public repositories matching this topic...

Bedimcode / responsive-portfolio-website-alexa.

Responsive Portfolio Website Using HTML, CSS & JavaScript

artemsheludko / flexible-jekyll

Flexible-Jekyll is a simple and clean theme for Jekyll

bchiang7 / bchiang7.github.io

Third iteration of my personal website built with Jekyll

nisarhassan12 / portfolio-template

A beautiful minimal and accessible portfolio template for Developers. Give it a star 🌟 if you find it useful.

bedimcode / responsive-portfolio-website-Ansel

Create a Responsive Personal Portfolio Website Using HTML CSS & JavaScript

AVS1508 / My-Alternate-Portfolio-Website

Portfolio Website generated using Jekyll, Sass, and Gulp.js, to showcase my web presence, résumé, story, & featured projects with a Particle.js aligned theme.

kaustubhai / portfolio-template

An Open-Sourced Template for developers to show-off there skills. Made with ReactJS

themefisher / timer-hugo

Timer is a personal portfolio theme powered by Hugo. It also can be use as a landing page theme.

jigar-sable / Portfolio-Website

Portfolio Website build using HTML5, CSS3, JavaScript and jQuery

Skyflash / skyflash.github.io

🎨 My personal website

bedimcode / responsive-portfolio-website-chris

Responsive Personal Portfolio Website Design Using HTML CSS & JavaScript

AmreshSinha / glassFolio

Developer Portfolio Template in Glassmorphism UI

bedimcode / responsive-portfolio-Clay-Doe

Responsive Complete Portfolio Website HTML CSS And JavaScript

vinitshahdeo / SimpleBio

A starter template for beginners.

mehulk05 / Mehul.Kothari

SauravMukherjee44 / Portfolio-Saurav-Mukherjee

Portfolio website build using HTML5, CSS3, JavaScript and jQuery.

bearlike / Pixel-Portfolio-Webite

A Nintendo inspired lightweight, No BS responsive single-page portfolio website built with HTML and CSS 👾

abdlalisalmi / DJANGO-Portfolio

Personal portfolio website made with Django framework in the backend, and with CSS, js, and bootstrap for the frontend.

bedimcode / responsive-mini-portfolio

Responsive Mini Portfolio Website Design Using HTML CSS & JavaScript

tech-jamara / DjangoReactPortfolio

🥳 React portfolio for developers makes editing info in you portfolio much easier using django admin

Related Topics

Related Articles

Simple Portfolio Website Design using HTML

Being a web developer and having a portfolio helps a lot while applying for opportunities and acts as a showcase of our talent, so in this article, we will learn how to make a simple one-page portfolio by just using HTML. This portfolio might contain some very important information of yours like:

You can even add other details too in your portfolio and can make it more beautiful. But this article focuses on beginners who are wanting to learn to build their portfolio using simple HTML.

Prerequisite: Basic concepts of HTML like tags, attributes ,forms, tables, rows, columns, hyperlink etc.

Code Implementation:  

Note: We have used two photographs as well. One in the about table and other in the project section.

Supported Browser:

Please Login to comment...

New Course Launch!

Improve your Coding Skills with Practice

Start your coding journey now.

IMAGES

  1. Responsive Personal Portfolio Website using HTML CSS & JavaScript

    portfolio using html css javascript

  2. Responsive Personal Portfolio Website using HTML CSS & JS

    portfolio using html css javascript

  3. Personal Portfolio Website using HTML & CSS

    portfolio using html css javascript

  4. #1 Personal Portfolio Complete Website using only Html Css Javascript

    portfolio using html css javascript

  5. 🔴Freelancer

    portfolio using html css javascript

  6. Portfolio Website in HTML CSS & JavaScript

    portfolio using html css javascript

VIDEO

  1. Portfolio website html css

  2. Portfolio using HTML || CSS || JAVASCRIPT || OASIS-INFOBYTE || INTERNSHIP || TASK2

  3. How to apply cool color palette to a website / Design a portfolio using HTML, CSS and JavaScript

  4. Portfolio

  5. Create Responsive Portfolio using HTML CSS & JAVASCRIPT

  6. HOW TO CREATE A PORTFOLIO WEBSITE USING HTML CSS AND JAVASCRIPT

COMMENTS

  1. What Are the Advantages and Disadvantages of HTML?

    There are many advantages and disadvantages of HTML, including compatibility and difficulty of use. All Web browsers can read HTML files and webpages, but the language can be difficult to decipher, especially since one small typo could lead...

  2. jsFiddle: An online playground for your JavaScript, HTML, CSS

    jsFiddle lets developers play with the three core elements of Web development. Check out this powerful application for rapid prototyping and testing. jsFiddle lets developers play with the three core elements of Web development. Check out t...

  3. Build a JavaScript Loan Calculator With HTML & CSS

    I am Shantanu Jana, a self-taught Front-End Developer and Web Designer. In this article, you will learn how to create a Loan Calculator using JavaScript, HTML, and CSS. This type of loan calculator will help you to calculate how much you ne...

  4. How to Create a Portfolio Website Using HTML, CSS, JavaScript

    How to Create a Portfolio Website Using HTML, CSS, JavaScript, and Bootstrap 5 ; <nav class="navbar navbar-expand-lg fixed-top navbarScroll"> <

  5. How To Make A Portfolio Website Using HTML CSS JS

    Learn How To Make A Portfolio Website Using HTML CSS JavaScript | Complete Responsive Website Design | Make Personal portfolio website❤️

  6. Responsive Personal Portfolio Website Using HTML CSS ...

    Responsive Personal Portfolio Website Using HTML CSS And JavaScript | Dark/Light Mode Subscribe For

  7. Amazing Portfolio website using HTML, CSS and JS.

    So let's start, to create navbar first write the HTML basic template and link style.css and app.js file to index.html file. After done with all

  8. How to create a portfolio

    Step One: Add HTML Skeleton · Step Two: Add Navigation Bar · Step Three: Add Hero section · Step Four: Add About Me section · Step Five: Add Work Experience section.

  9. Create Simple Portfolio Website Using HTML and CSS

    First and foremost, we need to make the backbone of our website, an HTML file. I made the HTML file and named it 'index.html'. Since we'll be

  10. Portfolio Website Using HTML ,CSS ,Bootstrap and JavaScript

    Portfolio Website Using HTML ,CSS ,Bootstrap and JavaScript ... This site [Personal Portfolio] has four sections on one page: Home, Portfolio

  11. Responsive Personal Portfolio Website using HTML CSS & JavaScript

    To create this website (Personal Portfolio Website), you need to create three Files: HTML File, CSS File, and JavaScript File. After creating

  12. portfolio-website · GitHub Topics

    Here are 2,231 public repositories matching this topic... ; responsive-portfolio-website-Alexa · 1.4k · Responsive Portfolio Website Using HTML, CSS & JavaScript.

  13. Portfolio Website using HTML, CSS, & JavaScript with Hosting

    What you'll learn · How to Build Modern Portfolio Website · Modern Techniques and Tricks · Modern HTML5, CSS3, and JavaScript Features · Advanced CSS and JavaScript

  14. Simple Portfolio Website Design using HTML

    Being a web developer and having a portfolio helps a lot while applying for opportunities and acts as a showcase of our talent