Forem: Rajshree Vatsa

Classes in JS before learning React

Rajshree Vatsa — Mon, 06 Sep 2021 11:57:18 +0000

Hello Everyone...👋
In this Post, we briefly look at object-oriented programming concepts in JavaScript like classes and objects. Do visit previous articles of this series. And feel free to suggest me new topic to talk about in the 💬.

What is a class?

A class is a kind of separate mini-program with a context of its own — methods (functions) and properties (variables). Disparate instances (called objects) of a class can be created and treated as variables.

Create a JavaScript class

 class Author {
  constructor(firstname, lastname) {
    this.firstname = firstname;
    this.lastname = lastname;
  }

  getName() {
    return `${this.firstname} ${this.lastname}`;
  }
}

//A new object can be created with the new keyword and 
var me = new Author('Rajshree', 'vats'); 
//the ‘constructor’ of the class can be called at the same time

console.log(me.getName());

Various class methods such as getName() can be used to read or write the properties of the object. The console.log() method prints whatever is passed as an argument to it.

Object Creation in JavaScript

JavaScript objects are containers for named values, called properties and methods. Objects are variables too. But objects can contain many values.
Here, we define two objects student1 and students2.

The named values, in JavaScript objects, are called
properties.

     const student1 = {   //common practice is to use `const`
     Name:"Rajshree",             
     Roll : '800',
     Cgpa : '8.5'
     };

An object method is an object property containing a function
definition.

 let student2 = {
 Name:"Rajshree",
 Roll : '800',
 Cgpa : '8.5',
 printScore() {
 console.log(this.Cgpa)
 }
}

The `this` keyword

The value of this depends on what context it is used in. So, if it is used in a function, it’s value will depend on how that function is invoked.
The ways this can be assigned :

Implicit Binding : When the dot notation is used to call a function. 👇

getName() {
    return `${this.firstname} ${this.lastname}`;
  }

Explicit Binding : where the function is part of the object. 👇

var printName = function() {
  console.log(`My name is ${this.firstname} ${this.lastname}`);
};
var me = new Author('Rajshree', 'vats');
printName.call(me);

.call() can be used to explicitly bind a function to an object and .apply() to Pass all the arguments in one array.

bind() : .bind() sets a this context and returns a new function with a bound this context.

   var printName = function() {
  console.log(`My name is ${this.firstname} ${this.lastname}`);
   };

var me = new Author('Rajshree', 'vats');

// Here we bind the me object to the printName() and get a new function newPrintName()
const newPrintName = printName.bind(me);

Global Context : When this is used outside of any context such as a class, function, or object, it refers to the global object.
Arrow functions and this : Methods like apply(), and bind(), etc. don’t have any effect on this in an arrow function in JavaScript. The value of this remains the same as it was when the function was called.

Composition

Object composition, in programming, is just classes containing instances of other classes as attributes to implement the desired functionality instead of inheriting classes. How that is done in React and JavaScript is somewhat advanced.

Inheritance

Inheritance enables new classes to take on the properties and methods of existing classes. A class that another class inherits is called a superclass or base class. A class that inherits from a superclass is called a subclass or derived class.

However, inheritance is somewhat limited compared to class composition. composition makes the code dynamic and adaptable to change, it also introduces fewer bugs.

This was all for today!!!

I hope you liked it. Connect to me on Twitter if you have any doubts regarding this, or any suggestions for me 😊.

Functions in JS before learning React

Rajshree Vatsa — Sat, 04 Sep 2021 13:01:02 +0000

Hello Everyone 👋
Thanks for all the ❤️ 🔖 and 🦄 on the previous post. I use this space to share beginner friendly stuff about front-end development.
Today, let's talk about functions concepts in JavaScript and React.

Functions

A short introduction to JavaScript functions.
In JavaScript, functions are actually objects. They have attributes and methods too. The only thing that differentiates them from objects is that they can be called.
syntax

function sum(a, b) {
  return a + b;            
}

Ways to Declare Function in JavaScript

The most common ways are by using function declaration or by function operator.
Following are the different ways to declare a function :

Function Declaration
The most typical method, it allows hoisting i.e. can be used
before declaration.
```
function funcName(A1, A2...){}
```
Function Expression
It is most suitable to use when you want to assign your
function as an object to a variable.
```
 var var_name = function funcName(A1,A2..){
 };
```
Generator Function Declaration
A function that uses yeild keyword to return a Generator-
Iterator object on which next method can be called later.
```
 function* name(A1, A2..) {}
```
Generator Function Expression
```
  function* function_name(A1,A2..){}
```
Function Constructor
The Function keyword is actually a constructor which creates
a new function. This is the least preferred method.
```
   var var_name = new Function(A1,A2..,'FunctionBodyString');
```
Arrow Function

This function is used for its shorter syntax and to get rid of

this value.

      var var_name = (A1, A2..) => {};

Arrow Functions in React

Arrow Functions are a more concise way of writing functions, and are frequently used in React.

If there is only one statement inside function body then return and {} can be omitted. Also function keyword is not used.
In case of only one parameter, parameter parentheses is not used.
Use of Arrow functions prevent any errors caused by making use of this within callbacks.

 const arrowFunc = () =>
  'Hello';
 console.log(arrowFunc());

Higher-Order Functions

A “higher-order function” is a function that accepts functions as parameters and/or returns a function. A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOC is easier to understand when knowing Higher-order functions beforehand.

Example

 import React from 'react';
  export const doIncrement = state =>
      ({ counter: state.counter + 1 });

Map, filter, and reduce are some examples of HOF — and make transforming, searching, and summing easier!

.reduce()

  const Arr = [1, 2, 3, 4];

  const sum = Arr.reduce((last, current) 
  => {  
    return last + current;
    });

  console.log(sum); //will print sum

.filter()


   const Num = [1, 7, 2, 8, 9];
   const filterArr = Num.filter(n => {  
    return n > 5;
    });

.map()

  const usernames = ['A', 'B', 'C', 'D'];
  const message  = usernames.map(member => {
  return member + ' hello.';
   })

After learning about higher-order functions, all the fundamental knowledge is established to learn about React’s higher-order components.

Thanks for Reading

I hope it was helpful. See you on next post 😊.
github ⭐ linkedIn ⭐ Twitter

Operators and Object Destructuring in JS before learning React

Rajshree Vatsa — Thu, 02 Sep 2021 09:53:56 +0000

what is React and JSX?

REACT is an open-source JavaScript library to create user interfaces. It's popular among web developers for creating web applications. But React can be used to create cross platform applications through React Native.

JSX stands for JavaScript Syntax Extension. React uses a special syntax known as JavaScript XML (JSX). The HTML/XML is converted into JavaScript before the code is compiled. By using JSX, you can rely on JavaScript syntax for logic.

Why learning JavaScript before React?

Beforehand knowledge of JavaScript concepts helps you learn React smoothly without roadblocks. After learning React, I come to the conclusion that React is all about JavaScript. It boils down to JavaScript ES6 features and syntax, ternary operators, shorthand versions in the language. Also the JavaScript built-in functions (map, reduce, filter) or general concepts such as composability, reusability or higher-order functions.

If you know some JavaScript fundamentals well, it will make React learning smooth, and you can focus more on utilizing the functionalities of React itself.

Variables & Operators

Variables

var,const and let are the keywords used to declare variables. Let’s see how each of these differ from one another and when to use what?
Scope of var is Function in which the variable is declared. Scope of let and const is Block in which the variable is declared. ( Block scopes are code inside loops, iteration)

var isn't used widely because let and const is more specific, The variables assigned using const are read-only which means that once they are initialized using const, they cannot be reassigned. let is used when you want to re-assign the variable in future such as in a for loop for incrementing the iterator, const is normally used for keeping JavaScript variables unchanged.

Operators

JavaScript operators are categorized into two categories i.e., Unary(takes only one operand) and Binary(takes two operands) operators.

Binary Operators : following are the different types of binary operators:
- Arithmetic Operators (+, -, *, /+,−,∗,/)
- Assignment Operators (=, +=, -=, *=)
- Logical Operators ($&&, ||, ! $)
- Comparison Operators (<, >, ==, !=<,>,==,!=)
- Comma Operator (,): The Comma operator evaluates each operand from left to right and returns the value of right most operand.
- Bitwise Operators (&, |, ^) and Conditional Operators (? :?:)
Unary Operators : It takes only one operand and perform a specific operation. Following are some of the unary operators:
- Increment Operators : ++, --
- typeof: Returns the type of the given operand
- delete : Deletes an object, object’s attribute or an instance in an array
- void: Specifies that an expression does not return anything

There is one special operator which takes three operands and perform as a conditional statement.

Ternary/Conditional Operator
A ternary operator takes three operands and returns a value based on some condition. It’s an alternative for if statement. This could be used for multiple purposes and is used in REACT too!
syntax :

condition ? expression_1 : expression_2;

If the condition is true, expression_1 is returned, otherwise it will return expression_2.

Object Destructuring

For web developers, It’s often the case to access plenty of properties from state or props in the component. Object destructuring makes it easy to create variables from an object's properties Rather than assigning them to a variable one by one.

JavaScript Object Destructuring is the syntax that makes it possible to extract values from arrays, or properties from objects, and assigning them to a variable.

example of destructuring :

// no destructuring
const post = this.state.post;
const article = this.state.article;

// destructuring
const { post, article } = this.state;

The destructuring also works for JavaScript arrays. Another great feature is the rest destructuring. It is often used for splitting out a part of an object, but keeping the remaining properties in another object.
Example:

// rest destructuring
const { users, ...rest } = this.state;

Find more on object destructuring here.

Thanks for Reading

I hope it was worth your while. I will be creating series of JavaScript Fundamentals Required to learn React.

You can follow me if you want :) .

github
LinkedIn
Twitter

Create LANDING PAGE with 3-D Effect

Rajshree Vatsa — Sat, 17 Jul 2021 07:50:41 +0000

In this article I am going to show you how to add 3-D effects to a Landing Page using HTML, CSS and JavaScript. You can add 3-D effects to give your website a bold navigation and also show off your skills of better usability standards. Unique and beautiful effects are what can easily make people stop and take notice, increasing the time they spend on the site.

Step 1: Create HTML File

This is a basic layout of a landing page, further we are going to add effects using CSS and JavaScript.



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3D Navbar Animation</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="navbar">
        <div class="menu">
          <h3 class="logo">Rajshree<span>Vats</span></h3>
          <div class="hamburger-menu">
            <div class="bar"></div>
          </div>
        </div>
      </div>

      <div class="main-container">
        <div class="main">
          <header>
            <div class="overlay">
              <div class="inner">
                <h2 class="title"> Imagination creates reality</h2>
                <p>
                  Hello, This is a sample landing page with 3-D navigation bar.
                  Created using HTML,CSS and JAVASCRIPT. I hope you like it.
                </p>
                <button class="btn">Read more</button>
              </div>
            </div>
          </header>
        </div>

Step 2: Styling Layout and Hamburger menu

This will style our html elements.



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

body,
button {
  font-family: "Poppins", sans-serif;
}

.container {
  min-height: 100vh;
  width: 100%;
  background-image: url(bg2.png);

  overflow-x: hidden;
  transform-style: preserve-3d;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  height: 3rem;
}

.menu {
  max-width: 72rem;
  width: 100%;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

.logo {
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 4rem;
}

.logo span {
  font-weight: 300;
}

.hamburger-menu {
  height: 4rem;
  width: 3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.bar {
  width: 1.9rem;
  height: 1.5px;
  border-radius: 2px;
  background-color: #eee;
  transition: 0.5s;
  position: relative;
}

.bar:before,
.bar:after {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  background-color: #eee;
  transition: 0.5s;
}

.bar:before {
  transform: translateY(-9px);
}

.bar:after {
  transform: translateY(9px);
}

.main {
  position: relative;
  width: 100%;
  left: 0;
  z-index: 5;
  overflow: hidden;
  transform-origin: left;
  transform-style: preserve-3d;
  transition: 0.5s;
}

header {
  min-height: 100vh;
  width: 100%;
  background: url("bg1.png") no-repeat top center / cover;
  position: relative;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner {
  max-width: 35rem;
  text-align: center;
  color: #fff;
  padding: 0 2rem;
}

.title {
  font-size: 2rem;
}

.btn {
  margin-top: 1rem;
  padding: 0.6rem 1.8rem;
  background-color: #1179e7;
  border: none;
  border-radius: 25px;
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
}

Step 3 : The Javascript Code

To add animation, we need to add a class called active to the container element and remove it every time hamburger menu is clicked on.



const hamburger_menu = document.querySelector(".hamburger-menu");
const container = document.querySelector(".container");

hamburger_menu.addEventListener("click", () => {
  container.classList.toggle("active");
});

Step 4: Styling active class

After this Let's style the container element and add animation using css -




.container.active .bar {
  transform: rotate(360deg);
  background-color: transparent;
}

.container.active .bar:before {
  transform: translateY(0) rotate(45deg);
}

.container.active .bar:after {
  transform: translateY(0) rotate(-45deg);
}

.container.active .main {
  animation: main-animation 0.5s ease;
  cursor: pointer;
  transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);
}

@keyframes main-animation {
  from {
    transform: translate(0);
  }

  to {
    transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);
  }
}

We are done with the 3-D transformation.

Now, add shadow effect to the image



.shadow {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  transform-origin: left;
  transition: 0.5s;
  background-color: white;
}

.shadow.one {
  z-index: -1;
  opacity: 0.15;
}

.shadow.two {
  z-index: -2;
  opacity: 0.1;
}

.container.active .shadow.one {
  animation: shadow-one 0.6s ease-out;
  transform: perspective(1300px) rotateY(20deg) translateZ(215px) scale(0.5);
}

@keyframes shadow-one {
  0% {
    transform: translate(0);
  }

  5% {
    transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);
  }

  100% {
    transform: perspective(1300px) rotateY(20deg) translateZ(215px) scale(0.5);
  }
}

.container.active .shadow.two {
  animation: shadow-two 0.6s ease-out;
  transform: perspective(1300px) rotateY(20deg) translateZ(120px) scale(0.5);
}

@keyframes shadow-two {
  0% {
    transform: translate(0);
  }

  20% {
    transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);
  }

  100% {
    transform: perspective(1300px) rotateY(20deg) translateZ(120px) scale(0.5);
  }
}

.container.active .main:hover + .shadow.one {
  transform: perspective(1300px) rotateY(20deg) translateZ(230px) scale(0.5);
}

.container.active .main:hover {
  transform: perspective(1300px) rotateY(20deg) translateZ(340px) scale(0.5);
}

Step 5: Adding and styling Menu links



 <div class="links">
        <ul>
          <li>
            <a href="#" style="--i: 0.05s;">Home</a>
            <span>  </span>
          </li>
          <li>
            <a href="#" style="--i: 0.1s;">Services</a>
            <span>  </span>
          </li>
          <li>
            <a href="#" style="--i: 0.15s;">Portfolio</a>
            <span>  </span>
          </li>
          <li>
            <a href="#" style="--i: 0.2s;">Testimonials</a>
            <span>  </span>
          </li>
          <li>
            <a href="#" style="--i: 0.25s;">  About</a>
            <span>  </span>
          </li>
          <li>
            <a href="#" style="--i: 0.3s;">  Contact</a>
            <span>  </span>
          </li>
        </ul>
      </div>
    </div>

Let's style links



.links {
  position: absolute;
  width: 20%;
  right: 2em;
  top: 0;
  height: 100vh;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul {
  list-style: none;
}
ul li a .fa{
  font-size: 40px;
  color:black;
  line-height: 80px;
  transition: 0.5s;
  padding-right: 14px;
}
ul li a{
  text-decoration: none;
  display:absolute;
  display: block;
  width:160px;
  height:60px;
  background:#609aca;
  text-align:centre;
  padding-left: 20px;
  transform: rotate(0deg) skewX(25deg) translate(0,0);
  transition: 0.5s;
  box-shadow: -20px 20px 10px rgba(0,0,0,3);
}
ul li a:before {
  content: '';
  position: absolute;
  top: 10px;
  left: -20px;
  height: 100%;
  width:20px;
  background:#b1b1b1;
  transform:0.5s;
  transform:rotate(0deg) skewY(-45deg);

}
ul li a:before {
  content: '';
  position: absolute;
  top: 6px;
  left: -10px;
  height: 100%;
  width:10px;
  background:#dbe7f0;
  transform:0.5s;
  transform:rotate(0deg) skewY(-45deg);

}
ul li a:after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: -6px;
  height: 10px;
  width:100%;
  background:#dbe7f0;
  transform:0.5s;
  transform:rotate(0deg) skewX(-45deg);

}
ul li a:hover {
  transform:rotate(-30deg) skew(25deg) translate(20px,-15px);
  box-shadow: -50px 50px 50px rgba(0,0,0,0);
}
ul li a:hover .fa {
  color: #fff;
}
ul li:hover span{
  color: #fff;
}
ul li:hover a{
  background: #9b154c;
}
ul li:hover a:before{
  background: #7B153F;
}
ul li:hover a:after{
  background: #9b154c;
}


.links a {
  text-decoration: none;
  color: black;
  padding: 0.7rem 0;
  display: flex;
  display: block;
  font-size: 1.2rem;
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0px;
  transition: 0.3s;
  opacity: 0;
  transform: translateY(10px);
  animation: hide 0.5s forwards ease;
}

.links a:hover {
  color: #fff;
}

.container.active .links a {
  animation: appear 0.5s forwards ease var(--i);
}

View the Final Version of this page here

Hopefully this tutorial was fun and worth your while. Get the full Source Code here on my Github Repo.

Let's Connect on LinkedIn or Twitter.

15 HTML & CSS only project Ideas (Part -2)

Rajshree Vatsa — Mon, 05 Jul 2021 15:25:17 +0000

Here is the next part of our 15 HTML & CSS only projects list. Let us look into what else you can build with just HTML and CSS knowledge.
PART 1: https://dev.to/rajshreevats/15-html-css-only-project-ideas-part-1-17e1

8. Interactive Resume

As a web developer, It is better to send your CV/Resume built with HTML & CSS rather than pdf or doc file. Building an interactive resume is one way to show your foundational skills while also making your resume impressive to clients/employers.

Here are some of the tutorials for your reference:-

9. Create an E-mail newsletter

This project can help you if you are a freelancer and you want to connect with clients using e-mails. You can custom design and share e-mail newsletters with your target audience and clients. You can also monetize your e-mail developer skill after this.

Here are some of the references:-

10. Create CSS Animations

They’re easy to build and have fun, you can create them without even having to know JavaScript. You can change as many CSS properties you want, as many times as you want. To use CSS animation, you must first specify some keyframes for the animation. An animation lets an element gradually change from one style to another.

Here are some of the references:-

11. Video Background Site

Fullscreen images used as backgrounds have an amazing visual impact, but you can use video background in exactly the same way and draw better attention. A good video background can easily make people stop and take notice, increasing the time they spend on the site. This works best for Travel and Restaurants landing pages.

Here are some of the references:-

12. Create an Image Slider

HTML image slider is remarkably efficient, reliable and engaging. This project can also be used in an -e-commerce website_ to showcase products in an engaging way.

Here are some of the references:-

13. E-Voting Form Template

Basics concepts of HTML and CSS like tags, ID, color, margin, padding, font, checkbox etc. are enough to build an E-Voting form. E- Voting system is used for online surveys and full system requires some PHP and Javascript knowledge as well, but for now you can leave that part and build Layout for the system using HTML & CSS only.

Here are some of the references:-

14. CSS Hamburger Menu

Overlays are very similar to links, except they have a transparent background and appear on top of the original page. A hamburger menu is an icon used on a website that, when clicked, opens to reveal a navigation menu. You can add these additional features to your dummy site projects (restaurant, e-commerce etc.
).

Here are some of the references:-

15. CSS 3-D navigation page

You can build this to give your website a bold navigation and also show off your skills of better usability standards. Animated Navigations are key ingredients of the user experience. In this case a 3D menu can't just be fun. It has to be efficient. You can also check out my 3-D navigation landing page for reference here :- https://rajshreevats.github.io/3-d-navigation-bar.github.io/

some other tutorials for reference:-
1.https://www.youtube.com/watch?v=jLyqrjL3wUo

https://www.youtube.com/watch?v=3JwsdIMsjN0

Apart from these 15 projects, Even with just HTML and CSS skills, you can contribute to an open source project. You can find open source projects on hosting sites like GitHub.
Follow me on github :- https://github.com/RajshreeVats
:)

15 HTML & CSS only project Ideas

Rajshree Vatsa — Sat, 03 Jul 2021 16:21:51 +0000

If you’re a beginner to web development and just started learning HTML & CSS, You might be wondering if this is enough to build something practical and add it to your portfolio. The good news is that there are many HTML & CSS projects that beginners can try and build up skills, level-up and feel motivated.

Building projects is indeed a great way to learn- but you don’t have to dive into create something that would make you feel stuck or demotivated, let alone finish. When starting out the idea of making an app or website from scratch is daunting and it can make you feel overwhelmed.

Remember to progress by taking Baby steps and thankfully HTML is one of the simplest language, and you won’t need any prior programming experience or background either.

So let us look into what you can build with just HTML and CSS knowledge.

1. Webpage Including Form

Websites often add forms for users to fill such that they can collect some relevant data for their sales or reach. It could be a Contact form, log-in/sign-up form or Survey form. This project is a great way to implement your knowledge of structuring a web page.
Again, you can always experiment with the design using CSS and make it more interactive.
Here are some of the tutorials for your reference:-
1.https://www.geeksforgeeks.org/build-a-survey-form-using-html-and-css

2.https://www.w3schools.com/howto/howto_css_contact_form.asp

3.https://www.w3schools.com/howto/howto_css_form_icon.asp

2. Parallax Website

A parallax website has a scrolling effect which allows you to scroll up and down the page to see the the background content (i.e. an image) at a different speed than the foreground content while scrolling. It gives a unique and fun effect on a website.

Here are some of the tutorials for your reference:-
1.https://www.w3schools.com/howto/howto_css_parallax.asp
2.https://www.digitalocean.com/community/tutorials/css-pure-css-parallax
3.https://www.youtube.com/watch?v=1wfeqDyMUx4

3. Landing Page

A landing page includes numerous vital elements, you will have to combine your HTML knowledge with your creative skills. This project will help you implement a strong idea of structuring web-pages.
You can pick any of the trending niches to try be it Restaurant landing page, E-commerce landing page etc.

Here are some of the references:-
1.https://www.youtube.com/watch?v=X1dz0xRbSJc
2.https://www.youtube.com/watch?v=FSF2VA1rsI4

4. Music Store Page

A perfect Idea for a music lover. You will have to include necessary buttons such as start, stop, rewind/forward, etc. Add relevant links and images for the collection of songs available. At the footer, you can include contact details, and links for registration, in-store purchases, subscription packages, and trial options.

Here are some of the references:-
1.https://www.youtube.com/watch?v=92yD3nOV1pk
2.https://www.youtube.com/watch?v=enSvkyuojnA

5. Photography Site

The idea here is to create a basic one page responsive site to showcase Photos. you will need to work with HTML5 and CSS3 to develop this photography website. You can create a gallery with a view button so users can go to the images section and slide to view the following images.
Here are some of the references:-

6. Technical Documentation

Every language, software, hardware, etc. has technical documentation for information and help. The main idea behind this project is to create a technical documentation page. You can check out the documentation for Python, Java, Arduino, etc. for reference on how these pages look. Technical documentation could be a beneficial HTML project if you are just starting with your HTML career. You can also contribute to github repositories by adding a good readme file or any other necessary tech document.

Here are some of the references:-

7. Personal Portfolio

You can create your own portfolio using HTML & CSS, You need to be proficient in HTML & CSS for creating this. The project should contain the standard information for a work portfolio, including your name and image, projects, niche skills, and interests.
You can also add image sliders or gallery view to showcase your work and again it's free to play around on hover effects using CSS.

Here are some of the references:-

So with that, we've ended the part-1 of our 15 HTML & CSS only project ideas. These projects will help you practice basics and these are not very overwhelming as well. Start experimenting with them and keep learning.
PART 2 :- https://dev.to/rajshreevats/15-html-css-only-project-ideas-1b23
:)

Beginner's Guide to HTML & CSS

Rajshree Vatsa — Fri, 02 Jul 2021 13:16:55 +0000

What is HTML?

Hyper Text Markup Language commonly known as HTML, the standard markup language that is used for creating Web pages and Web applications. HTML provides a description of the structure/layout of a web page.

How it works?

For a browser to correctly render a web page, it must be explicitly told what each piece of content is. This is where the markup language elements comes in use.
We define the structure of webpage/ web application by wrapping content in HTML elements. The head element contains supporting information about the file, commonly referred to as metadata. There must be a title (providing the webpage a title) directly underneath the head element in order be complete. The head element may also contain links to Javascript files and CSS stylesheets. body is the element that holds the information that is rendered by a web browser. There can be only one body element within an HTML file.

<!DOCTYPE html>
<html>
<head>
<title>Basic HTML Page </title>
</head>
<body>

<h1>First Heading</h1>
<p>First paragraph.</p>

</body>
</html>

Features of Html:

1. HTML is very easy and simple and can be easily understood as a beginner.
2.HTML is useful to make an effective presentation because it has a lot of formatting tags.

HTML can be displayed on any platform like Windows, Linux, and Mac etc. 4.HTML is a case-insensitive language, which means we can use tags either in lower-case or upper-case.

WHAT is CSS?

Cascading Style Sheets (CSS) describes how HTML elements are to be displayed on screen, paper, or in other media. It is a style sheet language which is used to enhance the look and formatting of a document written in markup language. It provides an additional feature to HTML. It is generally used with HTML to change the style of web pages and user interfaces. It can also be used with any kind of XML documents including plain XML, SVG and XUL.

body {
  background-color: blue;
}

h1 {
  color: cyan;
  text-align: center;
}

p {
  font-family: sans-serif;
  font-size: 15px;
}

Why is it used?

1.If you are developing a large website where fonts and color _ information are added on every single page, it will be become a long and expensive process. CSS was created to solve this problem. It was a W3C recommendation.
2.CSS style definitions are saved in __external_ CSS files so the entire website look can be changed/modified by changing just the CSS file.
3.CSS provides more attributes than plain markup language, it also makes websites appear visually appealing.

Online Resources to learn HTML & CSS for free:

1.Freecodecamp.org
2.Codeacademy
3.Udacity
4.W3schools
5.linkedIN learning

Some of the helpful books:

1.Smashing CSS
2.Head First HTML and CSS
3.Styling with CSS
4.Learning Web Designs
5.Core HTML5 Canvas

Conclusion

I hope it was helpful for you. Do comment for more.
My github :https://github.com/RajshreeVats

Forem: Rajshree Vatsa

Classes in JS before learning React

What is a class?

Create a JavaScript class

Object Creation in JavaScript

The this keyword

Composition

Inheritance

This was all for today!!!

Functions in JS before learning React

Functions

Ways to Declare Function in JavaScript

Arrow Functions in React

Higher-Order Functions

.reduce()

.filter()

.map()

Thanks for Reading

Operators and Object Destructuring in JS before learning React

what is React and JSX?

Why learning JavaScript before React?

Variables & Operators

Variables

Operators

Object Destructuring

Thanks for Reading

Create LANDING PAGE with 3-D Effect

Step 1: Create HTML File

Step 2: Styling Layout and Hamburger menu

Step 3 : The Javascript Code

Step 4: Styling active class

Now, add shadow effect to the image

Step 5: Adding and styling Menu links

Let's style links

15 HTML & CSS only project Ideas (Part -2)

8. Interactive Resume

9. Create an E-mail newsletter

10. Create CSS Animations

11. Video Background Site

12. Create an Image Slider

13. E-Voting Form Template

14. CSS Hamburger Menu

15. CSS 3-D navigation page

15 HTML & CSS only project Ideas

1. Webpage Including Form

2. Parallax Website

3. Landing Page

4. Music Store Page

5. Photography Site

6. Technical Documentation

7. Personal Portfolio

Beginner's Guide to HTML & CSS

What is HTML?

How it works?

Features of Html:

WHAT is CSS?

Why is it used?

Online Resources to learn HTML & CSS for free:

Some of the helpful books:

Conclusion

The `this` keyword