Portfolio Website

Tags: HTML

Use JavaScript and HTML to create the ultimate responsive portfolio website from scratch!

Last updated 2022-01-10 | 4.4

- Build their own website using a range of technical skills
- Easily utilise third party tools to make your site stand out

What you'll learn

Build their own website using a range of technical skills
Easily utilise third party tools to make your site stand out

* Requirements

* A computer is needed
* Basic HTML knowledge is nice to have but not needed

Description

Do you want to become an expert web developer?

Or maybe you want to build a professional portfolio website to show off your projects?

If so, you’re in the right place! This course will guide you step by step in creating your own responsive portfolio website COMPLETELY from scratch.

We’re talking the kind of website that will amaze anybody that sees it. The kind of website that will get you hired in no time! A good portfolio website is something every decent developer needs to have. Without it, how can you expect to stand out from the millions of other developers that are out there. A portfolio website is an excellent way to show people just how good you are as well as displaying projects that you've worked on. Why tell an employer how good you are when you can show them.

Why let me teach you?

I work as a Software Engineer at Microsoft where I build products used by millions of people all over the world! I want to take the skills I’ve gained through years of working with some of the best developers in the world and transfer them directly to you!

I’ve taught thousands of students here on Udemy and created some of the most popular development courses on Udemy!

Okay so what’s the course about?

In this course, we will create a beautiful responsive portfolio website from scratch using HTML, CSS, JavaScript/JQuery and whilst also making use of some great (free) third party tools. Anybody who sees your site will know that:

  • you are proficient with HTML/CSS

  • you possess extensive JavaScript skills 

  • you are able to create responsive websites

  • you are able to implement third party tools (very important skill)

  • and much more!

 Whether you are a complete beginner* or an experienced programmer, this course will be massively beneficial to you.

Why should I take the course?

In the programming world, the “big 4” often consists of Google, Microsoft, Facebook and Amazon. To get a job at any of these companies, you absolutely MUST know the essentials: HTML, CSS and JavaScript.

If you take this course, you will have nothing to worry about because we use all of these skills extensively!

Support:

By enrolling in this course, you will have my COMPLETE support. I'm always ready to answer any question you may have. Programming issues, errors, feature requests, general programming advice - it doesn't matter, I'm always happy to help! I always aim to respond to questions within a few hours and it's also worth noting that I've answered EVERY SINGLE question asked so far on all of my courses.

Fun!

Finally, this project is a lot of fun and I know you'll have a great time implementing your own unique ideas as well as the ones we implement together. What are you waiting for?

*You don't need any experience to take this course, however a basic understanding of HTML would be great. I will explain everything as I go, but some things I spent more time on than others. I don't spent a huge amount of time on the absolute lowest level basics e.g. what is HTML. So if you have absolutely no experience programming, you are absolutely fine to take this course, just ask me to explain things further if you would like a more detailed explanation :)

Who this course is for:

  • Anybody who wants to build their own portfolio website.

Course content

11 sections • 52 lectures

Website Overview Preview 01:44

Introduction - Setup Preview 03:52

Adding JQuery Preview 04:09

Adding Bootstrap Preview 04:59

Adding Superslides files Preview 05:15

Using Superslides Preview 03:29

Creating our own JavaScript file Preview 03:14

Adding our own images to the slider Preview 04:11

Superslides options Preview 03:24

Adding next and previous buttons Preview 06:31

Styling the next and previous buttons Preview 05:49

Adding a background overlay Preview 04:27

About section HTML Preview 07:15

Adding text to the about section Preview 01:41

Creating the skills section HTML Preview 04:47

Adding the slider Preview 03:35

Adding the pie charts Preview 04:48

Pie chart options Preview 05:25

Styling the charts Preview 06:13

Activating the charts on scroll Preview 06:03

Creating the stats section HTML Preview 03:42

Styling the skills items Preview 08:20

Using Font Awesome Preview 04:24

Adding the icon to the items Preview 03:10

Counting the number up from 0 Preview 05:50

Counting up on scroll Preview 03:18

Creating the contact section HTML Preview 03:11

Styling the contact section Preview 03:23

Adding Isotope Preview 03:23

Adding the filter buttons Preview 03:10

Styling the filter buttons Preview 03:53

Creating a portfolio item Preview 06:34

Portfolio item icons Preview 03:40

Viewing items in full screen Preview 03:17

Styling the items Preview 08:36

Adding an overlay to the items Preview 04:02

Adding fly in/out transitions to the buttons Preview 02:54

Zooming the images on hover Preview 02:31

Filtering items Preview 07:18

Bug fix - icons not showing on mobile Preview 01:52

Creating the copyright section Preview 03:19

Adding the Bootstrap navigation menu Preview 03:14

Styling the navigation bar Preview 07:03

Sticking navigation bar on scroll Preview 06:12

Fixing navigation bugs Preview 04:33

Sliding to section on link click Preview 05:08

Adding a loading Gif Preview 05:59

Fading out the loading indication Preview 05:53

Specifying the viewport Preview 01:20

Bug fix - images overlapping Preview 00:50