Responsive Portfolio Website Using Html5, Css3, Javascript

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

What you'll learn

Increase HTML5 and CSS3 skill

Increase SCSS skill

Increase Bootstrap5 skill

Increase JavaScript skill

Build responsive website for Mobile, Tablet, Laptop, …

How HTML5, CSS3, SCSS, Bootstrap5, and JavaScript work together

Build animations and transitions with CSS3 and JavaScript

Work with JavaScript pure not jQuery and jQuery plugins

Build a personal portfolio website using HTML5, CSS3, SCSS, Bootstrap5, and JavaScript

Familiarity with tools for increasing the speed of coding like the Emmet plugin

Build Website with dark mode and light mode using JavaScript

Requirements

Basic knowledge of HTML5, CSS3, SCSS, Bootstrap5, and JavaScript is required

Description

Welcome to this Cheetah Academy training course. I hope that it will be a beneficial course for you and you will learn a lot from it and, as a result, improve your programming skills. This course aims to help people who are beginners in Front-End Web Development, do not have an acceptable portfolio to offer, or can not create a final product. In this training course, we intend to teach you the following items:Improving your skills and taking a few steps to be professional.Helping you learn the basic skills to create a valuable product.Assisting you in creating a good and presentable portfolio.If you know the basics of HTML5, CSS3, SASS, Bootstrap5, and JavaScript, but you do not know how to use them to create a personal website, this course will help you. This course will teach you how to create a personal website using HTML5, CSS3, SASS, Bootstrap5, and JavaScript. The following is the role of each of the tools, libraries, programming languages, and frameworks:What is Figma's role in this tutorial?First, the website should be created using graphic applications such as Photoshop, Sketch, Adobe xd, and Figma. Then it will be coded by a Front-End Web Developer using languages, libraries, and web frameworks like HTML5, CSS3, SASS, Bootstrap5, JavaScript, jQuery, Vue.js, React, and Angular to become a static website. All components, colors, font sizes, margins, paddings, etc., are determined by Figma, and you must extract these values from the Figma file and convert them to code. In this course, we will turn a template implemented in Figma into a beautiful website, and you will learn how to extract photos, colors, font sizes, etc., from Figma.What is HTML5’s role in this tutorial?Most websites are now HTML-based, and it is the basis of today's websites and web applications. Semantic tags such as MAIN, SECTION, HEADER, FOOTER, and ASIDE have been added to the last version of this language to differentiate sections of a website, called HTML5. It had been done by the DIV tag already, and the website's page had been divided into different sections, and these DIV tags were distinguished using CLASS and ID.What is the CSS3’s role in this tutorial?HTML without CSS has no visual attractiveness, and you should use CSS to give a website color, glaze, and beauty. In this tutorial, we will use the third version of CSS called CSS3. In this version, many attractive features such as transition, animation, embedded fonts, and shadows have been added, by which you can make a website more attractive. This course uses CSS3 features extensively to improve your CSS3 knowledge.What is the SASS’s role in this tutorial?When we work with CSS, we can write CSS code faster using a special tool called SASS. SASS is a preprocessor for CSS and includes features such as variables, nesting, and inheritance to speed up the writing of CSS code. The browsers do not understand SASS codes, so when we write these codes, they are converted to CSS by a compiler to be understandable for the browsers. In this course, you will learn to work with SASS practically, improving your skill in SASS. Today, Front-End Web Developers should have the ability to work with a CSS preprocessor in their list skills.What is Bootstrap5’s role in this tutorial?When you create a website using HTML and CSS, you should create it responsive to make it visible properly on various devices such as mobile phones, tablets, laptops, and monitors with different dimensions. You can use media queries to do this, but an easier way is to use Bootstrap, which has a premade grid structure built in if you follow Bootstrap rules. Therefore, you will have a responsive website that displays well on different devices with different dimensions. When we recorded this tutorial, the latest version of Bootstrap was the fifth version, Bootstrap5. In this version, like the previous version, flex is used to create grids, and it has almost the same features as Bootstrap4 with minor changes. The most significant change is the removal of jQuery; in contrast, raw JavaScript has been employed.What is JavaScript’s role in this tutorial?The most popular programming language globally is JavaScript, and in this course, we will utilize JavaScript. We want to improve your JavaScript skills; the more you watch and practice this course, the more you practically learn JavaScript skills. We will not use jQuery and its plugins in this course because we want you to learn raw JavaScript. As you know, JavaScript is the basis of all JavaScript libraries and frameworks such as jQuery, React, Vue.js, Angular, and Svelte, so if you want to learn any of these libraries and frameworks, you should first learn JavaScript sufficiently. We want to improve your JavaScript skills because we believe JavaScript is the heart of the Front-End!What are the features of this website?This website has two dark and light modes; by clicking on a button, the website theme goes from dark to light and vice versa using JavaScript.Meteor shower animation is included on this website.Existence of a biography section to show critical skills, foreign languages, programming skills, years of experience in each field, and display other information.Ability to display educational background and work experience in the resume section.View the portfolio and details of each portfolio in the portfolio sectionDisplay customer feedback in the Testimonial sectionPersonal resume download linkPersonal social network links

Overview

Section 1: Getting Started

Lecture 1 Introduction

Lecture 2 Programming Languages and libraries that we will use

Lecture 3 The tools I will use

Lecture 4 Live server

Lecture 5 Visual studio code customization

Lecture 6 Emmet plugin to speed coding

Lecture 7 How to use Figma

Lecture 8 Shortcuts and multi line editing

Lecture 9 How to center align an element with absolute position

Lecture 10 How to create a triangle with CSS

Section 2: Creating a Fundamental Structure

Lecture 11 Base HTML5 code

Lecture 12 Install and configure SASS

Lecture 13 Multiple SCSS files using the SASS partials feature

Lecture 14 CSS reset

Lecture 15 Import Google fonts

Lecture 16 Install and configure Bootstrap5

Lecture 17 Import font icon

Lecture 18 Sidebar HTML

Lecture 19 Define theme colors

Lecture 20 Sidebar CSS style code

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

Lecture 22 Responsive sidebar for all devices(Mobile, Tablet, Laptop, …)

Section 3: Home Section

Lecture 23 Introduction

Lecture 24 Home section HTML code

Lecture 25 Home section CSS style code

Lecture 26 Add Typed.js

Lecture 27 Meteor shower animation

Lecture 28 Home section responsive for all devices(Mobile, Tablet, Laptop, …)

Section 4: About Me Section

Lecture 29 Introduction

Lecture 30 Hero section HTML code

Lecture 31 Hero section CSS style code

Lecture 32 Hero section responsive for all devices(Mobile, Tablet, Laptop, …)

Lecture 33 Languages and skills section HTML code

Lecture 34 Languages and skills section CSS style code

Lecture 35 Languages and skills section responsive for all devices(Mobile, Tablet, Laptop)

Lecture 36 Certifications section HTML code

Lecture 37 Certifications section CSS style code

Lecture 38 Certifications section responsive for all devices(Mobile, Tablet, Laptop, …)

Lecture 39 Message me button link

Lecture 40 Add fill rate

Section 5: Resume Section

Lecture 41 Introduction

Lecture 42 Resume section HTML code

Lecture 43 Resume section CSS style code

Lecture 44 Resume section responsive for all devices(Mobile, Tablet, Laptop, …)

Section 6: Work Section

Lecture 45 Introduction

Lecture 46 Galley HTML code

Lecture 47 Implement shuffle.js on gallery

Lecture 48 Work modal HTML code

Lecture 49 Work modal CSS style code

Lecture 50 Work modal responsive for all devices(Mobile, Tablet, Laptop, …)

Lecture 51 Work modal dynamic content using JavaScript

Section 7: Testimonial Section

Lecture 52 Introduction

Lecture 53 Testimonial section HTML code

Lecture 54 Testimonial section CSS style code

Lecture 55 Testimonial section responsive for all devices(Mobile, Tablet, Laptop, …)

Lecture 56 Testimonial dynamic show feedback using JavaScript

Section 8: Contact Me Section

Lecture 57 Introduction

Lecture 58 Contact section HTML code

Lecture 59 Contact section CSS style code

Lecture 60 Contact section responsive for all devices(Mobile, Tablet, Laptop, …)

Trainee Front-End Web Developers,Junior Front-End Web Developers,Mid-Level Front-End Web Developers