We use nav in bootstrap to create navigation bar on the website. We have different that we need to include to create nav bar using bootstrap?

How to use navbar

  • Step 1 : We need to take class navbar to create navigation bar or menu bar with logo,login, or search button and then we need to add navbar-dark/navbar-light to make the navbar dark and highlight the text navbar-light will make the navbar light and text will be light.

    Hide something for different screen

    Change breakpoint for different screen

    Responsive paragraph and headings for different screen

  • Step 2 : Use navbar-brand class to use logo under a tag.

  • Step 3 : To use menu bar under navbar we will use class navbar-nav under ul tag and inside the li we will use class nav-item and inside it we will use class nav-link under anchor tag.

  • Step 4: We use class navbar-expand-lg/md/sm to keep the logo menu items in one horizontal line till the screen size is lg/md/sm. So when the screen size is less than lg menu items will be in one vertical line. You can see menu bar in vertical line as shown in the above image. So, to bring it in horizontal we will use class navbar-expand-lg

    Output upto large screen

    Output below large screen

  • Step 5 : We use class dropdown to add dropdown menu in the list tag and then we will add one more class dropdown-menu to create menu and inside it we will take anchor tag with dropdown-item class below the anchor tag

  • Step 6: To open the dropdown menu, we will take an attribute data-toggle="dropdown with value dropdown inside anchor tag of home "page/About Us" in which we want to create dropdown and add a class dropdown-toggle to open and close when we click on "About Us/Home Page" in which we created the dropdown.

    Toggle icon with output

  • Step 7 : - To add "form or seach/login" we will take form tag with form-inline class to keep the form in one line and inside it we will input tag with class form-control and then to add button we will take button tag which will have btn class and btn-outline-sucess to button color.

  • Step 8:- We will use mr-auto class on the ul tag just above the form tag to keep the form on the right hand side if space available.

  • Step 9 :- We will use mr-sm-2 so that when the screen size is below the small screen and input and button will be in two lines and then add class in button my-2 and my-sm-0(screen size small and larger the sm, y axis will have no margin) but my-2 will add margin my-2 in extra small screen size

  • Step 10: Now, I want to show the menu items on button click and hide on small screen. So, we will create a button just below the logo icon anchor tag and add a class navbar-toggler and now to show the icon, we will take span tag with class navbar-toggler-icon (to create three signs), we can create our own design or icon inside it by removing the this class

  • Step 11: Now, we want to show the menu items and form when we click on the icon. So, we will put the ul and form tag inside a div which will have two class collapse(It will hide the data on small size) and navbar-collapse(to animate the data inside this div) and since we want to show it on button click so we will add data attribute data-toggle with collapse value on the button of icon and also data-target=""(jise target karna hai usepe ek id lagayege jaise ke div pe aur id add kar denge aur us id ke value to data-target ke value pe pass kar denge). button ke click karne pe myNavbar ko animate karne ke liye. note: button tabhi dikhega jab screen size large se chhota hoga as used class navbar-expand-lg






collapse/data-target/data-toggle="collapse"

Whenever we want to toggle(hide/show any content) on click of any anchor tag or button we have to use an attribute data-toggle="collapse"

When we use any anchor tag, we pass the content inside the href attribute. Such as if we have to show a div on click of anchor tag, First we will take class collapse on diva and then we will pass id="anyName" on the div and then paste #anyName such as href="#anyName" under href value but in the case of button we use use another attribute data-target="#anyName" because we can't use href in button

The div content will show when we click on the button and when we re-click it will hide.

class=”container” will give margin from left and right and at mobile screen it will 100% width Please note:- Note:- In container class (max-width) will change on different screen size. We know that we have 6 breakpoints:-

In class=”container-fluid” width will give 100% in all different screen size Note:- In .container (max-width) will change on different screen size.

For notes refer to this link
Introduction · Bootstrap v5.0 (getbootstrap.com) Or go the getbootstrap.com and then docs, We have different things. It is a font end framework in which html , css and javaScript used to create framework to the work easier of the developer so that we will not have repeat the same thing. It provides gri system, different classes and components for different work like to make the image responsive we class="img-fluid" . It is used to make the website responsive. We do have other frameworks but it is very famous. Componets like button to create button. We have different componts like buttons, alerts, pagination, navbar, carousel, nav, tabs, accordion, scrollspy and form etc. To use the bootstrape, we have copied the syntax and pasted in bootstrap folder, We need to go the get started.com , docs, intoroduction to the syntax

How to use it

  • Go to the link

  • Download the file

  • Implement via CDN path

  • Implement via downloaded file

  • Implement via downloaded file

  • Implement via downloaded file2

  • Where to use bundle.js and difference between v4 and v5

Typography is used to style the text.

Ager h1 se h6 ka size use karna chahte hai to h1 to h6 class use kar sakte hai

Different Margin/Padding in Different Screen Size

6 column space from 0 to 575px,7 column space from 576px to 991px and again same 6 column space from 992px to above

We should use "ls" to see all the files inside the folder and then write node s and then press tab, it will take you to the source folder like node ".\src\" and if any file is inside it then write the first letter of that file name like .\src\t and then press tab and it will show the test.js file \ available inside the source folder like .\src\test.js and then press enter and it will show the output of the script of
var x = 11;

console.log(x); // 11 will display on terminal
To clear the node or excessive code on Termail use "clear"
To get into the node write node and it will show a message like Welcome to Node.js v20.14.0.
Now, you can see the code of the file by doing the above process. To get out of the node use .exit and you will be out of the node and you will see like C:\Users\pione\OneDrive\Desktop\nodeTest\test>

The core technology of node.js is v8 engine or it is built on v8.

Youtube link

Following are the reasons to use MySQL with WordPress: oOpen source oExtremely fast oA widely available database server oSupported by low-cost Linux hosting

At present version, there are about 11 tables in WordPress by default. You can check the number of tables in WordPress by phpMyAdmin. owp_commentmeta owp_comments owp_links owp_options owp_postmeta owp_posts owp_terms owp_term_relationships owp_term_taxonomy owp_usermeta owp_users Note: The number of tables may be changed with successive releases.

The wp_ is by default prefix of WordPress tables.

In WordPress, all objects are passed by value.

You can call a constructor for a parent class by this way: Parents:: constructor($value)

These are some situations when WordPress is not recommended: oIf the client is working on the non-CMS based project. oFor sophisticated and innovative e-commerce sites. oSites which require custom scripting solutions.

No doubt WordPress is good CMS, but Drupal and Joomla are considered better CMS than WordPress to work.

Wordpress.com is relatively more secure than wordpress.org because they limit the themes and does not allow plugin's installation. However, security depends on the hosting company of your website and also what steps they are taking to prevent the security problems.

Posts allow you to write a blog and post it on your site. They are listed in reverse chronological order on the front page of your blog..f

Pages are different from posts. They are static, and they do not change often. You can add pages containing information about you and your site.

WordPress posts are content published on a site with an exact date and time. They can be categorized systematically by category and tags. They are listed in reverse chronological order on a website. WordPress pages are static and do not frequently change such as contact us, about us, privacy policy. They don?t have a date and time published. However, the database stores their published date and time.

WordPress uses PHP codes to display posts. This PHP code is known as a loop.

You can disable the WordPress comment on the dashboard. On the panel, under the options- discussion you find "Allow people to post the comment." Uncheck this to disable comment.

You can edit WordPress comment using the dashboard. From the panel, under the Comments option, select edit to edit a comment.

Comments by visitors on a post are not published directly unless the admin provides it. It is called moderation. To change comment moderation setting, select Settings option from the dashboard and check the option "Comment must be manually approved."

If you don't want a comment from a new user on your blog, check the option "Users must be registered and logged in to comment" from Discussions under the Settings option..

Word Avatar is used for a user's profile image in online communications. Gravatar is a web-based service which allows its users to use the Avatar image.

You should follow these steps: oInstall security plugins like WP security oRe-install the latest version of WordPress oChange password and user-ids for all your users oCheck your themes and plug-ins are up to date

Categories allow a user to divide its content into different sections. Different topics publishing on a single website can be divided into different groups. It tells a reader what a post is about and they can easily find their content from a lot.

WordPress provides you an option to change category into tag and tag into a category. For this, you need to install Categories and Tags Converter from Import option under Tools section. More

With the help of tags, similar posts can be grouped. Hence, it makes more comfortable for the users to search for a particular post. Tags are similar to categories but still different.

WordPress Categories are broad-ranging. It helps a user to identify about a blog. It is possible for a post to have more than one category. A post must have at least one category. WordPress Tags are like categories, but they are used to describe a post more specifically. Tags are not necessary for every post.

WordPress user role determines access permission to the users of a WordPress site. oAdministrator: They have full rights over a site. oEditor: They deal with the content section of a website. oAuthor: They only deal with their posts. They can delete their post even after publishing. oContributor: A contributor doesn't have the right to publish their post or page. They need to send it to the administrator for review. oSubscriber: Users who are subscribed to your site can log in and update their profile. oFollower: They don't have any right. They can only read and comment on your post. oViewer: They can only read and comment on a post. More details...

Follow the path for form events

C:\Users\pione\OneDrive\Desktop\FED\JAVASCRIPT\13. Javascript Form Event

Flex box is one-dimensional system (either in a column or a row). It is used to make one dimensional responsive layout without using position and float.

We use overflow property to fix the overflow issues when more content added to a fixed height element.

Promises are used to handle asynchronous operations in JavaScript. Before promises, callbacks were used to handle asynchronous operations. But due to the limited functionality of callbacks, using multiple callbacks to handle asynchronous code can lead to unmanageable code or call back hell. So, Promise was introduced in ES6 ( ECMAScript 2015). Promise object has four states -

  • Pending - Initial state of promise. This state represents that the promise has neither been fulfilled nor been rejected, it is in the pending state.
  • Fulfilled - This state represents that the promise has been fulfilled, meaning the async operation is completed.
  • Rejected - This state represents that the promise has been rejected for some reason, meaning the async operation has failed.
  • Settled - This state represents that the promise has been either rejected or fulfilled.
  • A promise is created using the Promise constructor which takes in a callback function with two parameters, resolve and reject respectively.
  • resolve is a function that will be called when the async operation has been successfully completed.
  • reject is a function that will be called, when the async operation fails or if some error occurs.

PROMISE.ALL

If all the promise is true then then call back function will execute and if any of the promises is false then catch call back will execute.

Syntax

Promise.all([p1, p2, p3]).then((result) => { console.log(result) }).catch((error) => { console.log(error) });
Here, p1, p2, p3 are three promises.

Map method is used to create a new array by adding, multiplying the values of an array.
It also used to make new array from the multidimentional objects by taking out the values. usuallY don't print it.
It has three parameters (value, i,array).
value is for value like in var a 1,2,3....,10 are values,
i is index and array means complete array.

Refer notes

Using display property(display: none). It’s not available for screen readers. The element will not exist in the DOM if display: none is used.

Using visibility property(visibility: hidden), will take up the space of the element. It will be available to screen reader users. The element will actually be present in the DOM, but not shown on the screen.

Using position property (position: absolute). Make it available outside the screen.

p { display: none; } div { visibility: hidden; } main { position: absolute; top: -100px; } /* Yes screen or viewport se upar chala gya isliye chhup gya */

The keyword initial can be used to reset or restore its default value. We know that every property has its default value like paragraph has default color “black” which will appear on the browser when we don’t reset/give any color to paragraph tag.

Similarly the default font-size of any paragraph is 16px which will apply if we don’t give any font-size. So, if we want to know the default value of any property then we can use initial. For example p{color:initial}, it will set black color in the paragraph because initial return the default value. Similarly, p{color:inherit} will give the color given in parent of paragraph tag if any else return the default one.

For more details

More images available in pdfnotes

The CSS3 calc() function allows us to perform mathematical operations on property values. Instead of declaring, for example, static pixel values for an element's width, we can use calc() to specify that the width is the result of the addition of two or more numeric values.

Refer audio for more clarification

We can do it by adding vscode.dev after https such as https://vscode.dev/github.co

For more details how to copy any website

Go go destop version of github and then click on the file(on the left top side) and then go to the option and then sign out and sign in with the currect git hub account and also assure that both the account of github browser version and desktop version are same.

How to upload project online using git hub

How to create repository and put big file online Go to https://github.com/Srz20/
Then create new repositary. Then upload file then open git hub installed in windows as it will allow to upload big project then click on Add drop down and clone repository and then find the repository you have created or click on URL tab and to go the github.com and copy the path of https that you will find under code tab and past in the desktop version and paste the copied url and then clone, it will start cloning. Once it is cloned, it will open a new page NO LOCAL CHANGES Click on show on explorer. It will open a new page, like .git file will be there, paste all the files of your projects here. Once it is done, go to the desktop version git hub, here you will see green page will files.filll section before description about your web and then click on commit to main. Now, click on push origin, it will download like 100% Now go to the browser git hub and click on your repository, you will see your all files are downloaded here. Now go the settings You will see your repository name that you can rename if you want. Click on pages, you will see GitHub Pages is currently disabled under BRANCH , change it to main. Wait for a while and go the settings again and then you will see the link of your website.