Convert Figma Portfolio to Responsive HTML Website: 2-12-Responsive sidebar all devices

Опубликовано: 25 Октябрь 2024
на канале: Cheetah Academy
36
1

Watch this course on Udemy:
https://www.udemy.com/course/responsi...

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.


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 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 you'll 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 the Emmet plugin to improve coding speed
Develop websites with dark and light modes using JavaScript


Who this course is for:
Trainee Front-End Web Developers
Junior Front-End Web Developers
Mid-Level Front-End Web Developers