Udemy

Platform

English

Language

Web Development

Category

HTML, CSS, and JavaScript Projects: Sidebar & Navbar Menus

Construct responsive sidebar and navbar menus while learning the fundamentals of HTML, CSS, and JavaScript (JS)

3.51 (48344 reviews)

Students

1 hour

Content

Jul 2021

Last Update
FREE
Regular Price

SKILLSHARE
SkillShare
Unlimited access to 30 000 Premium SkillShare courses
30-DAY FREE TRIAL

What you will learn

Learn how to create a Responsive Sidebar and Navbar menus from scratch using only HTML, CSS, and JavaScript, and without the use of any third-party libraries.

Learn how to use Font Awesome to create visually appealing closing buttons and bars icons for your website.

Learn how to write simple codes in HTML, CSS, and JavaScript by following this tutorial.

Create a free SVG logo that is completely SEO friendly and will help your website rank higher in search engine results by using the tools provided.

Learn how to add and remove classes from a JavaScript project using the JavaScript toggle method.

Learn about the most important JavaScript methods, such as the querySelector and addEventListener methods, in this tutorial.


Description

Welcome to the course which is intended for anyone who is interested in learning about creating a Responsive Sidebar and a Responsive Navbar using HTML, CSS, and JavaScript.


Greetings, everyone. My name is Sahand, and I've been working as a programmer for more than fifteen years.


This course was developed to allow me to share my knowledge and experience with you.


This course is intended to help you become more familiar with the concept of responsive design, and I hope you will find it to be beneficial.


After completing this course, you will be able to complete two projects: the first will be a beautiful and responsive sidebar created entirely with HTML, CSS, and JavaScript, which will allow website users to add and remove (toggle) the sidebar by clicking on the bars and removing the Sidebar using the closing button; and the second project will be a Responsive Navbar created entirely with HTML, CSS, and JavaScript, which will allow website users to toggle the menu by clicking on the bars.


Introduction to Visual Studio Code and its necessary extensions is covered in detail in the first section of this course, which is straightforward and easy to follow.


Afterwards, we'll create an SVG logo and write the HTML code for it.


As soon as you have finished with the HTML, you will move on to the CSS section and learn how to use the Font Awesome extension.

This project will teach you many skills, such as how to create an SEO-friendly logo and use Font Awesome, as well as some essential JavaScript methods used on most websites, such as the addeventlistener method and toggle.


Even if you do not have any prior knowledge of HTML, CSS, or JavaScript before beginning the course, you will be perfectly fine. A summary of the basics of HTML, CSS, and JavaScript is provided in the course.


This is a short course that will teach you about HTML, CSS, and JavaScript while building a simple but practical Sidebar and Navbar.


So, if you're as enthusiastic as I am about learning how to create a Responsive Sidebar and a Responsive Navbar, as well as the fundamentals of HTML, CSS and JavaScript, then let's get started.


Screenshots

HTML, CSS, and JavaScript Projects: Sidebar & Navbar Menus
HTML, CSS, and JavaScript Projects: Sidebar & Navbar Menus
HTML, CSS, and JavaScript Projects: Sidebar & Navbar Menus
HTML, CSS, and JavaScript Projects: Sidebar & Navbar Menus

Content

Introduction and essential installations

What you're going to get from this course?

Installing Vscode and its extensions

Sidebar menu Project

Creating the logo of the website

Adding the logo and menu to our website using HTML

Styling the menu using CSS and adding the sidebar

Using Font Awesome to add closing button and bars icons

Styling the closing and bars buttons using CSS

Using JavaScript to add and remove the sidebar


Reviews

G
Ghulam20 July 2021

This is a good experience but little advance no explanation about tags. Anyway I enjoyed much and it help me so much.


4050984

Udemy ID

5/15/2021

Course created date

5/20/2021

Course Indexed date
Bot
Course Submitted by