Responsive Portfolio Website using HTML5, CSS3, JavaScript

سرفصل های دوره

Convert Figma Portfolio Template to Responsive HTML Website using HTML5, CSS3, SASS, Bootstrap5, and JavaScript

1 - Getting Started

1 - Introduction

2 - Programming Languages and libraries that we will use

3 - The tools I will use

4 - Live server

5 - Visual studio code customization

6 - Emmet plugin to speed coding

7 - How to use Figma

8 - Shortcuts and multi line editing

9 - How to center align an element with absolute position

10 - How to create a triangle with CSS

2 - Creating a Fundamental Structure

11 - 2-1-base-HTML5-code.zip

11 - Base HTML5 code

12 - 2-2-install-and-configure-scss.zip

12 - Install and configure SASS

13 - 2-3-multiple-scss-and-css-files.zip

13 - Multiple SCSS files using the SASS partials feature

14 - 2-4-css-reset.zip

14 - CSS reset

15 - 2-5-import-google-fonts.zip

15 - Import Google fonts

16 - 2-6-install-and-configure-bootstrap5.zip

16 - Install and configure Bootstrap5

17 - 2-7-import-font-icon.zip

17 - Import font icon

18 - 2-8-sidebar-HTML5.zip

18 - Sidebar HTML

19 - 2-9-define-theme-colors.zip

19 - Define theme colors

20 - 2-10-sidebar-style.zip

20 - Sidebar CSS style code

21 - 2-11-show-section-by-nav-item-click.zip

21 - Show the correct section by clicking on the sidebar item

22 - 2-12-sidebar-responsive.zip

22 - Responsive sidebar for all devicesMobile Tablet Laptop

3 - Home Section

23 - Introduction

24 - 3-2-base-code.zip

24 - Home section HTML code

25 - 3-3-home-section-style.zip

25 - Home section CSS style code

26 - 3-4-add-typed-js.zip

26 - Add Typedjs

27 - 3-5-meteor-shower.zip

27 - Meteor shower animation

28 - 3-6-home-section-responsive.zip

28 - Home section responsive for all devicesMobile Tablet Laptop

4 - About Me Section

29 - Introduction

30 - 4-2-about-hero-section-html.zip

30 - Hero section HTML code

31 - 4-3-about-hero-style.zip

31 - Hero section CSS style code

32 - 4-4-about-hero-responsive.zip

32 - Hero section responsive for all devicesMobile Tablet Laptop

33 - 4-5-about-languages-skills-html.zip

33 - Languages and skills section HTML code

34 - 4-6-about-languages-skills-style.zip

34 - Languages and skills section CSS style code

35 - 4-7-about-languages-skills-responsive.zip

35 - Languages and skills section responsive for all devicesMobile Tablet Laptop

36 - 4-8-about-certifications-html.zip

36 - Certifications section HTML code

37 - 4-9-about-certifications-style.zip

37 - Certifications section CSS style code

38 - 4-10-about-certifications-responsive.zip

38 - Certifications section responsive for all devicesMobile Tablet Laptop

39 - 4-11-about-certifications-message-me-button-link.zip

39 - Message me button link

40 - 4-12-about-add-fill-rate.zip

40 - Add fill rate

5 - Resume Section

41 - Introduction

42 - 5-2-resume-html.zip

42 - Resume section HTML code

43 - 5-3-resume-style.zip

43 - Resume section CSS style code

44 - 5-4-resume-responsive.zip

44 - Resume section responsive for all devicesMobile Tablet Laptop

6 - Work Section

45 - Introduction

46 - 6-2-work-gallery-html.zip

46 - Galley HTML code

47 - 6-3-work-shuffle-js.zip

47 - Implement shufflejs on gallery

48 - 6-4-work-show-modal.zip

48 - Work modal HTML code

49 - 6-5-work-style.zip

49 - Work modal CSS style code

50 - 6-6-work-responsive.zip

50 - Work modal responsive for all devicesMobile Tablet Laptop

51 - 6-7-work-dynamic-modal.zip

51 - Work modal dynamic content using JavaScript

7 - Testimonial Section

52 - Introduction

53 - 7-2-testimonial-html.zip

53 - Testimonial section HTML code

54 - 7-3-testimonial-style.zip

54 - Testimonial section CSS style code

55 - 7-4-testimonial-responsive.zip

55 - Testimonial section responsive for all devicesMobile Tablet Laptop

56 - 7-5-testimonial-dynamic.zip

56 - Testimonial dynamic show feedback using JavaScript

8 - Contact Me Section

57 - Introduction

58 - 8-2-contact-html.zip

58 - Contact section HTML code

59 - 8-3-contact-style.zip

59 - Contact section CSS style code

60 - 8-4-contact-responsive.zip

60 - Contact section responsive for all devicesMobile Tablet Laptop

53,700 تومان

خرید اشتراک افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy-Training