Forem: Kaja Uvais

40+ Frontend Development Project Ideas to Try in 2025

Kaja Uvais — Sun, 26 Jan 2025 11:52:44 +0000

Beginner Projects

Calculator
Image Gallery
Responsive Navigation Bar
Clock App
Color Palette Generator
Quiz App
Simple Landing Page
Weather App
To-Do List App
Contact us Form

Read the full blog tutorial here

Expanding Slider using HTML and CSS

Kaja Uvais — Fri, 03 Jan 2025 04:16:56 +0000

In this tutorial we'll create an expanding slider using HTML and CSS. Imagine you're building a portfolio to showcase your projects, and you want to display it on a website. This expanding slider is best for your website. where images expand when hovered over. Lets get started.

HTML

<div class="container">
  <div class="slider">
    <div class="slide">
      <img src="image1.jpg" alt="Image 1">
    </div>
    <div class="slide">
      <img src="image2.jpg" alt="Image 2">
    </div>
    <div class="slide">
      <img src="image3.jpg" alt="Image 3">
    </div>
    <div class="slide">
      <img src="image4.jpg" alt="Image 4">
    </div>
    <div class="slide">
      <img src="image5.jpg" alt="Image 5">
    </div>
  </div>
</div>

CSS

html,
  body {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  .slider {
    width: 80vw;
    height: 80vh;
    display: flex;
  }
  .slide {
    position: relative;
    flex: 1 0 auto;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
  }
  .slide:hover {
    flex: 5;
  }
  .slide img {
    position: absolute;
    max-height: 100%;
    min-width: 100%;
    left: 50%;
    transform: translateX(-50%);
  }

.html, body - We made the margin zero so that the whole width and height of the page are used. Then there's no empty space around the text.

.container - We centered the container horizontally on the page. This is because this is where it will hold the slider in the middle of the screen.

.slider - the slider is set to take up 80% of the width and height of the screen. The display: flex makes the slides (images) line up in a row, beside each other.

.slide - Each slide has a flexible size, starting at an equal width. The transition makes any changes smooth, allowing the slides to grow when hovered over.

.slide img - The image will always fit within the slide because it's in the middle of each slide and won't get stretched out in some odd shape.

.slide{ flex: 5; } - This is the magic part! When you hover over a slide it grows up in size, that takes up more space (5 times its original width). That makes the hovered image pop out.

Conclusion

Creating this kind of responsive image slider is a great way to add modern and interactive elements to your website. You do not need any JavaScript, only a few lines of HTML and CSS! Try more slides, change sizes, or alter the hover effects as required for your design work.

Happy coding.

10 Rare HTML Attributes You Should Know About

Kaja Uvais — Sat, 28 Dec 2024 04:12:48 +0000

HTML is full of hidden gems that many developers often look past. These rare html attributes can improve your web development process, enhance performance, and make interactivity of your projects quite unique.

Attributes in HTML provide additional information about the elements of HTML.

1. Hidden

The hidden attribute is used to hide the element on the web page without removing it from the DOM. you can use this attribute with all HTML elements.

<p hidden>This text is hidden.</p>

2. Contenteditable

The contenteditable attribute is used to specify whether the element’s content is editable or not. It allows users to modify the content within the element.

 <div contenteditable="true">You can edit this text!</div>

3. Spellcheck

You can apply the spellcheck attribute to elements (except for passwords), content-editable elements, and element to enable or disable spell checking by the browser.

<textarea spellcheck="false">No spell check here!</textarea>

4. Title

The title attribute is used to provide additional information about an element. when the user hover over the element the information is display it acts like a tooltip.

<a href="document.pdf" title="Click to download">DownloadFile</a>

5. Accept

you can use accept attribute with the element, only for the file type, to specify which types of files a server accepts.

<input type="file" accept=".jpg, .jpeg, .png">

6. Autocomplete

You can control the autocomplete feature of a browser through using the autocomplete attribute with elements like form, input, and textarea.

<input type="text" name="name" autocomplete="on" />

7. Inputmode

The inputmode attributes provides a hint about the type of data that will be entered into a text input.

<input type="text" inputmode="numeric" placeholder="Phone numbers">

8. Download

The download attribute in HTML allows you to specify that a file should be downloaded when a user clicks on a link.
The download attribute is used in a (anchor) tags. You can specify the name for the downloaded file and tell the browser that the target resource should be downloaded instead of navigating to it.

<a href="document.pdf" download="document.pdf">Download PDF</a>

9. Poster

The poster attribute is used in video element to display an image until the user plays the video.

<video controls poster="image.png" width="500">
    <source src="video.mp4" type="video/mp4" />
</video>

10. Srcset

The srcset attribute in HTML is a powerful tool used with the tag to provide multiple image sources for different screen resolutions or device types. It helps the browser to select different images for different screen sizes.

<img src="image.jpg" srcset="image.jpg, image-2x.jpg, image-3x.jpg">

That’s all for today.

Thanks for reading.

How to Become a Java Developer in 2025

Kaja Uvais — Sun, 22 Dec 2024 03:25:46 +0000

Learning Java can seem like a big task, but breaking it down into simple steps makes it much more manageable. Whether you're just starting out or looking to advance your skills, this step-by-step guide will help you master Java at your own place.

Download the Java handwritten Notes Below

Click Here

4 Steps to master Java

Core Java
Advanced Java
Frameworks
Practice and Projects

Step 1: Start with Core Java

The first step is to learn the basics concepts like variables, loops, methods, and object-oriented programming (OOP). These basics are the foundation of everything you'll do in Java, so it’s important to understand them well.

Tip: Practice writing small programs to reinforce what you learn. For example, create a program that calculates the sum of two numbers or prints out a multiplication table.

Step 2: Move on to Advanced Java

Once you're comfortable with the basics, it's time to explore Advanced Java.

This includes more complex topics like multithreading (which allows your program to do multiple tasks at once), networking, and connecting your Java programs to databases using JDBC.

These skills are essential for building powerful, real-world applications.

Tip: Try building a simple chat application to understand networking or connect your program to a database to store user information.

Step 3: Learn Frameworks

Frameworks are tools that help make your code cleaner and easier to manage.

Two of the most popular Java frameworks are Spring and Hibernate.

Spring is particularly useful for building web applications, while Hibernate helps with database management.

You can start with either one, but Spring is a great choice for beginners because of its wide range of features and strong community support.

Tip: Start with small projects using Spring, like creating a basic web application where users can sign up and log in.

Step 4: Practice with Projects

The best way to truly master Java is through practice.

Build projects that challenge you to apply what you’ve learned.

Start with small applications, and as you gain confidence, move on to larger, more complex projects.

This hands-on experience will help you solidify your skills and become a proficient Java developer.

Tip: Begin with a simple to-do list application, then gradually take on more complex projects, like an e-commerce site or a social media platform.

Get Your Free Java Roadmap

I’ve created a detailed roadmap that outlines these steps in more depth.

Click here to download the roadmap

Download

Top Free Hosting Services for Web Developers in 2025

Kaja Uvais — Mon, 16 Dec 2024 07:10:13 +0000

Do you want to host your website or personal portfolio but are worried about the cost of hosting? Don’t worry! There are several free hosting services available to help you get started without spending any money. In this post, I'll share the best free hosting services for web developers and what they offer.

If you are a beginner, you can practice and learn without spending money. Additionally, you can showcase your projects to clients or companies.

1. GitHub Pages

GitHub Pages is perfect for simple websites. It's free and allows you to turn your projects into live websites.

Features of the free plan:

You can customize your website's domain name using a CNAME.
Unlimited site visits.
100 GB of bandwidth per month.
No Ads.

2. Netlify

Netlify is a platform that makes website deployment easy. It's very good for developers who would love to work with modern tools. You can also deploy a React project to this site.

Feature of the free plan

It Automatically updates your site when you push to Git.
you can deploy unlimited websites.
Free custom domain names.
Fast global delivery network.
Serverless functions.

3. Vercel

Vercel is used for developers who use frameworks like React or Next.js. It is fast and easy to use.

Feature of the free plan

Custom domain with full SSL functionality.
It is designed for speed and performance.
Provides Serverless Functions.
Automatically optimize images (1000 images/month for free version)

4. Render

Render provides free hosting for web applications, static sites, and APIs. It’s a best platform for modern developers.

Feature of the free plan

Automatic Deploys from Git.
Custom Domains with free TLS.
Free Bandwidth and storage(100GB/month).
Free SSL certificates.

5. Firebase

Firebase is a free hosting service offered by Google for static and dynamic web apps.

Feature of the free plan

Superfast content delivery.
It connects easily with other Firebase services.
Supports custom domains.
Allows multiple pages to be added to the same project.

6. Hostman

Hostman simplifies the process of deploying websites and web apps with its free hosting option.

Feature of the free plan

Allows to create 3 websites.
Easy-to-use interface.
It automatically build from Git.
Free SSL-certificate.

Conclusion

Free hosting is a great way to start your web development journey. Try one of these free hosting options today and start building your website without spending any money!

If you like, you can subscribe my youtube channel. I create awesome web contents. Subscribe

Thanks For reading.

Learn HTML in 5 Days

Kaja Uvais — Fri, 13 Dec 2024 03:09:06 +0000

HTML Roadmap

Here's a 5-day roadmap to get you started with HTML, complete with resources. This plan will give you a solid foundation in HTML, allowing you to create simple web pages and understand the structure of web content. And also you can must practice it

Scroll Down to get the HTML Roadmap PDF

Day 1: Introduction to HTML

What is HTML?
Basic structure of an HTML document
Common HTML tags (e.g. html, head, body, title, h1- h6, p, a, img, div, span)

Day 2: HTML Elements and Attributes

HTML elements and their attributes
Inline vs. block elements
Nesting elements
Lists (ul, ol, li)
Tables (table, tr, td, th)

Day 3: Forms and Input

HTML forms ()
Form elements (input, textarea, button, select, option)
Form attributes and methods

Day 4: Semantic HTML and Multimedia

Semantic HTML tags (header, nav, article, section, footer)
Multimedia in HTML (audio, video)
Embedding content (iframe)

Day 5: Advanced Topics and Best Practices

HTML5 new elements (canvas, svg, datalist, output, progress)
Best practices for writing clean and maintainable HTML
Accessibility basics

Click here to download the pdf

By following this roadmap and utilizing the provided resources, you'll be well on your way to becoming proficient in HTML. Practice regularly

Follow our blog for useful content related like web development and coding

If you like this content: Buy me a coffee

How to Create Responsive Navbar Using HTML, CSS, and JavaScript

Kaja Uvais — Wed, 11 Dec 2024 03:08:00 +0000

A navbar(navigation bar) is like a menu for your website that helps visitors easily find important pages like Home, About, Services, and Contact. A good navbar makes your website easy to use and look professional.

But what if somebody visits your website on a smaller screen, like a phone or tablet? A normal navbar looks messy or it takes too much space. That's why we need a responsive navbar.

A responsive navbar changes its layout depending on the screen size. That is, if on the computer screen, it all sits in a row-but on a phone, that would shrink into a simplistic "hamburger" menu to make sure the website acts and looks nice on each device. Recently I teach about how to create Login form using HTML and CSS. I hope that blog will also help you to boost your CSS skills.

In this tutorial, we are going to learn how to create a responsive navbar using HTML, CSS, and a little JavaScript. Don’t worry—it’s easier than you think! Let’s get started.

Video Tutorial of Responsive Navbar

youtube.com

I created a detailed video tutorial about how to create a responsive navbar using HTML, CSS, and JavaScript. In the video, I’ve explained everything in simple terms and made it easy to follow, even if you’re a beginner.

Steps to Create Login Form

Create a new folder by naming it whatever you like, eg: navbar.
Inside it, you create the following files: index.html, style.css and app.js.
In this project, we will use Google Fonts(poppins) and Fontawesome for icons.

I created the detailed blog and give the full source code in my website

Source Code

If you like, you can subscribe my youtube channel. I create awesome web contents. Subscribe

Thanks For reading.

How I Master JavaScript in 30 Days

Kaja Uvais — Mon, 09 Dec 2024 05:59:51 +0000

JavaScript is an essential language for web development, enabling interactive websites and powerful web applications. Whether you're a beginner or have some experience in programming, following a structured roadmap can make your JavaScript learning journey more effective and enjoyable. Here's a comprehensive roadmap to guide you through learning JavaScript.

U can downlaod the javscript roadmap in my website link below

Click Here

Core Concepts

Introduction to JavaScript
The JavaScript Glossary
JavaScript syntax
Lexical Structure
Expressions
Types
Variables
Math Operators
Functions
Immediately-Invoked Function Expressions IIFE
this
Arrow Functions
Loops
Loops and Scope
Arrays
Regular expressions
Template Literals
Semicolons
Strict Mode
JavaScript Dates
Math Object
Asynchronous programming and
Callbacks
JavaScript Timers
Promises
Async and Await
JavaScript Event Loop
Events
UI Events
Forms, controls
Document and resource loading

Advanced Topics 👇

Functional Programming in JS
Advanced Working With Functions
Closures
Regular Expressions
Unicode in JS
Storing data in the browser

I share the JavaScript tutorial and projects next blog so follow our blog and stay update with me

If you enjoy my posts, consider buying me a coffee. It means the world!

Give your support

JavaScript handwritten Notes

23 React Projects with Source Code

Kaja Uvais — Sun, 08 Dec 2024 05:27:30 +0000

React is a powerful JavaScript library for building interactive user interfaces quickly and easily. Real world projects is one of the top way to learn for both beginners and experienced developers. In this blog post, and we will cover 23 interesting projects with source code

Go down for source code

23 React Projects

Birthday Reminder
Tours
Reviews
Accordion
Menu
Tabs
Slider
Lorem Ipsum
Color Generator
Grocery Bud
Navbar
Sidebar and Model
Cart
Stripe Menu
Unplash Menu
Cocktails
Markdown Preview
Random Person
Pagination
Dark mode
Movie DB
Hacker News
Quiz

Click the link below for source code

Click Here

Top 3 Free Web Development Courses

Kaja Uvais — Sat, 07 Dec 2024 04:37:30 +0000

If you are beginner to learn web development? Here are three free courses that cover the basics of HTML, CSS, and JavaScript.

Course Link

Note: You can only access the course for free by selecting the audit option when you enroll. If you need certification, you will need to pay.

1. Introduction to Web Development with HTML, CSS, JavaScript by IBM

IBM's course teaches the essentials of web development:

HTML for building the structure of websites
CSS for designing and styling
JavaScript for adding interactive features.

This course includes practical projects, giving you hands-on experience and a project for your portfolio.

2. Introduction to Web Development by Great Learning

Great Learning offers a simple course for beginners. It covers:

Basic HTML and CSS for building simple webpages.
Intro to JavaScript to make pages interactive.

With easy-to-follow lessons, this course is ideal for anyone new to web development.

3. Introduction to Web Development by the University of California

This course from University of California makes for a well-rounded introduction into web development as it covers:

HTML, CSS, and JavaScript basics
Best practices in modern web design

With content from a reputable university, it’s a great option to build a solid foundation in web development.

Conclusion:

These free web development courses from IBM, Great Learning, and the University of California are perfect for beginners. Each course covers the basics of HTML, CSS, and JavaScript, giving you the skills to start creating websites.

Start today and take the first step toward building your own websites.

Happy learning!

100+ Frontend Projects to level up your Skills

Kaja Uvais — Fri, 06 Dec 2024 03:09:18 +0000

Are you new to frontend development and struggling to find projects to work on?. Whether beginner or pro, finding some interesting projects to work with can be a challenge. The practice of real projects makes you understand concepts much better, improve your coding skills, and build an impressive portfolio.

In this post, I'll share the GitHub repository that has 100+ frontend projects, complete with source code!

There is an excellent GitHub repository with over a hundred frontend projects that also has source code. You'll find projects in various stages, from the beginner level to advanced.

I’m sharing a few projects here

Age Calculator
Architecture Website Template
BMI Calculator
Blog Application
Contact Form
Calculator App
Countdown Timer
Ecommerce Website
Expense Tracker
Login Page
Password Generator App
TO-DO List
Youtube UI Clone
Image Finder - React Application
Parallex Website

Scroll down for the github project link

Give your support

How to Use This Repository

Once you find this repository (scroll down), here are a few tips on how to make the most of it:

Select a Project that Matching Your Skills

Start with projects where you feel comfortable, gradually taking on more challenging projects as your skills grow. It will give you increasing confidence and see real progress in your work.

Analyze the Code, Then Write Your Own

Study the source code so you know how the project works. Try to rebuild parts on your own in order to really learn them and encourage critical thinking.

Make Projects Yours

When you have successfully replicated a project, try to make it unique. Change its styling, add new features, or optimize the code. This will help develop problem-solving skills and make you understand better.

Practice Consistently

All of this requires building consistency. Ensure you have some time every week to work on a new project or improve an existing one.

Regular practice makes you better developer, so let’s start building and practicing today!

Project Link

Thanks for reading

Create a Infinite Scrolling Marquee with HTML and CSS

Kaja Uvais — Tue, 26 Nov 2024 10:37:14 +0000

Adding animations to your website can make your website more interactive and wonderful. one of the best way to achieve this is by creating a scrolling marquee — a very sleek animation that slides over smooth content like skills or tools, bringing your website stand out.

In this tutorial, I’ll show you how to create a Infinite scrolling marquee using just HTML and CSS.

What is a Marquee?

A scrolling marquee is a simple animation where content moves across the screen endlessly. This can be used in order to showcase text like skills, technologies and features.

Let's Code it

HTML Structure

First create the html structure

<div class="scroll" style="--t:20s">
    <div>
      <span>HTML</span>
      <span>CSS</span>
      <span>Javascript</span>
      <span>React JS</span>
      <span>Node JS</span>
      <span>SQL</span>
      <span>Git</span>
      <span>AWS</span>
      <span>AZURE</span>
    </div>
    <div>
      <span>HTML</span>
      <span>CSS</span>
      <span>Javascript</span>
      <span>React JS</span>
      <span>Node JS</span>
      <span>SQL</span>
      <span>Git</span>
      <span>AWS</span>
      <span>AZURE</span>
    </div>
  </div>

  <div class="scroll" style="--t:15s">
    <div>
      <span>Typescript</span>
      <span>Redux</span>
      <span>Bootstrap</span>
      <span>Material UI</span>
      <span>Tailwind</span>
      <span>SCSS</span>
      <span>Webpack</span>
      <span>Babel</span>
      <span>NPM</span>
      <span>Jenkins</span>
    </div>
    <div>
      <span>Typescript</span>
      <span>Redux</span>
      <span>Bootstrap</span>
      <span>Material UI</span>
      <span>Tailwind</span>
      <span>SCSS</span>
      <span>Webpack</span>
      <span>Babel</span>
      <span>NPM</span>
      <span>Jenkins</span>
    </div>
  </div>

  <div class="scroll" style="--t:15s">
    <div>
      <span>Rest API</span>
      <span>Docker</span>
      <span>Linux</span>
      <span>SEO</span>
      <span>Agile Methedology</span>
      <span>Jira</span>
      <span>SDLC</span>
    </div>
    <div>
      <span>Rest API</span>
      <span>Docker</span>
      <span>Linux</span>
      <span>SEO</span>
      <span>Agile Methedology</span>
      <span>Jira</span>
      <span>SDLC</span>
    </div>
  </div>

Each contains a skill or item, and the two identical blocks ensure continuous scrolling.

CSS

Now add the css style for scrolling

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
  }

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #161616;
  }

  .scroll {
    position: relative;
    display: flex;
    width: 700px;
    overflow: hidden;

      -webkit-mask-image: linear-gradient(90deg, transparent, #fff 30%,
    #fff 70%, transparent);

  }

  .scroll div {
    white-space: nowrap;
    animation: animate var(--t) linear infinite;
  }

  .scroll div:nth-child(2) {
    animation: animate2 var(--t) linear infinite;
  }

  @keyframes animate {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  @keyframes animate2 {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-200%);
    }
  }

  .scroll div span {
    display: inline-flex;
    margin: 10px;
    padding: 5px 10px;
    border-radius: 5px;
    text-transform: uppercase;
    background: #333;
    color: #fff;
    transition: 0.5s;
  }

  .scroll div span:hover {
    background: #f52789;
    cursor: pointer;
  }

How It Works

Smooth Animation:

The @keyframes rule specifies the smooth scrolling effect, and the animation property applies it to the

Seamless Looping:

Two identical

sections create the illusion of endless scrolling by starting one block mid-way.

Hover Effect:

When you hover on an item, its background changes to this bright pink (#f52789).

Customize Your Marquee

Change the Items: Update the tags to display your own content, like services, tools, or testimonials.

Adjust Speed: Use the --t CSS variable to control the animation duration. A smaller value makes it faster.

Change Colors: Customise the background and text color to suit your theme on the website.

Conclusion

A scrolling marquee is one simple yet powerful feature to make your website engaging. This tutorial will teach you how to easily create a scrolling marquee tailored to your content and design preferences. Try this out.