Responsive Portfolio Website Using HTML5, CSS3, Javascript

voska89 · Jan 24, 2023

Published 1/2023
MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz
Language: English | Size: 5.89 GB | Duration: 10h 33m
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

Homepage

Code:

https://www.udemy.com/course/responsive-portfolio-website-using-html5-css3-javascript-bootstrap5/

Search

Search

Responsive Portfolio Website Using HTML5, CSS3, Javascript

voska89

Moderator

Users who are viewing this thread