DEV Community: Susan J

JAVA FULL STACK DEVELOPMENT: "JAVA SCRIPT"

Susan J — Tue, 16 Sep 2025 13:19:18 +0000

What is JavaScript ?
It is a programing language that makes a website dynamic(action) and interactive.It can delete, create, and even modify or alter.

Data-Information

String-More than one character

Integer-Number

JS Library-Collection of pre-written code provide ready-to-use function.

JS framework-A st of tools bulid using javascript,specifically designed for building web applications.

VARIABLE:
It is a container that stores a value such as a number, a piece of string, a boolean (true/false), an object, etc.

EXAMPLE:
let name = "Alice";
let age = 25;
let isStudent = true;

Here:

name is a variable that holds the string "Alice"

age holds the number 25

isStudent holds the boolean value true

Variable can be Changeable
Starts in lower case
No space in-between
Can be declared with and without keyword
**
Dynamically[duck type]-**JavaScript(Need not to mention the datatype)
Statically-Java(Mention the data type for the 1st time)

**
SCOPE:**

Global-Everyone or anyone can access.
Local-Particular people can access or do anything.

JAVA FULL STACK INTERVIEW QUESTION'S PART-1:

Susan J — Tue, 02 Sep 2025 18:23:56 +0000

1. What is HTML?

Stands for Hyper Text Markup Language.
Used to create web page in structured form.

2. What is "Markup Language"?

The given text.doc is defined in structure and presentation.

3. EM:

Stands for Element.
Used to change font-size in parent class.
Syntax:Font-size:2em.
Eg: .Main_layout{ font-size:2em; }
Default font-size:16px;

4. REM:

Stands for Root Element.
Used to change fon-size in element.
Syntax:font-size:2rem;
Eg: .Main_layout{ font-size:2rem; }
Default font-size:16px;

5. Doctype:

Declaration appears at the very top of every HTML document(not a tag)[before ].
Tells the browser what version of HTML.
Written only in HTML 5.

6. Anchor Tag:

Used to create hyperlink(Navigation from one webpage to another).

7. Attributes:

Used to change the behavior(or)to display the HTML element(all tags).

flower*(name)*

href- **Hyper Referece
**src- Source file

8. Image Tag:

Syntax: alt-Alternative text.

9. Self Closing Tags:

Empty/void elements.
Only in HTML 5.
Not request to close the tag, because it contains no content.

10. Types:

- **<br>**-Break[to start from next line].
- **<hr>-**Horizontal line[left-right].
- **<vr>-**Vertical line[top-button].
- **<img>-**Image (path of the img)[src,alt].
- **<input>-**Buttons("btns").

JAVA FULL STACK DEVELOPMENT:

Susan J — Sat, 30 Aug 2025 19:20:23 +0000

GRID:
CSS Grid is a layout system that allows you to create complex web designs using rows and columns.A grid layout consist of a parent element with one or more grid items. All direct children of grid containers become grid items automatically.

Key Concepts:

display: grid;: Turns a container into a grid.

grid-template-columns: Defines the number and size of columns.

grid-gap: Sets the space between grid items.

Basic Example of CSS Grid:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Grid Example</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
      grid-gap: 20px; /* space between grid items */
    }
    .item {
      background-color: lightblue;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
  </div>
</body>
</html>

Adjusting Grid Layout:

You can also change how many columns or rows appear depending on the screen size. This can be done using media queries for responsiveness.
This would make the layout more responsive on mobile devices.

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr 1fr; /* 2 columns on smaller screens */
  }
}

padding in CSS:

Padding is the space inside an element, between the content and the border.

padding property has four values:

** padding:** 25px 50px 75px 100px;
top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px

Syntax:

.element {
  padding: 20px; /* all sides */
  padding: 10px 15px; /* top-bottom | left-right */
  padding: 10px 15px 20px; /* top | left-right | bottom */
  padding: 10px 15px 20px 25px; /* top | right | bottom | left */
}

Example:

.box {
  padding: 20px;
  background-color: lightgray;
}

This adds 20px of space inside the .box, around its content.

SEO (Search Engine Optimization):

SEO is the process of improving a website’s visibility in search engine results (like Google) to get more organic (non-paid) traffic.

It has three main parts:

On-Page SEO – Optimizing content, keywords, titles, meta tags, internal links.

Off-Page SEO – Building backlinks from other reputable websites.

Technical SEO – Ensuring the site loads fast, is mobile-friendly, and can be crawled/indexed by search engines.

The goal is to rank higher for relevant search terms so more people find your website naturally.

DAY 5, 6 AND 7 OF JAVA FULL STACK LEARNING :

Susan J — Wed, 16 Jul 2025 18:37:21 +0000

GIT :

  -**Global Information Tracker[GIT].**
  -Can recovery the program even the system is cracked.
  -It is a open source - licence free.
  -It is a Version Control System**[VCS]**.
  -Used to track changes in source code during software development.
  -Used by developers to maintain different version, collaborate, manage project history of code.

KEY CONCEPTS :

**REPOSITORY[Repo]:**A directory that contains your project and its version history.

**COMMIT:**A snapshot of your changes. You write a message to describe it.

**BRANCH:**A separate line of development.

**MERGE:**Combines changes from different branches.

**CLONE:**Copy a remote repository to your local machine.

**PULL:**Download and intergrate changes from a remote repo.

**PUSH:**Update your changes to a local repository.

BASIC GIT COMMANDS :

1.git init - Create a new Git

2.git clone - Copy the code

3.git status - Check the status

4.git add- To track

5.git add. - Track all file

6.git restore-stage - To untrack

7.git commit-m(Message) - Save changes

8.git push - Upload to remote

9.git pull- Download changes

10.git log - Check the history(see commit)

11.git branch - List branch

12.git checkout - Switch a branch

13.git merge - Merge a branch

USES:

- Track history.
- Allow collaboration.
- Supports branching and merging.
- Work offline.
- Open-source and fast.

GITLAB/GITHUB:

GITLAB:

**Owned by**: GitLab Inc. (open-core company)
**Best for**: DevOps teams, full CI/CD automation
**UI/UX**: Slightly more complex but powerful
**CI/CD**: Built-in GitLab CI/CD is very strong
**Self-hosting**: Easier to self-host (free Community Edition)
**Free Private Repos**: Yes

GITHUB:

**Owned by**: Microsoft
**Best for:**Open-source projects (biggest community)
**UI/UX**: More beginner-friendly
**CI/CD**: GitHub Actions (built-in)
**Integration**: Strong third-party integrations (VS Code, Azure, etc.)
**Free Private Repos**: Yes

WORKING OF GITLAB:

STEP-1:Install Gitlab.

STEP-2:Create new group.

+(create new group[Top left])
Create group name
Visiblity level(Public)
Who will use this group?
Submit

STEP-3:New project.

Create blank project
Create project name
Visiblity level(Public)
Create project

STEP-4:Add member.

Manage(Left middle)
Members
Invite members(Top right)
Username/name/email(Can add more than 2)
Select maximum role
Access expire date(Optional)
Invite

STEP-5:Clone code.

Extract code
Project
code(Top right)
Clone with SSH/HTTPS(Copy URL)
Save(Location[optional])
Open in terminal(Right click)
git clone(Paste the URL)
Enter (If"done" comes then it is clone)

STEP-6:Push code in gitlab.

Create a new project
git add/add.
git commit -m
git push

JAVA FULL STACK DEVELOPER

Susan J — Thu, 10 Jul 2025 15:40:52 +0000

Hello everyone,
I'm Susan Mary J,
This is my fourth day of Java full stack. For past fourth days we were learning about HTML,CSS & LINUX installation too.

SHORTCUTS:

Ctrl + shift + i - Alinement
Ctrl + s - Save
Shift + 1 - !
! + enter - Default Code
Ctrl + shift + Ctrl- Copy text from terminal
Ctrl + shift + v - Paste text into the terminal
Ctrl + shift + t - Open new terminal
Ctrl + l - clear the terminal

*REASON TO INSTALL LINUX :
*

Free & open source
Better security
Great for programming
Customizable interface

LINUX INSTALLATION:

STEP-1:Pick the LINUX version*[UBUNTU/LINUX MINT]*

STEP-2:Make a Bootable USB*[Rufus/Etcher]*

STEP-3:Plug in & restart your computer*[Press F12/F2/Esc]*,select the USB drive.

STEP-4:Install LINUX [Choose Language, time zone, username & password]

STEP-5:Finish installation [Wait for few minutes, remove the USB & restart your computer]

HTML:

Hyper Text Markup Language
Used to create webpage to display web browser.
Web pages are created using tags.
Works for CSS and JavaScript.
We can work in specific version of html.
Web technology evolved, html 4 could no longer keep up with modern needs so versio of html 4 changed to html 5.

TAGS:

- Keywords used to mark and formats parts of a web page.
Tell the browser how to display content. <p> - open tags </p> - close tag

TYPES OF TAGS:

<h1>to<h6> - Size of heading
<p> - Paragraph
<h> - Heading
<img> - Image [Self closing tags]
<div> - Block container
<span> - Inline container
<br> - Line break [No closing tag]
<hr> - Horizontal rule [No closing tag]

VERSIONS OF HTML:

HTML 1.0
HTML 2.0
HTML 3.2
HTML 4.01
XHTML
HTML 5

SAMPLE PROGRAM:

`<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple HTML page.</p>

    <button onclick="alert('Hello!')">Click Me</button>
</body>
</html>       `