DEV Community: Umar Yusuf

How to create a dropdown menu with HTML and CSS

Umar Yusuf — Tue, 31 Oct 2023 15:41:00 +0000

Dropdown menus are a fundamental component of web development, offering a convenient way to present a list of options to users.
In this tutorial, I'll guide you through the process of creating a simple dropdown menu using HTML and CSS.

To get the most out of this tutorial, you should have some basic knowledge of HTML and CSS. If you're new to these technologies, you might want to check out some introductory tutorials.

Having said that, let's dive right in.

Add HTML Markup

We'll start by creating the HTML structure for our dropdown menu. We'll use an unordered list <ul> to represent the menu items and nested lists to create submenus. Here is how our HTML markup will look like:



<nav>
     <ul>
         <li><a href="#">Home</a></li>
            <li>
                <a href="#">Resources</a>
                <ul>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Academy</a></li>
                    <li><a href="#">Reviews</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Newsletters</a>
                <ul>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Socials</a></li>
                    <li><a href="#">Reviews</a></li>
                </ul>
            </li>
           <li><a href="#">About Us</a></li>
           <li><a href="#">Contact</a></li>
      </ul>
</nav>

Here is our result:

Now, let's add some CSS to style our dropdown menu in the next section.

Add CSS Styling

Step 1. We'll start by removing the default list styles and resetting the default padding and margin to eliminate any spacing around the list.

Here's the CSS:



nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

After that, let's style the main menu <li> items within the <nav> element. We'll set them to display as inline-block elements, which places them horizontally next to each other.

Here's the CSS:



nav ul li {
    display: inline-block;
    position: relative;
}

Next, we'll style the <a> elements by:

Setting them to display as block elements. so they occupy the entire width of their parent list items.
Adding some padding for spacing around the text.
We'll add some transition to create a smooth color change effect when you hover over the menu items.
Changing the background-color on hover to make it a little bit visually appealing.

Here's the CSS:



nav ul li a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s;
}

nav ul li a:hover {
    background-color: #f0f0f0;
}

Step 2. Now, let's add some styles for the dropdown <ul>submenus within the main menu <li> items by:

Hiding them by default using display: none and give them a position: absolute so they are placed relative to their parent list items.
we'll also set a hover effect on the main menu <li>, which displays the associated submenu by changing the display property to block.

Here's the CSS:



nav ul li ul {
    display: none;
    position: absolute;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #ccc;
}

nav ul li:hover ul {
    display: block;
}

Finally, To finish up styling the dropdown menu, we'll add the following:

Styles the individual items within the dropdown submenu. It ensures they are displayed as block-level elements and prevents wrapping of text using white-space: nowrap.
Similar to the main menu items, we'll make them display as block-level elements, add padding for spacing and include a transition effect for background-color changes on hover.

Here's the CSS:



nav ul li ul li {
    display: block;
    white-space: nowrap;
}

nav ul li ul li a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s;
}

nav ul li ul li a:hover {
    background-color: #f0f0f0;
}

Final result:

Conclusion

Creating a dropdown menu with HTML and CSS is a fundamental skill for web developers. With the steps outlined in this tutorial, you've built a simple yet functional dropdown menu. You can now expand on this foundation to create more complex menus and integrate them into your web projects.

How to create a simple mobile responsive navigation bar with HTML, CSS and JavaScript

Umar Yusuf — Thu, 26 Oct 2023 13:03:01 +0000

Navigation bars are essential components used a lot in websites and web apps. As a software developer, you will need to be able to create and customize them, either for yourself or for a client project.

In this article, you'll learn how to create a simple mobile responsive navigation bar with HTML, CSS, and JavaScript. This article assumes that you have basic knowledge of HTML, CSS, and JavaScript.

Let's get right into it.

Step 1 - Add HTML Markup

Before adding the HTML markup for our navigation bar, let's import a hamburger icon from Google icons. we'll be using the hamburger icon to toggle the navigation menu in small screens.

To import and use the hamburger icon from google, add the snippet below in the head of your HTML file:



<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />

Next, add the markup below to your HTML file. I will explain it later.



<header class="header">
        <div class="nav-container">
            <span class="logo">NavBar</span>
            <nav class="nav">
                <ul class="nav--ul__one">
                    <li class="nav-link"><a href="#">Home</a></li>
                    <li class="nav-link"><a href="#">Contact</a></li>
                    <li class="nav-link"><a href="#">About Us</a></li>
                </ul>
                <ul class="nav--ul__two">
                    <li class="nav-link"><a href="#">Login</a></li>
                    <li class="nav-link"><a href="#">Signup</a></li>
                </ul>
            </nav>
            <span class="hamburger-menu  material-symbols-outlined">menu</span>
        </div>
</header>

The HTML markup consists of the following:

A <header> element with the class of header that wraps the all the elements.
Inside the header, you have a container div with the class nav-container. This div wraps the logo, navigation links, and the hamburger menu.
A <span> element with the class logo.
A <nav> element with the class nav as the main navigation container. This container holds the navigation links and hamburger menu icon.
Inside the <nav>, you have two list of navigation links each represented with a <ul> with the class of nav--ul__one and nav--ul__two respectively.
You have another <span> element with the class hamburger-menu and an icon class material-symbols-outlined which represents the hamburger menu icon.

Here is the result:

With that done, now let's add some styles to make our navigation bar visually appealing.

Step 2 - Style the Navigation Bar

We'll start by resetting the default padding and margin of every element of the page, and add some basic styling to a few elements.



* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

Now that we are done with some basic styling, let's focus on styling the core navigation bar itself.

Navigation Menu Styles

Here is the markup to style the navigation:



header {
    background: #4D4DDB;
    color: white;

    padding: .5rem 0;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 90%;
    margin: 0 auto;
}


.nav-container .logo {
    font-size: 2rem; 
    font-weight: bold;  
}

.nav {
    display: flex;
    flex-grow: 1;
}

.nav--ul__one {
    margin: 0 auto;
}

.nav-container, .nav--ul__one,
.nav--ul__two {
    display: flex;
    gap: 1.6rem;
    font-size: 1.2rem;
}

.hamburger-menu {
    display: none; /* Hidden by default for larger screens */
    cursor: pointer;
}

Our navigation bar would look like this:

Next, let's add some media query to make our navigation bar mobile responsive.



@media (max-width: 700px) {
    .nav-container .logo {
        font-size: 1.2rem;
        z-index: 2;
    }

    .nav {
        flex-direction: column;
        gap: 2rem;
    }

    .nav--ul__one,
    .nav--ul__two {
        flex-direction: column;
        gap: .6rem;
    }

    .hamburger-menu {
        display: block;

        z-index: 2;
    }

    .nav {
        position: absolute;
        top: 0;
        right: -100%;
        bottom: 0;
        width: 100%;

        padding-top: 6rem;

        align-items: center;
        text-align: center;
        background-color: #4D4DDB;
        color: white;

        transition: 0.15s ease-in-out;
    }

    .nav.active {
        right: 0;
    }

}

First, this arranges the elements on small screens, and most importantly, making the nav slide in from the right when active but of course, it is not functional. we'll do that next.

Here is the result so far:

Now, let's work on the functionality in the next section.

Step 3 - Add JavaScript Functionality

Here are the steps we'll use to add javascript functionality to the navigation bar:

Get references to the hamburger-menu and nav
Add a click event listener to the hamburger-menu
Toggle the active class on the nav to show/hide it



const hamburgerMenu = document.querySelector(".hamburger-menu");
const nav = document.querySelector(".nav");

hamburgerMenu.addEventListener("click", () => {
    nav.classList.toggle("active")
});

When the hamburger-menu is clicked, it toggles the visibility of the menu by adding or removing the active class.

Final result:

And with this, you’ve successfully built a mobile responsive navigation bar using just HTML, CSS, and JavaScript.

Conclusion

I sincerely hope you found this post interesting or useful. If you did, kindly react to it and share with your friends or follow my account so you won't miss any future postings. Thanks for reading.

How to test and analyze website performance with lighthouse

Umar Yusuf — Wed, 27 Sep 2023 22:34:57 +0000

Lighthouse is an open-source automated tool developed by Google, used for testing and improving the quality of web pages in terms of performance, accessibility, search engine optimization(SEO), and more.

In this post, we'll cover how you can use lighthouse to test and analyze any website for performance.

Before we start, let's understand the types of workflows lighthouse offers.

Lighthouse Workflows

lighthouse offers four workflows you can use to run series of test/audits on a web page:

In Chrome DevTools: You can directly test any web page from your Chrome browser and read your reports in a user-friendly format.
From the command line: This let's you automate lighthouse runs using shell scripts
As a Node module: Integrate Lighthouse into your continuous integration systems.
From a web UI: You can also run Lighthouse directly from a web UI and also link to reports without installing a thing.

We'll be using Chrome DevTools to learn how to test a web page for performance with lighthouse. You can check out any of the workflows above here:

With that out of the way, let's run lighthouse.

Run Lighthouse in Chrome DevTools

Use the following steps to run lighthouse test in your devtools:
Step 1: Download chrome for Desktop
Step 2: Go to the URL of the website you want to test
Step 3: Open chrome Devtools and click the Lighthouse tab

Lighthouse offers three modes you can use to run tests:

Navigation mode: The navigation mode is useful if you want to analyze a single page load.
Timespan mode: Timespan is used to analyze user interactions on a web page
Snapshot mode: It typically analyzes the page in a particular state

learn more about each mode

Step 4: Select Navigation mode, and since we are testing only for performance, uncheck the other categories except for performance.
Step 5: Click Analyze page load to run lighthouse.

After 30 to 60 seconds, Lighthouse gives you a report on the page.

Performance Analysis

Lighthouse reports your website performance based on five speed metrics, each measuring some aspect of page speed (also called "load speed")

First Contentful Paint (FCP): Measures the time at which the first image or text becomes visible to users.
Largest Contentful Paint (LCP): It calculates the amount of time a page takes to load it's largest element to users.
Total Blocking Time (TBT): Measures the amount of time a page is blocked from reacting to user input, for example, a mouse click
Cumulative Layout Shift (CLS): Measures the number of layout shifts that occurs as user assess the page.
Speed Index (SI): Shows how quickly the content of a page is loaded.

After Lighthouse is done testing your website, it assigns an overall performance score to a page based on how it performed for all these metrics. The score can be anything from 0 to 100.

A score between 90 and 100 indicates the page is well optimized for user experience.
Anything less that 90 means there are some/significant number of resources on your page that are slowing things down, therefore affecting the overall page experience.

Lighthouse also gives you suggestions. Which you can implement the performance of your web page.

To make you feel a little bit better :-)
Lighthouse also gives you a report of tests your website passed.

Conclusion

In this article, you have learned how to test your website's performance with lighthouse. You can also test your website for things like accessibility, SEO, and more.

If this article was helpful to you, please react to it. Doing so will help me in writing better articles.

How to deploy a React application with Netlify in two simple ways

Umar Yusuf — Sat, 02 Sep 2023 10:47:50 +0000

Netlify is a service which offers a development platform that automates builds, deployments and manages your websites. It’s one of the fastest and easiest deployment solutions out there.

In this article, you will learn how to deploy your React application with Netlify in two simple ways.

Before we get started, let's get you signed up to netlify!

Signup to Netlify

Use the following steps to sign up to netlify:
Step 1: Go to app.netlify.com and click the signup button.

You can choose any of the options to signup to netlify, for this example we will use GitHub

Step 2: You will be taken to the authentication page. Input your Github username and password to continue to netlify

You would be asked to verify your email (email associated with your GitHub account):

After that, you should see something like this but not exactly, because the image below is an already existing account, hopefully you get the idea:

Deploy to Netlify

Netlify offers three methods you can use to deploy your app, but we are going to focus on just two.

1. Drag and Drop

Use the following steps to deploy your app using drag and drop
method:

Step 1: Go to the react app you want to deploy in your code editor and run the following command:

npm run build

The command above will build your react app for production.

After that a build folder named dist will get generated. The folder contains all the production-ready files of your application.

Step 2: Go to your netlify dashboard, click the Add new site button and choose Deploy manually

You will be taken to the drag and drop page where you will upload the dist folder generated earlier.

After uploading your dist folder, wait a few seconds and you should see something like this:

Click the open production deploy button to see your deployed app!

Redeploying App

To redeploy your app after making any changes to your code, use the following steps:
Step 1: Rebuild your app again as we have done earlier.
Step 2: Go to your site dashboard (your existing deployed site) and click theDeploys option
Step 3: Scroll down and re-upload your app dist folder again

Changing Site Name

To change your site name, Use the following steps:
Step 1: Click the Options button and go to Deploy settings
Step 2: Navigate to Domain management option and click it:

Step 3: Under Production domains, click the Options button and edit your site name:

2. Continuous Deployment

According to netlify:

Continuous deployment works by connecting a Git repository to your Netlify site and keeping the two in sync. When you push to Git, we run your build tool of choice on our servers and deploy the result.

Similar to what we have done earlier, go to your dashboard, click add new site button and select import an existing project

After doing so, use the following steps to deploy from an existing project:

Step 1: Choose any of the options provided by netlify. For this example, we will choose Deploy with GitHub

After that, you will be asked to authorize your netlify to deploy any of your GitHub repository.

Step 2: Select the repository you want to deploy

Step 3: Select the branch you want to deploy from and configure your build settings, we will use the default settings for this example.

After that, scroll down, click the Deploy button to deploy your app

Conclusion

In this article, you have learned two ways you can deploy your react application with netlify through practical steps. This process can also be used to deploy any other frontend JavaScript libraries like Angular, Vue and more.

If you've gotten to this part and you found this article to be helpful, kindly react and comment on it, doing so will help me in writing better articles.

Handling Browser Storage: cookies, local storage, session storage

Umar Yusuf — Tue, 22 Aug 2023 16:57:17 +0000

Modern web browsers offer some number of ways that enable browsers to store data on the user's computer system, and then retrieve it when it is needed, therefore, letting you persist data for long-term storage, retain the user's specific settings for your site, and more. In this article, we will explore three of the most used browser storage options, their use cases, security risks, and how to mitigate them.

In this article:

Cookies
Local Storage
Session Storage

Cookies

Cookies (also called HTTP cookies) is a piece of data that a server sends to a user's web browser. The user's web browser stores the cookie and then sends it back to the same server with later requests.

To get a better understanding of how cookies work. let's use this example, imagine you are at a restaurant. The waiter gives you a special card (cookie) with your name on it. You keep the card and show it to the waiter whenever you go back to the restaurant. The waiter knows who you are and what you like. Cookies work the same way.

Use Cases

Cookies are mainly used for the following purposes:

Session management: Cookies are usually used to manage user sessions. They store temporary information, therefore, helping users stay logged in as they navigate through different pages of the website. Some other examples are shopping carts, game scores, or anything else the server should remember.
Personalization: Cookies are also used to store user preferences and settings, enabling websites to tailor the experience to individual users. This could include things like theme settings, language preference and other settings.
Tracking: Cookies are often used by websites and advertisers to record and analyze user behavior.

Cookie Security

Cookie security is the act of protecting the information stored in cookies, which websites use as small text files to retain user preferences and sessions.

While cookies enhance user experiences, they can also expose security risks such as session hijacking, cross-site scripting(XSS), and cross-site request forgery(CSRF).

Here are some ways to mitigate the security risks associated with cookies:

Validate and sanitize user inputs to prevent XSS attacks that might target cookies
Make sure to implement proper authentication and authorization mechanisms to prevent session hijacking
Use secure HTTPS connections to transmit cookies
Regularly audit and validate cookies to prevent unauthorized usage
Implement secure cookie attributes like HttpOnly and Secure to limit cookie exposure

Learn more: using HTTP Cookies

Local Storage

Local storage is a client-side web browser storage that enables websites and apps to store persistent data with no expiration date. This means that local storage holds the data even if the user refreshes the web page or closes the browser.

More properties of local storage include:

Local storage offers a high storage limit of around 5MB
It is only accessible through client-side JavaScript and cannot be accessed by the server
The syntax is straightforward
Local storage data is not automatically sent to the server with every HTTP request, unless the data is specifically requested

Use Cases

Local storage can be used in:

Keeping track of user's shopping cart until they make a purchase
Storing frequently used data in order to reduce the need for repeated server requests therefore improving website performance and reducing costs
Storing user's preferences and settings, theme choices to personalize user experience
Keeping track/saving of partially completed forms or drafts so users can resume their work later

Accessing local storage

Local storage is an object that is accessed through the browser's window interface. The local storage object has a setItem() function that accepts two arguments:

key: The key acts as a unique identifier to the stored data
Value: The stored data itself

To store data in local storage, open the console tab in your browser's dev tools, and run the following command to assign the string value of "How are you today?" to the key-labeled question:



localStorage.setItem("question", "How are you today?");

To see what you have stored in local storage, you can use the developer tools in your web browser. For example, in Firefox, click the storage tab to view the contents of local storage.

You should see something like this:

The local storage object also offers two other functions removeItem() and clear().

removeItem() deletes the data stored for a specific item. For example, the following command deletes the data we stored above using it's key:



localStorage.removeItem("question");

And the below command deletes all local storage data in the browser's memory:



localStorage.clear()

Local Storage Security

Local storage in web browsers poses some security risks if not managed properly. Some of these risks include:

If your application is vulnerable to XSS attacks, malicious scripts injected into your web pages can access and manipulate data in local storage, since JavaScript running on a page has access to it. This can lead to data theft or tampering.
Storing sensitive data such as user authentication tokens and personal data in local storage without proper encryption can expose the data to potential attacks.
Unless removed explicitly, data in local storage persist indefinitely thereby increasing the risk of data exposure.
Although local storage follows the same-origin policy, there are techniques such as CSRF attacks that can be used to trick a user into performing actions that lead to data being stored in local storage.

Here are some ways to mitigate local storage security risks in your application:

Encrypt sensitive data such as user authentication and personal settings/data before storing it to local storage.
Validate user inputs to prevent XSS attacks.
Frequently clear outdated or unnecessary data from local storage.
Implement proper access controls and authorization checks.

Session Storage

Session storage is another form of client-side web browser storage. session storage shares similar properties with local storage but with one key difference:

The data stored in session storage is only available for as long as the user's browser session is active. When the user closes the tab or browser, the data is cleared automatically.

Use Cases

Session storage is suitable for storing data that is only needed during a single user session, such as shopping cart or temporary user preferences.
Session storage can help in maintaining the state of a web application across different views or components.
Session storage can also be used to store form data temporarily as users navigate between pages to prevent data loss, if they accidentally close the browser or tab.

Accessing Session Storage

Similar to what we have done in local storage, you can use the setItem() function to assign the string value of "How are you today?" to the key labeled question:



sessionStorage.setItem("question", "How are you today?")

As we've seen earlier, you can go to the storage tab of Firefox to view the contents of session storage.

Similarly, like local storage, the data stored in session storage can also be deleted by clearing out the browser’s memory or with the removeItem() and clear() functions:



sessionStorage.removeItem("question")



sessionStorage.clear()

Session Storage Security

Like other client-side storage, session storage has certain security considerations that you should be aware of, to ensure user data protection and to mitigate potential security risks. Here are some potential risks associated with session storage:

Similar to other web storage mechanisms, session storage can be vulnerable to XSS attacks
Potential attackers can hijack user's session and gain access to the data stored. This makes it crucial to implement robust session management and authentication mechanisms
Sensitive data stored in session storage such as user authentication tokens can be exposed, if an attacker gains access to the user's device or compromises the browser session

To mitigate these security risks when using session storage, consider the following best practices:

Encrypt sensitive data before storing it to add an additional layer of security
Always validate user inputs to prevent XSS attacks
Clear data from session storage as soon as it's no longer needed to reduce or prevent the risk of data exposure
Implement strong session management to ensure your application is secure and includes mechanisms to prevent session hijacking

Conclusion

Browser storages such as local storage and session storage help developers store and manage data on the client side, facilitating faster access to information, reducing server load, and improving user experiences in web applications.

In this article we explored the three most used browser storage options, their use cases, security risks, and ways to mitigate them.

Getting started with React: how to create a basic React application

Umar Yusuf — Sat, 12 Aug 2023 10:19:26 +0000

React is a JavaScript front-end library created by Meta (formerly known as Facebook). React is a free and open-source front-end library used for creating interactive websites and mobile user interfaces (UI for short). In this article, you will learn how to set-up and create a basic react application. This article will not go in-depth about react features.

To get the most out of this article, you should have some basic knowledge of Node Package Manager(NPM). Take some time to familiarize yourself with it: Beginner's Guide to using NPM

Before we get started, let's discuss some benefits of React

Benefits of using React

React offers tons of benefits, which makes it stand out from other Front-end frameworks like Angular, Vue, Svelte etc.

Some of the benefits React offers include the following:

React code is simple and easy to maintain due to its modular structure, therefore saving huge amount of time and money to businesses compared to other front-end frameworks.
Components in React are declarative, making it easy to build interactive UIs. you only need to describe how you want your UI to be and React will take care of the rendering.
With React, you can build reusable components which can be used in multiple parts/sections of your application, therefore making it easy to maintain and develop your application over time.
When it comes to relevant resources and support, React has a large and active developer community which you can rely on.

Now with that out of the way, let's get started!

Installing React Application

We will be using visual studio code to install and create our React application but you can use any of your preferred code editor.

Step 1: Launch your code editor, toggle the terminal and then run the command below to install React:

npm create vite@latest

After running the above command, you will be prompted to perform the following steps:

Create a project name
Choose a framework
Select a variant

Step 1: We will name our project new-project, but you can name it whatever you wish.

Step 2: Choose React

Step 3: Select JavaScript

Next, run the following commands to start the installation process:

cd new-project
npm install

The installation process will take some few minutes. so just exercise some patience till it is completed.

The folder structure should look like this:

Step 2: Use the command below to run your React application

npm run dev

When the process is done, you should see something like this:

Hover over http://127.0.0.1:5173/ and click it to open and view the React application in your browser or you can just copy and paste it to your browser.

You should see something like this:

Creating React Application

For this example, we'll be creating the classic "Hello World".

Use the following steps to create your React application:

Open App.jsx, index.css and App.css files in your React Application folder
Delete all the default template code
Write the code below in your App.jsx file

const App = () => {
  return (
    <h1>Hello World</h1>
  )
}

export default App

Your App.jsx file should look like this:

Save the changes you made in you App.jsx file and check your React application in the browser.

You should see something like this:

Congratulations, you have created your first React Application

Conclusion

In this article, you have gotten an overview of React, learned its benefits and how to create a basic React application.

If you are interested in learning the in-depth features of React, you can check out this free online React course by Bob Zirol here: Learn React