DEV Community: PrincessAisha

From Passion to Profession: Why I chose Front-End Development and How HNG Will Get Me There

PrincessAisha — Fri, 07 Feb 2025 00:11:29 +0000

The world is rapidly evolving, with technology at the forefront of this transformation. My fascination with how websites and digital interfaces work inspired me to dive into front-end development. I am passionate about creating engaging, visually appealing, and interactive user experiences that leave lasting impressions.

Motivation for Becoming a Front-End Developer

My journey into front-end development began with curiosity about how websites function and what makes them visually appealing and interactive. I was drawn to the creative process of turning ideas into user-friendly digital experiences.

Additionally, the flexibility that front-end development offers is a significant motivator. The ability to work remotely, collaborate with global teams, and maintain a balanced work-life schedule makes it an attractive career path for me. In today’s digital age, businesses worldwide seek developers to build engaging online platforms, creating endless opportunities to contribute from anywhere in the world.

Front-end development perfectly blends creativity, logic, and flexibility, which aligns with my personal and professional aspirations.

How HNG Will Help Me Grow in the Field

HNG provides an incredible opportunity for growth through its collaborative and task-driven learning environment. I am excited to gain hands-on experience while working on real-world projects under the mentorship of experts. Additionally, HNG’s strong emphasis on modern frameworks, such as React.js, will help me master building dynamic and efficient user interfaces.
For a responsive and interactive UI, you can HIRE REACT.JS DEVELOPERS - https:// hng.tech/hire/reactjs-developers

NETVOLUTION- FROM ARPANET TO CYBERSPACE

PrincessAisha — Sat, 11 May 2024 15:15:43 +0000

The Internet has revolutionized the way we interact, communicate, access information, go about our daily activities and so on.
I’ll be delving into the history of the Internet, exploring its fundamental components.

The Birth of the Internet:ARPANET
The Internet root can be traced back to the late 1960’s when a US government agency (ARPA- Advanced Research Projects Agency) founded a computer network called ARPAnet.
In 1969, the first computers communicated over ARPANET. The initial network only had four nodes but more were added to allow research universities to share data and other resources; After ARPANET, other networks were developed.
The World Wide Web was launched in 1991, and it allows users from any connected computer to locate resources and web pages using Uniform Resource Locators (URL’s)- The URL serves as the address that tells the computer where to find resources on the internet.

DNS:The Internet’s Phonebook

One crucial component of the internet is the Domain Name System (DNS), which acts as the internet's phonebook, translating human-readable domain names (like google.com) into IP addresses (such as 172.217.6.46) that computers use to communicate with each other. DNS ensures that when you type a web address into your browser, your computer can locate the correct web server on the internet.

Network Packets: The Building Blocks of Communication
At the heart of internet communication are network packets, small units of data that are grouped together and transferred over a computer network. When you send a request to access a website or download a file, your computer breaks down the data into packets, which are then sent across the internet to their destination. Once there, the packets are reassembled to reconstruct the original data.

FTP
File Transfer Protocol (FTP) is used for transferring files between computers on a network. It enables users to upload, download and manage files on remote servers with ease.

HTTP & HTTPS Requests
Hypertext Transfer Protocol (HTTP) is the foundation of the World Wide Web. When you visit a website, your browser sends an HTTP request to the web server, which responds with the requested web page. It defines how messages are formatted and transmitted, enabling seamless retrieval of webpages and resources. However, HTTP traffic is not secure, making it susceptible to interception and manipulation by malicious actors.

To address this security concern, Hypertext Transfer Protocol Secure (HTTPS) was developed. HTTPS encrypts data transmitted between the client and the server, ensuring that sensitive information such as passwords and credit card numbers remains confidential. This encryption is achieved through the use of Secure Sockets Layer (SSL) or Transport Layer Security (TLS) protocols, protecting sensitive information from tampering and eavesdropping.

The Future of the Internet
As we venture further into the digital age, the internet continues to evolve at an unprecedented pace. Technologies such as artificial intelligence, blockchain, and the Internet of Things hold the promise of reshaping cyberspace and enhancing online security and privacy.

In conclusion, the internet's history is a testament to human innovation and collaboration. From its early days as a small network of computers to the global phenomenon it is today, the internet has revolutionized the way we live, work, and interact. Understanding key technologies like DNS, Network Packets, FTP, HTTP, and HTTPS requests provides insight into the inner workings of the internet and its continued evolution.

HOW CSS WORKS BEHIND THE SCENE

PrincessAisha — Sat, 11 May 2024 14:57:00 +0000

CSS means Cascading Style Sheets. It is a language used to style your HTML (Hyper Text Markup Language) page. CSS is the backbone of web designs, allowing developers to control the visual presentation of their websites.
There are three types of CSS. They are:
Inline CSS
Internal CSS
External CSS

- Inline CSS:
This is the CSS or style applied to a unique element in your HTML document.

- Internal CSS:
This defines a style for a single HTML page. It is usually defined in an HTML page's headsection within a style element.

- External CSS:
This styles multiple HTML pages with a single style sheet linked to your HTML page with a linktag. The CSS rules are contained in a separate CSS file and must be linked to the HTML document to see the desired results.

When we have multiple styles being applied to the same element which is causing a conflict, that’s where what we know as cascading comes in.

CSS CASCADE: The term cascade in CSS refers to the process of resolving conflicts when multiple CSS rules are applied to the same HTML element. When multiple styles conflict, the cascade determines which style takes precedence.
Your browser will always pick the last CSS rule declared.

SELECTORS: They select HTML elements based on the tag names, classes, ID’s, attributes and relationships with other elements. Here are some common types of selectors;

Element selector:
Targets HTML element based on their tag names, for example: p, span, div, h1 etc.
Class Selector:
Targets elements with a specific class attribute. To select element with a specific class attribute, you put a period (.), followed by the class name given to the element.
The class selector has a higher importance than the element name selector.
ID Selector:
Targets a single element with a specific ID attribute.
It is unique within a page. It is more important than any other selector and it overrides any other CSS rule you apply to the specific element if you have applied a CSS rule to the ID attribute.
To select an element with a specific id, you write a hash (#) character, followed by the id of the element.
Universal Selector:
This selector selects all HTML elements to apply CSS rules.
Example,
*{
background-color:grey;
font-size:16px;
color:green;
}

SPECIFICITY: It determines which CSS rule is applied to an element when multiple rules have conflicting selectors, it also determines which element is most specific using a scoring program. This is because you can have the same element with the same properties but different values. The one with the higher specificity wins.
When comparing specificity, the selector with the highest specificity wins regardless of the order in which the rules are defined in the stylesheet. Incase specificity is equal, the last rule defines that precedence due to the cascade.

By understanding the concept of cascade, selector and specificity, web developers can create more efficient and maintainable CSS stylesheets, ensuring consistent and visually appealing designs across different web pages and devices.

UNVEILING THE WEB MAGIC OF DOM (Document Object Model)

PrincessAisha — Thu, 09 May 2024 16:09:31 +0000

Imagine you're in charge of organizing a library. Your task is to categorize and arrange all the books, ensuring that they are easily accessible to readers. Each book has its unique title, author, and content, and you need to create a system that allows visitors to navigate through the library efficiently.

The library can be likened to a web page, and the Document Object Model (DOM) acts as the organizational structure that you implement to manage and present the library's content.
Library is the Web Page: Just as a web page contains various elements like text, images, forms, etc., the library houses books, shelves, tables, and other resources.
Books are the Elements: Each book in the library represents an element in the DOM. Each book has attributes (title, author, genre) similar to how HTML elements have attributes (id, class, etc.).

Catalog System serves as DOM Methods: Your cataloging system in the library, such as sorting books alphabetically or categorizing them by genre, corresponds to the methods provided by the DOM to manipulate elements.

By likening the DOM to organizing a library, it becomes easier to grasp its role in managing the structure, content, and interactivity of web pages. Just as a well-organized library enhances the visitor's experience, a well-structured DOM enhances the user experience on the web by enabling dynamic and interactive content.

Now that you have a glimpse of what DOM looks like, lets

What is DOM?

The Document Object Model (DOM) is an interface between all JavaScript code and the browser, specifically between HTML documents rendered in and by the browser. Through DOM, we can make JavaScript interact with the browser by creating, modifying, and deleting elements, setting styles, classes, and attributes, and listening and responding to events. This is because a DOM tree, a tree-like structure comprising nodes, is generated from an HTML document.

So basically, DOM is an API that represents and interacts with HTML and XML.
The DOM is a W3C(World Wide Web Consortium) standard and it defines a standard for accessing documents.
The W3C Dom standard is divided into three different parts:

Core DOM: standard model for all document types
XML DOM: standard model for XML documents
HTML DOM: standard model for HTML documents

How Does the DOM Work?

If you were listening to music on an app and you wanted to pause or skip a song, you'd have to do that through the app.
This process is similar to how the Document Object Model or DOM works. Here, the music app represents the DOM because it serves as a medium to make changes to the music.

When a web page loads in a browser, the DOM creates a tree-like representation of that page.
The document object is the main entry point to the DOM. It houses other objects, which in turn contain their own objects, forming a hierarchy.
Nodes in the DOM tree correspond to elements in the HTML document (e.g., paragraphs, headings, images).
You can access and manipulate these nodes using JavaScript or other scripting languages.

The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree. With them, you can change the document's structure, style, or content.

DOM is basically the representation of HTML document but in a tree-like structure composed of objects.
JavaScript interprets DOM easily, using it as a bridge to access and manipulate the elements. DOM JavaScript allow access to each of the objects (h1, p, etc.) by using different functions.

Here’s how it generally works:

Parsing HTML: When a web page is loaded, the browser parses the HTML document and constructs a DOM tree based on the HTML structure. This DOM tree represents the hierarchical structure of the document, with each HTML element represented as a node in the tree.
DOM API Access: JavaScript code running in the browser can access and manipulate this DOM tree using the DOM API. The DOM API provides a set of methods and properties that allow developers to interact with the DOM elements.
Element Selection: Developers can select specific elements in the DOM using methods like getElementById, getElementsByClassName, querySelector, querySelectorAll, etc. These methods return references to DOM elements that can be manipulated further.
Manipulation: Once a DOM element is selected, developers can modify its attributes, content, styles, and structure using the DOM API. For example, you can change the text content of an element, add or remove classes, update styles, append or remove child elements, etc.
Event Handling: The DOM API also allows developers to handle user interactions and events such as clicks, keypresses, form submissions, etc. Event listeners can be attached to DOM elements to trigger specific actions or functions when events occur. Rendering Updates: As developers make changes to the DOM structure or content using the DOM API, the browser automatically updates the rendered web page to reflect these changes. This dynamic updating process ensures that the web page remains interactive and responsive to user actions.

STRUCTURE OF DOM

DOM can be thought of as a Tree or Forest (more than one tree). The term structure model is sometimes used to describe the tree-like representation of a document.

Each branch of the tree ends in a node, and each node contains objects Event listeners can be added to nodes and triggered on an occurrence of a given event. One important property of DOM structure models is structural isomorphism: if any two DOM implementations are used to create a representation of the same document, they will create the same structure model, with precisely the same objects and relationships.

The DOM tree starts with the document node, representing the entire HTML document.

Other nodes include:

Element nodes: Represents HTML elements
Text nodes: Contains the actual text within an element
Attribute nodes: Represents attributes of an element
Comment nodes: It holds comment within the HTML Nodes are organized in hierarchical structure, reflecting the parent-child relationships between elements.

PROPERTIES OF DOM

The innerHTML property: You use this property to access the text content of an element.
The addEventListener() property: This property attaches an event listener to your element.
The replaceChild() property: This property replaces one child element with another new or existing child element.
The childNodes: The first child of the

element
The parentNodes: The parent of the element
The nodeValue: The value of the node

CONCLUSION:

The Document Object Model is a powerful tool that forms the foundation of modern web development. By providing a structured representation of web documents and a rich set of APIs for manipulation, the DOM empowers developers to create engaging and dynamic web experiences. Understanding the inner workings, structure, and properties of the DOM is essential for any web developer looking to build modern, interactive web applications. So, embrace the DOM, and unlock the endless possibilities it offers in the world of web development.