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

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
  • 139,000 تومان
    بیش از یک محصول به صورت دانلودی میخواهید؟ محصول را به سبد خرید اضافه کنید.
    خرید دانلودی فوری

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

    ایمیل شما:
    تولید کننده:
    مدرس:
    شناسه: 8155
    حجم: 6036 مگابایت
    مدت زمان: 634 دقیقه
    تاریخ انتشار: 7 فروردین 1402
    طراحی سایت و خدمات سئو

    139,000 تومان
    افزودن به سبد خرید