Build a Modern/Creative portfolio html css js three js

Focused View

Mohamed Hajji

7:29:15

17 View

01 - Setup, Seo, Reset styles

001 Install necessary tools.mp4

01:42

002 Lets setup our project using parcel and npm.mp4

12:03

003 Seo-rank higher in search engines part 1.mp4

10:21

004 Seo-rank higher in search engines part 2.mp4

10:45

005 Reset styles, explaining box sizing, inherit.mp4

15:22

external-links.txt

02 - Awesome Animated loader

001 Lets build the loader (Markup and styles) P1.mp4

22:46

001 loaders.zip

002 Lets build the loader (GSAP animations) P2.mp4

08:30

003 Lets build the loader (FINISH THE JOB) P3.mp4

15:15

03 - Landing section (Header, cool buttonslinkssocialsanimated mouse )

001 Build the Header.mp4

08:16

002 Build an awesome animated link using CSS ONLY !.mp4

17:18

003 Build the most fancy animated button with CSS ONLY !.mp4

10:03

003 fancy-button-paths.txt

004 Finishing the fancy button and making the header responsive.mp4

09:12

005 Animated colored social links CSS ONLY !.mp4

11:09

006 Scroll down animated icon done ONLY WITH CSS.mp4

09:49

007 Finish Landing section(INTRO INFOS).mp4

12:20

007 wallpapers.zip

external-links.txt

04 - Skills

001 Skills (Markup and css).mp4

10:48

002 Skills moving animation.mp4

04:05

05 - Reviews

001 Review Header Card with shadow effect.mp4

12:38

002 Swiper js setup.mp4

06:27

002 swiper.zip

003 Review card.mp4

08:39

003 avatars.zip

004 Use JavaScript to list reviews (responsive swiper also ) ).mp4

11:55

005 Styling the Swiper and its components PART 1.mp4

12:58

005 rightarrow.zip

006 Styling the Swiper and its components PART 2.mp4

07:31

external-links.txt

06 - projects

001 Projects layout.mp4

12:26

002 Build an animated rotating Eye Circle with ONLY CSS AGAIN !.mp4

14:04

002 EyeCircleButton.txt

003 Create a curvy animated funny link with CSS INLY AGAIN ).mp4

07:58

003 funnylinksvg.txt

004 Make projects responsive.mp4

06:43

07 - Frequently asked questions

001 Frequently asked questions (Markup and styles).mp4

10:37

002 Accordion with JavaScript.mp4

04:49

08 - Contact

001 Contact Part 1.mp4

17:12

002 Contact Part 2.mp4

12:33

003 Receive emails easy.mp4

08:52

09 - Animated 3d background with THREE JS

001 THREE JS explained for absolute beginners.mp4

13:10

002 3d Background setup.mp4

07:10

003 Animated 3d background (Vertices explained).mp4

09:12

004 3d Waving background animation.mp4

07:08

10 - 3d rgb image effect with THREE JS and Shaders

001 3d rgb skew image effect part 1.mp4

12:02

002 3d rgb skew image effect part 2.mp4

16:30

003 3d rgb skew image effect part 3.mp4

09:51

004 3d rgb skew image effect part 4.mp4

08:40

11 - Animations, Smooth scroll

001 Landing animations, fixing loader issues.mp4

06:03

002 Linking loading time with page loading.mp4

04:59

003 Smooth scroll and fixing all its issues.mp4

09:24

Description

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

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.

Who is this for?

Beginner web developer

People who wants to build a portfolio

What You Need to Know?

Basic html css javascript knowledge

No three js experience needed i teach you all from zero

More details

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

User Reviews

Rating

average 0

Total votes0

Focused display

Hello there ?My name is Mohamed HAJJI, i am a full stack web developer and a good one of course, i have great knowledge in the web development field in both frontend and backend ,i have built countless applications using many different technologies, and my job here is to take everything i know and try and share it with all my fellow developers from all levels especially for new developers because i have been there and i know the struggle of trying to learn and adapt to all the technologies we have nowadays and i will try in my new journey as an instructor to have different courses to build different major projects using different technologies.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.