Responsive Portfolio Website HTML5, CSS3, JavaScript (2024) from Udemy

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 This course will teach you how to create a personal website using 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 likejs, 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 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 section
Display customer feedback in the Testimonial section
Personal resume download link
Personal social network links

What's inside

Learning objectives

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
Show more
Show less

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
Show more
Show less

Syllabus

Getting Started

Introduction

Programming Languages and libraries that we will use

The tools I will use

Live server

Visual studio code customization

Emmet plugin to speed coding

How to use Figma

Shortcuts and multi line editing

How to center align an element with absolute position

How to create a triangle with CSS

Creating a Fundamental Structure

Base HTML5 code

Install and configure SASS

Multiple SCSS files using the SASS partials feature

CSS reset

Import Google fonts

Install and configure Bootstrap5

Import font icon

Sidebar HTML

Define theme colors

Sidebar CSS style code

Show the correct section by clicking on the sidebar item

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

Home Section

Home section HTML code

Home section CSS style code

Add Typed.js

Meteor shower animation

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

About Me Section

Hero section HTML code

Hero section CSS style code

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

Languages and skills section HTML code

Languages and skills section CSS style code

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

Certifications section HTML code

Certifications section CSS style code

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

Message me button link

Add fill rate

Resume Section

Resume section HTML code

Resume section CSS style code

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

Work Section

Galley HTML code

Implement shuffle.js on gallery

Work modal HTML code

Work modal CSS style code

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

Work modal dynamic content using JavaScript

Testimonial Section

Testimonial section HTML code

Testimonial section CSS style code

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

Testimonial dynamic show feedback using JavaScript

Contact Me Section

Contact section HTML code

Contact section CSS style code

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

Light Mode

Toggle Mode Button

Add Light SCSS

Light Sidebar

Light Home Section

Light About Section

Light Resume Section

Light Work Section

Light Testimonial Section

Light Contact Section

Light Sidebar Responsive

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Responsive Portfolio Website HTML5, CSS3, JavaScript (2024) with these activities:

Review HTML, CSS, and JavaScript Fundamentals

Show steps

Solidify your understanding of the core web technologies before diving into the course. This will make it easier to follow along and grasp the more advanced concepts.

Browse courses on HTML5

Show steps

Review basic HTML syntax and structure.
Practice CSS styling and layout techniques.
Work through basic JavaScript tutorials.

Review 'HTML and CSS: Design and Build Websites' by Jon Duckett

Show steps

Reinforce your understanding of HTML and CSS fundamentals with a well-regarded introductory text. This will provide a solid foundation for the course.

View Melania on Amazon

Show steps

Read the chapters on HTML structure and semantics.
Study the sections on CSS styling and layout.
Complete the exercises at the end of each chapter.

Follow Bootstrap 5 Tutorial

Show steps

Gain practical experience with Bootstrap 5 by following a comprehensive tutorial. This will help you understand how to use its grid system and components to create responsive layouts.

Show steps

Find a reputable Bootstrap 5 tutorial online.
Work through the tutorial, building a sample website.
Experiment with different Bootstrap components and features.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Practice Responsive Layouts with Media Queries

Show steps

Sharpen your skills in creating responsive designs using media queries. This will complement your Bootstrap knowledge and give you more control over your website's appearance on different devices.

Show steps

Create a simple HTML page with some content.
Use media queries to adjust the layout for different screen sizes.
Test your layout on various devices or using browser developer tools.

Build a Simple Portfolio Page

Show steps

Apply what you've learned in the course by building a basic portfolio page. This will give you hands-on experience with HTML, CSS, JavaScript, and Bootstrap.

Show steps

Plan the structure and content of your portfolio page.
Write the HTML code for the page structure and content.
Style the page using CSS and Bootstrap.
Add interactive elements using JavaScript.

Write a Blog Post on a Web Development Topic

Show steps

Deepen your understanding of a specific web development topic by writing a blog post about it. This will force you to research the topic thoroughly and explain it in a clear and concise manner.

Show steps

Choose a web development topic that interests you.
Research the topic and gather information from reliable sources.
Write a blog post explaining the topic in your own words.
Edit and proofread your blog post before publishing it.

Contribute to a Bootstrap Theme

Show steps

Gain experience working with a real-world project by contributing to an open-source Bootstrap theme. This will expose you to best practices and collaborative development workflows.

Show steps

Find an open-source Bootstrap theme on GitHub.
Identify an issue or feature you can contribute to.
Fork the repository and make your changes.
Submit a pull request with your changes.

Career center

Learners who complete Responsive Portfolio Website HTML5, CSS3, JavaScript (2024) will develop knowledge and skills that may be useful to these careers:

Frontend Developer

As a Frontend Developer, you will be building the user-facing parts of websites and web applications. This often involves working with HTML, CSS, and JavaScript to create interactive and visually appealing interfaces. This course helps you to become proficient in these core technologies. By learning how to build a responsive portfolio website using HTML5, CSS3, SCSS, Bootstrap5, and JavaScript, you will be able to implement features using JavaScript and style them using CSS3, thereby creating attractive and modern websites. Gaining expertise in tools such as Figma is essential. This course demonstrates how to use Figma in your workflow from extracting assets to converting designs to code.

See salaries and explore the career path for Frontend Developer

Web Designer

A Web Designer focuses on the visual appearance and usability of a website. Web designers create layouts, select color palettes, and ensure the site is easy to navigate, working to provide a positive user experience. This course may hone your skills in translating design concepts into functional web pages using HTML, CSS, and JavaScript. This course provides practical experience in creating a personal website using modern tools and techniques. You will develop skills in responsive design, ensuring that websites look and function well across various devices. This course teaches you how to implement dark and light modes, which are popular design features.

See salaries and explore the career path for Web Designer

UI Developer

The UI Developer role involves implementing the user interface of web applications. As UI Developer, you'll be translating designs into code and ensuring that the interface is interactive and responsive. The 'Responsive Portfolio Website HTML5, CSS3, JavaScript (2024)' course helps you learn about developing responsive websites using HTML5, CSS3, JavaScript, SCSS, and Bootstrap5. This course may be useful, as it will teach you about the role of HTML5 for creating the base structure of websites and web applications.

See salaries and explore the career path for UI Developer

Web Application Developer

A Web Application Developer builds interactive and dynamic web applications. This often involves working with both frontend and backend technologies. This course helps you to learn how to create a functional and visually appealing frontend for web applications. By covering HTML5, CSS3, JavaScript, and Bootstrap5, the course may assist you in creating responsive and interactive user interfaces. The focus on JavaScript, without relying on jQuery, helps build a strong foundation in modern web development practices.

See salaries and explore the career path for Web Application Developer

Frontend Architect

Frontend Architect is responsible for making high-level design choices and setting coding standards for frontend projects, often requiring a deep understanding of various frontend technologies and architectural patterns. This course may assist Frontend Architects in staying current with the latest frontend development practices. The course's focus on HTML5, CSS3, JavaScript, and related tools allows you to become conversant with the technologies that frontend teams typically utilize. This course enhances your knowledge of creating attractive and modern websites.

See salaries and explore the career path for Frontend Architect

Webmaster

The Webmaster is responsible for maintaining and updating websites, ensuring they are functional and accessible. This involves managing content, troubleshooting technical issues, and implementing website improvements. This course teaches you how to maintain and update websites effectively. By covering HTML5, CSS3, JavaScript, and Bootstrap5, the course may help you understand and modify website code, ensuring that websites function correctly and are visually appealing.

See salaries and explore the career path for Webmaster

UX Designer

UX Designers research and design user experiences for websites and applications. While this role doesn't directly involve coding, understanding the capabilities and limitations of frontend technologies is essential for creating effective designs. This course may provide a better understanding of how designs are implemented on the web. By learning HTML5, CSS3, and JavaScript, you will gain insights into the technical aspects of web development, which can inform your design decisions and improve collaboration with developers. Learning to implement dark and light mode features will improve your designs.

See salaries and explore the career path for UX Designer

Digital Marketing Specialist

Digital Marketing Specialists develop and implement marketing campaigns to promote products or services online. Understanding how websites are built and function helps in creating effective online marketing strategies. This course may give you insight into the technical aspects of web development. The course may assists you in optimizing websites for search engines, improving user experience, and ensuring that marketing campaigns align with the website's design and functionality.

See salaries and explore the career path for Digital Marketing Specialist

Technical Writer

Technical Writers create documentation for software and hardware. A basic understanding of web development technologies may assist in documenting frontend code and website features. This course may give you a practical understanding of HTML5, CSS3, and JavaScript. With experience in building a portfolio website, you can better document the structure, styling, and functionality of web applications. In particular, you will understand how frontend code is structured, and can use that knowledge to write better documentation.

See salaries and explore the career path for Technical Writer

IT Support Specialist

The IT Support Specialist provides technical assistance to computer users. While this role does not focus on web development, understanding basic web technologies may help in troubleshooting website-related issues. This course may allow you to gain a foundational knowledge of HTML, CSS, and JavaScript. This knowledge can assist you in diagnosing common website problems and communicating effectively with web developers when more complex issues arise. The ability to identify coding elements will improve support.

See salaries and explore the career path for IT Support Specialist

Quality Assurance Analyst

A Quality Assurance Analyst tests software and websites to ensure they meet quality standards. Understanding frontend technologies helps you create more effective test cases and identify potential issues. This course may provide foundational knowledge of how websites are built using HTML, CSS, and JavaScript. The ability to understand these technologies may allow you to identify and report bugs more effectively. The course demonstrates how a website should function.

See salaries and explore the career path for Quality Assurance Analyst

Project Manager

Project Manager is responsible for planning, executing, and closing projects. This often involves coordinating with various team members, including developers and designers. Understanding the basics of web development can help in managing web development projects more effectively. This course may provide a basic understanding of HTML, CSS, and JavaScript, which can improve communication with developers and make informed decisions about project timelines and resource allocation. The course assists in being able to participate in technical conversations.

See salaries and explore the career path for Project Manager

Content Creator

Content Creators develop and produce content for websites and other digital platforms. Understanding how websites are structured and styled can help create more effective and engaging content. This course may give you insight into HTML and CSS, which are used to structure and style web content. This understanding can help you optimize your content for the web, ensuring it is visually appealing and easy to read. The course may assist you in being more creative and effective.

See salaries and explore the career path for Content Creator

Technical Sales

Technical Sales professionals sell technical products or services to businesses or organizations. Understanding the technical aspects of what you are selling can build credibility with clients. This course may provide practical knowledge of HTML, CSS, and JavaScript, which are fundamental to web development. This knowledge assists you in discussing the technical features and benefits of web-related products or services with potential customers. The course enhances your knowledge of frontend technologies.

See salaries and explore the career path for Technical Sales

Search Engine Optimization Specialist

A Search Engine Optimization Specialist analyzes, reviews and implements changes to websites so they are optimized for search engines. This means maximizing traffic to a site by improving page rank within search engines. This course may give you a basic understanding of HTML, CSS, and JavaScript, which can improve communication with developers and make informed decisions about project timelines and resource allocation. The ability to identify coding elements will improve support.

See salaries and explore the career path for Search Engine Optimization Specialist

Responsive Portfolio Website HTML5, CSS3, JavaScript (2024)

What's inside

Learning objectives

Syllabus

Save this course

Activities

Career center

Reading list

Share

Similar courses