Build a portfolio with React, No external framework/library

Focused View

Juan Camacho

3:06:03

32 View

1. Introduction

1. Introduction.mp4

00:48

2. Something to keep in mind.html

2. Create App, reset default values

1. Create app.mp4

07:47

2. Adding app color variables, resetting defaults.mp4

05:35

3.1 app.zip

3. App.css file.html

3. Navigation Bar

1. Create component, add HTML.mp4

09:01

2. Layout and animation.mp4

06:41

3.1 hamburger-menu.zip

3. Download the SVG for the next section.html

4. Importing and stylizing an SVG.mp4

03:54

5. useState and useEffect to detect screen size.mp4

12:21

6.1 01 currentFiles navbar.zip

6. Current files for navbar.html

4. Landing Page

1.1 svg.zip

1. Creating landing page screen.mp4

06:12

2. Small explanation on how css frameworkslibraries work.mp4

03:02

3. Adding SVG explanation.mp4

04:36

4. text for AnimatedBackground file.html

5. Creating a loop and stylize the SVG.mp4

12:39

6. Animating the background.mp4

08:37

5. Text animation

1. Layout and css.mp4

09:07

2. Logic and Documentation.mp4

14:11

3.1 02 currentFiles LandingPage.zip

3. Download current files.html

6. About Me

1. About me screen.mp4

10:31

2.1 03 currentFiles AboutMe.zip

2. Download current files.html

7. Technologies

1. Create screen.mp4

09:57

2.1 svg.zip

2. Download the SVGs.html

3. Adding css.mp4

09:39

4.1 04 currentFiles Technologies.zip

4. Download current files.html

8. Portfolio

1. Create Screen.mp4

10:44

2. Adding grid.mp4

05:11

3. The logic behind assigning the current project.mp4

05:29

4. Modal css.mp4

14:23

5. Documenting Modal, more css.mp4

04:26

6.1 05 currentFiles PortfolioList.zip

6. Download current files.html

9. Contact

1. Layout.mp4

03:25

2. Css.mp4

01:27

3.1 06 currentFiles contact.zip

3. Download current files.html

10. Extras

1. Fixing ESlint warning.mp4

00:47

2. Upload your portfolio online.mp4

05:33

Description

everything from scratch, no bootsrap, no tailwind. just React.

What You'll Learn?

D.R.Y code
Reusable components
Documenting code
CSS variables

Who is this for?

Beginners

What You Need to Know?

Basic HTML, CSS, Javascript and React

More details

Description
In this beginners tutorial, you will learn how to use React.js to build a dynamic portfolio that can be updated whenever you want to show more projects! This beginners tutorial will be using dry code and functional components. We will not be using any framework or library, we will be using our own CSS and design, additionally, we will be able to document our code for future usage, either by you or your co-workers
What is react?
"React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications" -Wikipedia
What is dry code?
"Don't repeat yourself is a principle of software development aimed at reducing repetition of software patterns, replacing it with abstractions or using data normalization to avoid redundancy -Wikipedia
Why this course/tutorial?
This course will be detailed on each step and the logic used for each component.
Yes...you will be building a personal portfolio, but you will also learn skills that will help you in your personal and job-related projects! It will teach you how code can be reused for different purposes and make it more dynamic.
Who this course is for:
Beginners

User Reviews

Rating

average 0

Total votes0

Focused display

React

Juan Camacho

Instructor's Courses

I am a full-stack developer/software engineer.my favorite language is javascript and my favorite library is React.jsI am very passionate about anything that has to do with technology. computer building, coding, designing, and more. my only regret in life is not becoming a developer when I was a teenager.

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.