By Samika Paudel — Professional ePortfolio Assignment
Explore PortfolioFull stack development means building a complete web application. This means the full stack developer works on the both the front-end, which is what people see when they visit a website, and the back-end, which is the server, database, and all the logic that makes things work. A full stack developer understands how everything connects, from when someone clicks a button on a page all the way to how that information is stored and returned.
The frontend of a web application is the part that people can see. It is made with HTML, CSS and JavaScript. When you use a website, you are interacting with the front-end. It is what you see in your browser. The front-end technologies include:
The backend of a web application is the part that people cannot see. It handles all the behind the scenes work, like figuring out who you are and what you can do and getting information from a database. The backend runs on a computer and talks to the frontend. The back-end technologies include:
When you click a button on a website, the frontend sends a message to the backend. Then, the backend does some work, it checks if you are logged in or it gets some information from a database. After that, the backend sends a message back to the frontend. The frontend then updates what you see on the screen based on what the backend sent. The frontend is showing you what the backend found out. Then, the backend work together to make a web application work properly. The frontend and the backend have to work like this to make everything run smoothly. Frontend and the backend are, like two parts of a team they need to work for the web app to work.
Browser → HTTP Request → Server → Database
Database → Response → Server → JSON → Browser
HTML stands for HyperText Markup Language. It is the standard language used to structure content on the web. Every webpage is built using HTML elements such as headings, paragraphs, images, links, tables, and forms.
HTML uses tags to define elements on a page. Tags are written inside angle brackets, like
<p> for a paragraph or <h1> for a heading.
Browsers read the HTML and display the content accordingly.
This form demonstrates HTML form elements including input fields, labels, and a submit button.
Tables are used in HTML to display structured data in rows and columns using the <table>, <tr>, <th>, and <td> tags.
| Tag | Name | Purpose |
|---|---|---|
<h1> | Heading | Defines the main heading of a page |
<p> | Paragraph | Defines a block of text |
<a> | Anchor | Creates a hyperlink |
<img> | Image | Embeds an image on the page |
<form> | Form | Groups input elements for user data |
CSS stands for Cascading Style Sheets. It is used to control the visual appearance of HTML elements — including colours, fonts, spacing, and layout. Without CSS, websites would just be plain text on a white page.
CSS works by selecting HTML elements and applying style rules to them. For example, you can change the colour of all headings, add padding to a card, or make a layout display in columns using Flexbox or Grid.
Hover over the box below to see a CSS transition in action.
This uses the CSS transition property and :hover selector to change the
background colour and scale of the element smoothly.
Below is an example of the CSS used to style the cards on this page:
.card {
background-color: rgb(25, 25, 50);
border: 1px solid #333;
border-radius: 10px;
padding: 25px;
color: #a6a5a5;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
}
Bootstrap is a popular open-source CSS framework that makes it easier to build responsive, mobile-friendly websites. It provides ready-made components like navbars, buttons, cards, and a 12-column grid system that automatically adjusts to different screen sizes.
Bootstrap uses a 12-column grid. You can split the page into columns using classes like
col-md-6 (half width) or col-md-4 (one third). Columns automatically
stack on smaller screens.
Bootstrap provides styled button classes that can be applied directly to any button element without writing custom CSS.
Alert components are used to show messages to users. They come in different colours for different types of feedback.
Bootstrap is loaded through a CDN link placed in the <head> of the HTML file. No download is needed.
<!-- Bootstrap CSS in <head> --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Bootstrap JS before </body> --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
JavaScript is a programming language that runs in the browser and makes web pages interactive. It can respond to user actions, update content on the page without reloading, and communicate with servers to load or send data.
This demonstrates JavaScript variables, functions, and DOM manipulation. Each button click calls a function that updates a variable and displays the new value on the page.
0
let count = 0;
function increaseCounter() {
count++;
document.getElementById("counter")
.innerText = count;
}
function resetCounter() {
count = 0;
document.getElementById("counter")
.innerText = count;
}
JavaScript can read values from form inputs and use them to update the page content dynamically.
This is done using document.getElementById().
function showGreeting() {
const name = document
.getElementById("nameInput").value;
const output = document
.getElementById("greetingOutput");
output.style.display = "block";
output.innerText = "Hello, " + name + "!";
}
The table below summarises the main JavaScript concepts demonstrated in this portfolio section.
| Concept | Example | What it does |
|---|---|---|
| Variable | let count = 0; | Stores a value that can change |
| Function | function increaseCounter() {} | A reusable block of code |
| DOM selection | document.getElementById("id") | Finds an HTML element by its ID |
| Event | onclick="increaseCounter()" | Runs a function when an element is clicked |
| Condition | if (count > 0) {} | Runs code only when a condition is true |