Responsive Portfolio Website HTML5, CSS3, JavaScript (2024)

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:

1. Improving your skills and taking a few steps to be professional.

2. Helping you learn the basic skills to create a valuable product.

3. 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?

1. 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.

2. Meteor shower animation is included on this website.

3. Existence of a biography section to show critical skills, foreign languages, programming skills, years of experience in each field, and display other information.

4. Ability to display educational background and work experience in the resume section.

5. View the portfolio and details of each portfolio in the portfolio section

6. Display customer feedback in the Testimonial section

7. Personal resume download link

8. Personal social network links

What You Will Learn!

• Improve HTML5 and CSS3 skill
• Improve SCSS skill
• Improve Bootstrap5 skill
• Improve JavaScript skill
• How to develop responsive websites to render well on Mobile, Tablet, Laptop, and other devices
• How HTML5, CSS3, SCSS, Bootstrap5, and JavaScript come together
• How to create animations and transitions with CSS3 and JavaScript
• How to work with JavaScript pure instead of jQuery and jQuery plugins
• How to build a portfolio website using HTML5, CSS3, SCSS, Bootstrap5, and JavaScript
• Get acquainted with tools like Emmet plugin to improve coding speed
• Develop websites with dark and light mode using JavaScript

Who Should Attend!

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

TAKE THIS COURSE