DEV Community: Bitlearners

How to Create a Navigation Bar Using HTML and CSS

Bitlearners — Wed, 21 Aug 2024 18:32:43 +0000

A well-designed and functional navigation bar (navbar) is one of the key components of any website. It serves as a roadmap for users, helping them navigate through various pages. A navbar is commonly positioned at the top of a webpage, where it is always visible for users to access key links. In this article, we will explore how to create a visually appealing and functional CSS navigation bar using HTML and CSS. We'll also discuss various techniques to ensure the navbar stays at the top of the page.

You can check out a live demo of this navigation bar and explore its functionality by visiting the preview on CodePen.

The following code snippet demonstrates the creation of a responsive navigation bar with a logo, menu items, and a call-to-action button. Here's the HTML and CSS code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Navbar</title>
    <style>
      body {
        background: linear-gradient(0deg, #2258c3 10%, #fd2df3 90%);
        height: 100vh;
        margin: 0;
        padding-top: 10px;
      }

      .navbar {
        display: flex;
        background: #fff;
        border-radius: 30px;
        padding: 10px 20px;
        margin: 0 auto;
        width: 95%;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
      }

      .logo {
        width: 12rem;
      }

      .menu {
        display: flex;
        list-style-type: none;
        margin: 0;
        padding: 0;
      }

      .item {
        margin: 0 15px;
      }

      .item a {
        text-decoration: none;
        color: #333;
        font-weight: bold;
      }

      .item a:hover {
        color: #2258c3;
      }

      button {
        background-color: #2258c3;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 20px;
        cursor: pointer;
      }

      button:hover {
        background-color: #fd2df3;
      }
    </style>
  </head>

  <body>
    <nav class="navbar">
      <img
        src="https://bitlearners.com/wp-content/uploads/2024/06/BitLearners-logo-1.png"
        alt="Logo"
        class="logo"
      />

      <ul class="menu">
        <li class="item"><a href="#">Home</a></li>
        <li class="item"><a href="#">About Us</a></li>
        <li class="item"><a href="#">Contact Us</a></li>
        <li class="item"><a href="#">Blog</a></li>
      </ul>

      <button type="submit">Call Now</button>
    </nav>
  </body>
</html>

Breaking Down the Code
Let's take a closer look at how the navbar is created using HTML and CSS.

HTML Structure

The HTML part of the code is straightforward. It consists of a nav element that contains three main components:

A logo (an image)
A **menu **list with clickable links (Home, About Us, Contact Us, Blog)
A **button **that serves as a call to action (Call Now)
The structure is wrapped inside a element, which acts as a container for the navigation bar.

<nav class="navbar">
  <img src="logo-url" alt="Logo" class="logo" />
  <ul class="menu">
    <li class="item"><a href="#">Home</a></li>
    <li class="item"><a href="#">About Us</a></li>
    <li class="item"><a href="#">Contact Us</a></li>
    <li class="item"><a href="#">Blog</a></li>
  </ul>
  <button type="submit">Call Now</button>
</nav>

The logo is created using an tag. The menu is an unordered list (

)

that contains list items (
)
, and each list item has an anchor tag () to create links to different pages. Finally, the button is a simple tag with styling.

Styling with CSS

The magic happens in the CSS section, where we define the layout and appearance of the navigation bar. Let’s discuss some of the key elements.

Background and Body Styling
The body has a gradient background that transitions from blue (#2258c3) to pink (#fd2df3). The height is set to 100vh (viewport height), which ensures the background fills the entire screen, and there's no margin to avoid unwanted space around the page.

body {
  background: linear-gradient(0deg, #2258c3 10%, #fd2df3 90%);
  height: 100vh;
  margin: 0;
  padding-top: 10px;
}

Navbar Styling

The navbar has a white background and rounded corners (border-radius: 30px). The padding and margin create spacing inside and outside the navbar. The display: flex property makes the navbar a flexbox, allowing for the horizontal alignment of its child elements. The justify-content: space-between ensures the logo, menu, and button are evenly spaced.

.navbar {
  display: flex;
  background: #fff;
  border-radius: 30px;
  padding: 10px 20px;
  margin: 0 auto;
  width: 95%;
  justify-content: space-between;
  align-items: center;
}

Fixing the Navbar to the Top

One of the key functionalities of a navigation bar is to stay at the top of the page while scrolling. To achieve this, we use the position: fixed property. This allows the navbar to remain fixed at the top (top: 0) regardless of scrolling. Additionally, the z-index: 9999 ensures that the navbar is always above other elements on the page.

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

Menu Items and Interactivity

The menu items are displayed horizontally using display: flex on the .menu class. The items are given spacing through margin, and each item is styled to remove the default list style and padding. The links within the menu items have no text decorations and are styled with a bold font and dark color.

The hover effect on the links changes the color to match the blue background color (#2258c3), providing a visual cue that the link is interactive.

.menu {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.item {
  margin: 0 15px;
}

.item a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.item a:hover {
  color: #2258c3;
}

Button Styling

The button is styled with a blue background (#2258c3), white text, and rounded corners (border-radius: 20px). On hover, the background changes to pink (#fd2df3) to match the gradient in the background.

button {
  background-color: #2258c3;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
}

button:hover {
  background-color: #fd2df3;
}

How to Keep the Navbar Always on Top

To fix the header at the top of the page with CSS, you use the position: fixed property along with top: 0. This ensures the navbar will remain at the top as the user scrolls. Here’s how it’s applied in the code:

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

Git Commands for Software Engineers

Bitlearners — Wed, 10 Jul 2024 05:39:42 +0000

A key function of Git is to manage version control and collaborate on software development, making it a must-have tool for software engineers. Whether you're a beginner or an experienced developer, mastering Git commands will help you manage codebases, track changes, and contribute to projects seamlessly. You will learn the fundamental Git commands that are at the core of version control workflow in this introduction.

What is Git?

A distributed version control system, Git, is designed to handle both small and large projects quickly and efficiently. This allows multiple developers to work on the same project without overwriting each other's changes, ensuring code integration that is cohesive and conflict-free.

Why Use Git?

Version Control: Using Git, you can track every change made to your codebase and revert to previous versions if necessary.

Collaboration: When multiple developers are working on a project simultaneously, their changes are seamlessly merged.

Branching and Merging: GitHub's branching model enables developers to work independently before merging new features or bug fixes.

Distributed System: Developers have their own copies of the entire project history, which allows for faster operations and backups.

Setting Up Git

Before you can start using Git, you need to set it up on your local machine.
1. Install Git

# For Debian-based distributions like Ubuntu
sudo apt-get install git

# For Red Hat-based distributions like Fedora
sudo dnf install git

# For macOS
brew install git

# For Windows, download and install from https://git-scm.com/

2. Configure Git
The username and email you specify when configuring Git are associated with your commit messages. Using the --global flag, you can set these configurations for all repositories on your system.

# Set your name
git config --global user.name "Your Name"

# Set your email
git config --global user.email "your.email@example.com"

# Verify your settings
git config --list

Key Git Commands

Basic Git Operations

These are the foundational commands that you will use frequently.
1. Initialize a New Repository
Initializes a new Git repository in the current directory, along with a subdirectory called .git.

git init

2. Clone an Existing Repository
Makes a copy of an existing remote repository on your local machine.

git clone https://github.com/username/repository.git

3. Check the Status of Your Repository
It shows the current state of the working directory as well as the staging area. Git shows which changes have been staged, which haven't, and which files aren't being tracked.

git status

4. Add Files to the Staging Area
Prepares the changes in the working directory for inclusion in the next commit by adding them to the staging area.

# Add a single file
git add filename

# Add all files
git add .

5. Commit Changes
A message is added to the repository that describes the changes made to the staging area.

git commit -m "Your commit message"

6. View Commit History
Display Lists all commits in the current branch, starting from the most recent.

git log

Branching and Merging

Branching allows you to create separate environments for development, while merging integrates changes from different branches.

1. Create a New Branch
This command creates a new branch called new-branch.

git branch new-branch

2. Switch to a Branch
Changes the working directory to the branch specified

git checkout new-branch

3. Create and Switch to a New Branch
Switches immediately to the newly created branch.

git checkout -b new-branch

4. Merge a Branch
The changes from new-branch are merged into the main branch. It is typically done after a feature is complete or a fix is made on a separate branch.

git checkout main
git merge new-branch

5. Delete a Branch
This command deletes the specified branch. A branch is usually removed after it has been merged into another branch.

git branch -d new-branch

5. Delete a Branch
This command deletes the specified branch. In most cases, this is done after the branch has been merged into another branch and is no longer needed.

git branch -d new-branch

Undoing Changes

Sometimes you need to undo changes, whether they are in your working directory, staging area, or committed history.

Discard Changes in Working Directory Reverts the file to its last committed state by discarding changes in the working directory.

git checkout -- filename

2. Unstage Changes
Keeps changes in the working directory but removes them from the staging area.

git reset HEAD filename

3. Amend the Last Commit
Commits a new message or additional changes to the most recent commit.

git commit --amend -m "New commit message"

4. Revert a Commit
An undo commit is created by undoing a commit specified in the commit string.

git revert commit-hash

5. Reset to a Previous Commit
This command resets the current branch to the commit specified. If the --soft option is selected, the changes will be kept in the working directory, whereas if the --hard option is selected, they will be discarded.

# Soft reset (keeps changes in working directory)
git reset --soft commit-hash

# Hard reset (discards changes)
git reset --hard commit-hash

Collaboration

Collaborating with others involves working with remote repositories.

1. Add a Remote Repository
The URL of a remote repository is associated with a name, typically the origin.

git remote add origin https://github.com/username/repository.git

2. Push Changes to Remote Repository
The local branch commits are uploaded to the corresponding branch in the remote repository.

git push origin branch-name

3. Pull Changes from Remote Repository
Syncs the remote branch with the current branch and fetches and integrates the changes.

git pull origin branch-name

4. Fetch Changes from Remote Repository
Updates are retrieved without being merged into the local branch from the remote repository.

git fetch origin

Advanced Git Commands

For more complex workflows, these advanced commands can be very useful.

1. Stash Changes
Stacks unfinished changes in the working directory, allowing you to move on to something else without losing your work.

git stash

Apply Stashed Changes Updates the working directory with the most recent changes.

git stash apply

3. View Stashed Changes
All stashes are listed, along with their names and commit messages.

git stash list

4. Cherry-pick a Commit
The current branch is updated with the changes from a specific commit.

git cherry-pick commit-hash

5. Rebase a Branch
Creates a linear project history by reapplying commits from the current branch onto another branch.

git rebase branch-name

Tips and Tricks of git

Enhance your Git experience with these helpful tips.
1. Aliases
Save time and keystrokes by defining shortcuts for commonly used Git commands.

# Create an alias for git status
git config --global alias.st status

# Create an alias for git log with a specific format
git config --global alias.lg "log --oneline --graph --all"

2. Autocorrect
Ensures that mistyped commands are automatically corrected after a short delay after they are entered.

git config --global help.autocorrect 1

3. Colorize Git Output
Provides color-coded output for Git commands to make them easier to read.

git config --global color.ui auto

Conclusion

Having a clear understanding and use of these fundamental Git commands will greatly improve your workflow as a software engineer as well as your productivity. As a result of Git's robust version control capabilities, as well as its robust branching and merging features, Git has become one of the most indispensable tools for modern software development. Integrate Git into your projects today in order to take advantage of the benefits of efficient version control and collaboration that Git provides.

Basic Linux Commands for Developers

Bitlearners — Wed, 10 Jul 2024 03:15:16 +0000

Introduction
Linux is one of the most popular platforms for developers due to its versatility, performance, and open-source nature. It is possible to significantly increase productivity and efficiency in development tasks by mastering Linux commands. There are several sections in this guide that cover essential Linux commands that developers should know, so they can be understood and applied more easily.

Basic Commands

ls
The ls command lists the contents of a directory.

ls
ls -l
ls -a

ls -l: Lists files in long format.
ls -a: Includes hidden files.

cd
The cd command changes the current directory.

cd /path/to/directory
cd ..

cd .. Moves up one directory level.

pwd
The pwdcommand prints the current working directory.

pwd

man
The man command displays the manual pages for other commands.

man ls

mkdir
The mkdir command creates a new directory.

mkdir new_directory

rm
The rm command removes files or directories.

rm filename
rm -r directory_name

rm -r: Recursively removes a directory and its contents.

File Management

cp
The cp command copies files or directories.

cp source_file destination_file
cp -r source_directory destination_directory

cp -r: Recursively copies a directory and its contents.

mv
The mv command moves or renames files or directories.

mv old_name new_name
mv file_name /path/to/destination

touch
The touch command creates an empty file or updates the timestamp of an existing file.

touch newfile.txt

cat
The cat command concatenates and displays the content of files.

cat file.txt

nano and vim
nano and vim are text editors. nano is easier for beginners, while vim is more powerful but has a steeper learning curve.

nano file.txt
vim file.txt

Process Management

ps
The ps command displays information about active processes.

ps
ps aux

ps aux: Shows detailed information about all running processes. top The top command provides a dynamic view of system processes.

top

kill
The kill command terminates a process by its PID.

kill PID
kill -9 PID

kill -9: Forcefully terminates a process.

htop
htop is an interactive process viewer, providing a more user-friendly interface compared to top.

htop

Networking

ping
The ping command checks the network connectivity between the local machine and a remote host.

ping test.com

curl
The curl command transfers data from or to a server.

curl http://test.com
curl -O http://test.com/file.txt

curl -O: Downloads a file.

wget
The wget command downloads files from the internet.

wget http://test.com/file.txt

ssh
The ssh command connects to a remote machine over SSH.

ssh user@remote_host

scp
The scp command securely copies files between hosts.

scp local_file user@remote_host:/path/to/destination
scp user@remote_host:/path/to/file local_destination

System Monitoring

The dfcommand displays disk space usage.

df -h

df -h: Shows disk space in human-readable format.

du
The du command estimates file and directory space usage.

du -sh directory_name

du -sh: Shows the size of a directory in human-readable format.

free
The free command displays memory usage.

free -h

free -h: Shows memory usage in human-readable format.

uptime
The uptime command shows how long the system has been running.

uptime

Text Processing

grep
The grep command searches for patterns in files.

grep 'pattern' file.txt
grep -r 'pattern' directory_name

grep -r: Recursively searches in directories.

sed
The sed command is a stream editor for filtering and transforming text.

sed 's/old/new/g' file.txt

s/old/new/g: Replaces all occurrences of 'old' with 'new' in the file.

awk
The awkcommand is a powerful text processing language.

awk '{print $1}' file.txt

{print $1}: Prints the first field of each line.

Version Control

git
git is a distributed version control system.

git init
git clone repository_url
git add .
git commit -m "commit message"
git push origin branch_name
git pull origin branch_name

git init: Initializes a new Git repository.
git clone:Clones a repository.
git add .: Adds all changes to the staging area.
git commit -m: Commits changes with a message.
git push: Pushes changes to the remote repository.
git pull: Pulls changes from the remote repository.

Package Management

apt
aptis a package management tool for Debian-based systems.

sudo apt update
sudo apt install package_name
sudo apt upgrade

sudo apt update: Updates the package list.
sudo apt install: Installs a package.
sudo apt upgrade: Upgrades all installed packages. yum yumis a package management tool for RPM-based systems.

sudo yum update
sudo yum install package_name
sudo yum upgrade

Scripting

bash
bashscripts automate tasks and streamline workflows.

#!/bin/bash
# This is a comment
echo "Hello, World!"

#!/bin/bash: Indicates the script should be run in the Bash shell.
echo: Prints text to the terminal. cron cronschedules scripts and commands to run at specified times.

crontab -e

crontab -e: Edits the crontab file to schedule tasks. Example of a cron job that runs a script every day at midnight:

0 0 * * * /path/to/script.sh

Conclusion

By mastering these Linux commands, a developer can significantly improve the efficiency with which he or she manages files, processes, networks, and more. For effective and productive development in a Linux environment, understanding these commands is essential, whether you are a beginner or an experienced developer. The more you practice and use these commands, the easier it will be for them to become solidified and integrated into your daily routine.