Build a Modern/Creative portfolio html css js three js

Name: Build a Modern/Creative portfolio html css js three js
Rating: 4.2 (139 reviews)

Build the best Modern/Creative/Responsive personal portfolio with 3d experience and amaze people.

Created byMohamed Hajji

Last updated 6/2023

English

What you'll learn

Create an amazing, modern, creative, unique and responsive portfolio.
Build awesome 3d experiences for absolute beginners.
Learn the secrets on what makes a good portfolio.
Show your work to the world in a modern fashionable way.
Create advanced unique styles for buttons and links.
Create moving animated 3d background.
Make an animated awesome loading screen.
learn how to make hover rgb skewing effect on images with three js and shaders.
Learn how to create a very advanced mobile friendly swiper.
Tired of basic links and buttons here you will create the best of the best using only html css.
Make a different modern contact form that actually look good.
Learn how add smooth scrolling to your website and fix all problems you could face.
Also use snap scrolling to go from links to section by smooth scroll.
make a javascript accordion for frequently asked questions.
Learn how to display projects in an exceptional way and show what it's like being creative.
Learn how to setup, use parcel and manage your project in a better way easily.
Learn code structure like a pro.
Learn how to host your website easily and free.
I teach you about seo and how and what makes your website rank higher in search engines.
lean how to use sass and code css better and more efficient in BEM style.
Understand how three js works and know all you need about it from scratch.
Work with Evenlisteners in javascript and master different approaches.
Use functions like setInterval and setTimeout.
Learn ho to manipulate the DOM with javascript.
Learn how to load data from javascript file to the page easily.
Responsive design from small to large and from large to small screens.
i provide you some of the best loaders and high quality backgrounds to use.

Course content

11 sections • 43 lectures • 7h 29m total length

Install necessary tools1:42
This is your first step into the course ,so let's install all the necessary tools to start working.
Let's setup our project using parcel and npm12:03
In this video we will talk about, explain and setup parcel and see what advantages it gives us and why it's very important to have a bundler for your project.
Seo-rank higher in search engines part 110:21
Seo (Search engine optimization) is something you cannot ignore nowadays so we have few videos where we go through all the tricks secrets to make sure your website stands out and start climbing search engines front page. so welcome to part 1 of seo for beginners.
Seo-rank higher in search engines part 210:45
Seo (Search engine optimization) is something you cannot ignore nowadays so we have few videos where we go through all the tricks secrets to make sure your website stands out and start climbing search engines front page. so welcome to part 2 of seo for beginners.
Reset styles, explaining box sizing, inherit...15:22
before starting to work with css you have, well it's actually a must to reset some of the annoying styles browsers apply to your code and this why this video will help you do just that and even what other things you can do to make sure your journey with css is beautiful and i do explain concepts like box-sizing, line height, inherit font smoothing ...

Let's build the loader (Markup and styles) P122:46
Here we are creating an awesome loader with beautiful animations with GSAP, welcome to part One where we work on the markup and styles
Let's build the loader (GSAP animations) P28:30
Here we are creating an awesome loader with beautiful animations with GSAP, welcome to part Two where we install gsap and get to work on animations and transitions.
Let's build the loader (FINISH THE JOB) P315:15
Here we are creating an awesome loader with beautiful animations with GSAP, welcome to part Three were we finish our loader.

Build the Header8:16
In this video we will work on our header markup and styles so we are then prepared to work on the animated links and buttons in the next videos.
Build an awesome animated link using CSS ONLY !17:18
The title explains itself just get ready to start working on an awesome animated link while also showing tricks and secrets to become a css animations god.
Build the most fancy animated button with CSS ONLY !10:03
Again as the title say, we will create a fancy animated button wit only css showing things about css you didn't you could do.
Finishing the fancy button and making the header responsive9:12
Here we continue what have done i the previous video and finishing the fancy button and then making our header responsive.
Animated colored social links CSS ONLY !11:09
Again another animated link now with icons to make sure we provide colored animated icons and give them a unique feeling.
Scroll down animated icon done ONLY WITH CSS9:49
Her we work on the scroll down animated icon only with css AGAIN !
Finish Landing section(INTRO INFOS)12:20

Review Header Card with shadow effect12:38
Now we will start working on the reviews section by defining the initials markup and then creating the review header card with the shadow effect.
Swiper js setup6:27
Let's start our work with swiper js , setup and explaining how we will approach this.
Review card8:39
It's time for the review card, so let's gooo
Use JavaScript to list reviews (responsive swiper also :) )11:55
This is an important video where i show you how to use JavaScript to list all the reviews in our html which is easier more professional and efficient, also we will make sure the swiper is fully responsive
Styling the Swiper and it's components PART 112:58
Now time to work on the styles for swiper js components like the buttons and the pagination part One
Styling the Swiper and it's components PART 27:31
Now time to work on the styles for swiper js components like the buttons and the pagination part Two

Projects layout12:26
Here we start our projects section by making the initial layout which looks amazing :)
Build an animated rotating Eye Circle with ONLY CSS AGAIN !14:04
Another amazing button we will create we will use svgs because they are awesome and we will make something absolutely amazing.
Create a curvy animated funny link with CSS INLY AGAIN :)7:58
yeah we are not done with this absolute amazing css buttons and links and this is no exception this will be absolutely brilliant.
Make projects responsive6:43
straight forward into making this section full responsive.

THREE JS explained for absolute beginners13:10
I'm gonna teach about three js for absolute beginners so you can understand what you need to continue the rest of sections.
3d Background setup7:10
Here we setup the initial settings for three js for our 3d background.
Animated 3d background (Vertices explained)9:12
we will work on our first three js animation explaining vertices and how to control them and animate them.
3d Waving background animation7:08
Creating our final 3d background animation with three js , i'm talking about the waving animation and understanding the math behind it.

Requirements

Basic html css javascript knowledge
No three js experience needed i teach you all from zero

Description

In this course you will learn how to build a modern, creative and responsive portfolio, i take you from a blank page to an amazing portfolio with 3d experience for absolute beginners, teach you all the skills tricks on html css javascript and three js.
and le me list some of things you will learn :
-Create an amazing, modern, creative, unique and responsive portfolio.
-Build awesome 3d experiences for absolute beginners.
-Learn the secrets on what makes a good portfolio.
-Show your work to the world in a modern fashionable way.
-Create advanced unique styles for buttons and links.
-Create moving animated 3d background.

-Make an animated awesome loading screen.
-learn how to make hover rgb skewing effect on images with three js and shaders.
-Learn how to create a very advanced mobile friendly swiper.

-Tired of basic links and buttons here you will create the best of the best using only html css.
-Make a different modern contact form that actually look good.
-Learn how add smooth scrolling to your website and fix all problems you could face.

-Also use snap scrolling to go from links to section by smooth scroll.
-make a javascript accordion for frequently asked questions.
-Learn how to display projects in an exceptional way and show what it's like being creative.

-Learn how to setup, use parcel and manage your project in a better way easily.
-Learn code structure like a pro.
-Learn how to host your website easily and free.

-I teach you about seo and how and what makes your website rank higher in search engines.
-lean how to use sass and code css better and more efficient in BEM style.

-Understand how three js works and know all you need about it from scratch.
-Work with Evenlisteners in javascript and master different approaches.

-Use functions like setInterval and setTimeout.
-Learn ho to manipulate the DOM with javascript.

-Learn how to load data from javascript file to the page easily.
-Responsive design from small to large and from large to small screens.

-i provide you some of the best loaders and high quality backgrounds to use.

Who this course is for:

Beginner web developer
People who wants to build a portfolio

Build a Modern/Creative portfolio html css js three js

What you'll learn

Explore related topics

Course content

Setup, Seo, Reset styles5 lectures • 50min

Awesome Animated loader3 lectures • 47min

Landing section (Header, cool buttons/links/socials/animated mouse...)7 lectures • 1hr 18min

Skills2 lectures • 15min

Reviews6 lectures • 1hr

projects4 lectures • 41min

Frequently asked questions2 lectures • 15min

Contact3 lectures • 39min

Animated 3d background with THREE JS4 lectures • 37min

3d rgb image effect with THREE JS and Shaders4 lectures • 47min

Requirements

Description

Who this course is for: