Forem: Kasie Udoka Success

Burnout to Breakthrough: Rediscovering My Passion in Tech and Writing

Kasie Udoka Success — Fri, 22 Nov 2024 20:19:48 +0000

The past few months have been challenging. Every task felt daunting. Thinking about them alone drains my body and mind. I kept wondering, what was wrong with me? Am I sick? but got no answers.

I felt exhausted mentally, emotionally, and physically. The tasks I used to sweep through felt like roadblocks. Am I getting depressed? I always asked myself. I was supposedly okay.

I kept going, and sooner than I expected, I was caught up in the dark web of the non-medical condition that grazes the most passionate individuals; burnout.

Burnout consumed me because I didn’t spot the signs early. I kept pushing through to build discipline but didn’t know when I fell off the cliff.

What burned me out? Did I do anything specific that caused it? These questions kept creeping into my little head but I didn’t get the answers.

The Costs of Burnout

It started from losing interest in my hobbies, I was slowly not enjoying coding again, studying was like lifting a big rock, and even my very best friend; writing seemed far from me. I wanted to reconnect with her but I couldn’t.

My system was full of drafts, and every attempt to start a project ended in frustration. A couple times, I got new project ideas that sparked my creativity but there was something I just couldn’t do; being productive.

Days of unproductivity turned into weeks of sadness. I started disliking my tech skills, and school was becoming uninteresting.

I was curious, how could something so tiny, so unrecognized have such a great impact and make me falter. A high-standard woman like me? Or is it age-related? I was confused. So I decided to go home.

My clothes were roughly packed, and my essentials were hastily thrown into my laptop bag, then I headed home.

At home, I couldn’t do anything meaningful I blankly stared at my ceiling all day. Sickness also amplified it. I was diagnosed with malaria, so it was a contributing factor. Though I felt better after treating the malaria, nothing changed in my mental state. I just wanted to travel this road alone and discover how to get out of this mess.

The Path to Recovery

I read articles, watched videos, and explored journals searching for how I could clear this menace and prevent myself from falling prey to its poisonous venom again.

Everything I discovered was summarized in this article, unseen costs of burnout in tech professionals (so this piece is not too long). It is not only for tech leads, it’s for everyone.

The key changes I made were prioritizing rest, creating balance, timeboxing, and celebrating achievements. In between moments of practicing these, I stumbled on Nir Eyal’s Indistractable and it was the absolute game changer.

I learned how to manage my digital life even as a techie. It turns out I spend an unhealthy amount of time on my screen, whether studying, coding, or writing. I started journaling on paper, showing gratitude, and praying much longer.

Slowly my passion started creeping in again, like the first rays of dawn after a long, dark night, and my spark was becoming more pronounced. In that moment of struggle, self-discovery happened: My passion, potential, and purpose.

What can I do with no gains attached? What truly makes me happy even if no achievements are tied to it?

Writing is the place I stay true to myself, without judgment or prejudice. She allows me to express my emotions, moods and thoughts.

Writing is cathartic, perhaps that is why I love her. Whether one person or no person reads, it doesn’t matter. It feels like I’m building a time library where you can visit me, who I was, and remember how I felt without missing anything.

My point is to find that one thing that truly inspires you and do it when you feel burned out. It can be a way of healing. And if a break is possible, please take it.

The Lessons

Take life easy; you can’t have everything figured out. If you don’t spot the signs of burnout early it will make more impact than you can imagine. When everything seems not to be working; tech, school, life; stick to that one thing that makes you feel authentic.

In Conclusion

I’m rediscovering my passions, and while I’m still on this journey, I’m hopeful. If you’re feeling lost, know that recovery is possible. Take it one step at a time; your spark will return. I hope this is a safe way of sliding back into your lives without any explanation for being away. Stay with me.

How to Implement Dark/Light Themes in Your Web Apps

Kasie Udoka Success — Thu, 18 Jul 2024 16:05:24 +0000

Have you ever toggled between dark and light themes on a website and thought, "I wish my site could do that"? Well, now it can. In this article, I'll show you how to implement dark and light modes in your web projects using HTML, CSS, and JavaScript, giving your users the best visual experience.

Prerequisite: A basic understanding of HTML and CSS is required to comprehend this tutorial.

Dark/light theme Implementation

The key components of setting up a dark mode/light mode on websites are:

A webpage
A button for switching between the themes
The theme or color to be switched
The logic behind switching the theme and button text.

A Webpage

Set up your project



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Virtual Tour App</title>
</head>
<body>
    <div class="hero-sec">
        <div class="col1">
            <h1>Everyday Is a Journey</h1>
            <p>Visit any Location Virtually, Anytime, Anywhere</p>
            <button>Tour</button>
        </div>
        <div class="col2">
            <img src="img.jpg" alt="landscape" width="560px">
        </div>
    </div>
</body>

</html>

Output of plain web page

A Toggle Button

It is important to add the theme toggle button. This is the button that triggers the change of color from light mode to dark mode and vice versa.



    <button id="toggle-button">Dark mode</button>

Light/dark mode theme

This is a crucial step because two themes or colors are involved here. We need a way to attach different styles to the web page with few lines of code. We will be using CSS variables for theming. Please read my article on CSS Variables if it sounds new to you .

Step 1:
Declare the style for the light theme



:root{
    --bg: #fafaf3;
    --color: #0A0A0A
}
// This is the light theme; the default theme

Step 2:
Declare the class for the dark theme



.dark{
    --bg: #0A0A0A;
    --color: #ffffff;
}
// This is the class that will be added onclick of the button

Note: The variable names must be the same.

This can be done without variables by using only the body element. However, it is better to use CSS variables because many occasions require more than the background color to be changed. Some web app theming requires changing text colors, border colors, shadows, etc. So using a variable allows full control of all elements, especially in large applications.

Let's complete the styling of our web page. Ensure your CSS is linked to the HTML file.



:root{
    --bg: #fafaf3;
    --color: #0A0A0A
}
// This is the light theme; the default theme
.dark{
    --bg: #0A0A0A;
    --color: #ffffff;
}
body{
    background: var(--bg);
    color: var(--color);
    font-family: monospace
}
.hero-sec{
    display: flex;
    justify-content: space-evenly;
    color: var(--color);
    margin-top: 48px;
}
.col1{
    margin-top: 6rem;
    height: 40%;
}
h1{
    font-size: 2.5rem;
}
p{
    font-size: 1.3rem;
}
button{
    padding: 1rem 2rem;
    background-color: #3f51b5;
    color: #ffffff;
    border: none;
    cursor: pointer;
}
.hero-sec button{
    font-size: 1.3rem;
}

Output

The logic behind switching themes

When a user clicks the toggle button, we expect two things to happen.

The theme or color mode of the website should change.
The text on the button should change.

To Change the theme
Manipulate the DOM (Document Object Model) to get the button and body of the web page.
Declare a function to add "dark" class to the body element (which we already declared in the css).
Call the function once a user clicks the dark/light mode button. Ensure your JS is linked to your HTML.



const toggleBtn = document.getElementById("toggle-button")
const body = document.body

function toggleTheme() {
    body.classList.toggle("dark")
}
toggleBtn.addEventListener('click', toggleTheme);

To change the text
Add another block of code to the toggleTheme function. This code simply means that If the body contains the class "dark", toggle text to "Light mode" and vice versa.



if (body.classList.contains("dark")) {
        toggleBtn.textContent = "Light Mode";
    } else {
        toggleBtn.textContent = "Dark Mode";
    }

This can be done in one line for cleaner code.



 toggleBtn.textContent = body.classList.contains("dark")? "Light Mode" : "Dark Mode"

Yes, You can switch themes now. Cool Right? Check the attached video for full demo.

In Conclusion

By following the steps outlined in this tutorial, you can provide your users with the flexibility to choose their preferred theme, making your web app more engaging and accessible.
If you enjoyed my article you can Buy Me A Coffee to Support my Work

Read my other articles on Progressive Web Apps, Innermost workings of the web, CSS Variables, A Beginner's guide to front-end dev and more.

Please Like, Comment, and Follow for more web-dev and tech-related articles. Happy Coding!!!

Progressive Web Apps (PWA): A Comprehensive Guide

Kasie Udoka Success — Sat, 06 Jul 2024 06:14:23 +0000

Did you know that your web apps built with HTML, CSS, JavaScript, or any front-end framework can become installable, and work offline providing an enhanced user experience?

This article will introduce progressive web apps to beginners, and anyone looking to improve their front-end development skills. In this article, you will learn;

Everything you need to start building Progressive Web Apps
How to create installable web apps.
How to implement offline functionality in Progressive Web Apps.
How to analyze web performance, accessibility, SEO, etc.
Tips for improving app performance, load time, and user experience.

Prerequisite: A basic knowledge of HTML and CSS is required for a full understanding of this article.

What is a Progressive Web App?

A Progressive Web App (PWA) is a type of web application that combines the best features of traditional websites and native mobile apps. PWAs are designed to be fast, reliable, and engaging, providing a native app-like experience on the web.

Why Progressive Web Apps?

The benefits of PWA include but are not limited to:

Improved Performance: PWAs load faster and perform better, which can enhance user experience and engagement.
Offline Functionality: With service workers, PWAs can cache web page content and function offline or in low-network conditions.
Increased Engagement: Push notifications, and home screen installation, without the hassle of going to the app store increase user engagement and experience.
SEO Friendly: PWAs are discoverable by search engines, improving visibility and reach.
Safe: They are served via HTTPS to prevent snooping and ensure content hasn't been tampered with.

Progressive Web App Examples

Many big companies such as YouTube, Facebook, and even Dev.to made their web apps progressive (installable). If viewing from a mobile browser, click on the three dots at the top right corner, then click Install or add to the home screen. From a desktop, click on the install icon at the top right corner of your browser as in the image below.

How to Make Your Web Apps Installable

Whether you are building with Plain HTML, React, Vue, or any front-end framework, the steps of making your progressive web app installable are the same.
This PWA tutorial will take you through the steps.

Step 1: Set up your project.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>PWA tutorial</title>
</head>
<body>
    <section class="main">
        <h1>Recipe App</h1>
        <p>The best culinary treats</p>
        <button>Explore</button>
    </section>
</body>
</html>

CSS



body{
    background-color: aliceblue;
}
.main{
    margin: 0 auto;
    background-color: cadetblue;
    text-align: center;
    padding: 3rem;
}

h1{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #fff;
    font-size: 3rem;
}
button{
    padding: 1rem 2rem;
    color: darkcyan;
    border:#fff;
    background-color: #fff;
}
p{
    color: #fff;
    font-size: 1.6rem
}

Output

Step 2: Create a "Manifest.json" file. This step makes the app installable. The following details will make the splash screen of your application.



{
    "name": "Recipe Application",
    "short_name": "My Recipes",
    "description": "A recipe application for creating awesome recipes",
    "start_url": "/",
    "theme_color": "#000000",
    "background_color": "#ffffff",
    "display": "standalone",
    "icons": [
        {   "src": "./icon.png",
            "sizes": "192x192",
            "type": "image/png"
        }]
  }

Step 3- Link this manifest file to your HTML.



    <link rel="manifest" href="manifest.json"/>

Voila! your app is installable

Splash screen
This is the first screen that is displayed when the app is visited.

Implementing Offline Feature in Progressive Web Apps

Offline capabilities in Progressive Web Apps enhance user experience. It ensures users enjoy the app with or without an internet connection. This is possible through service workers, background sync, Caching, etc.

A service worker (SW) intercepts network requests and gives responses from the cache when internet connection is not available.
While making your PWA offline, you can code the service worker manually or utilize tools like Workbox, PWA Builder Online, PWA Studio, etc.
For this tutorial, Workbox, owned by Google is the library of choice because it offers comprehensive features like precaching, background sync, push notifications, ease of use, etc.

How to Integrate Workbox for Offline Functionality

Step 1: Install Workbox on the command line
Using "npx" ensures the latest version is always installed. If you are building with React.js, run "npm run build" before this step to generate a build folder (contains static files ready for deployment).

npx workbox wizard

Step 2: Answer questions prompts from the Workbox wizard as in the image below.
For React.js projects, the build folder should serve as the root of the application.

Step 3: Generate the Service Worker file

npx workbox generateSW workbox-config.js

Step 4: Paste this script code into your index.js file to register the SW. Ensure it is linked to your HTML document.



if('serviceWorker' in navigator){
    window.addEventListener('load', () =>{
      navigator.serviceWorker.register('/sw.js')
    })
  }

Step 5: Deploy
Service workers require https:// to ensure security. Deploy the project to Netlify, or Vercel. View the web app on the browser.

How to Analyze Web App Performance, Accessibility, and SEO

Chrome Lighthouse is a powerful tool for this analysis. Analyzing web performance, accessibility, and SEO is crucial for building high-quality web apps that provide excellent user experience.
To perform this analysis:

Open Chrome dev tools by right-clicking on your webpage.
Click on Inspect, then navigate to Lighthouse tab
On the tab click on mobile or desktop based on preference
Generate Report

Check Lighthouse Score

Best Practices for PWA Performance Optimization

Preload URLs and fonts that can slow the loading process of PWA.
Implement Lazy Loading to defer the loading of assets like images until they are needed.
Ensure clean code architecture
Remove unwanted code and spaces to improve the overall performance of PWA.

In Summary,

PWAs are web apps that give a native-app-like experience. From offline functionality to installation prompts. From background sync to push notifications, the list is endless.
Building a progressive web app is an interesting yet challenging feat, but with constant practice and attention to detail, the best user satisfaction is yet to be delivered.

Thank you for reading. Like and follow for more web development and tech-related articles. Buy Me A Coffee to Support my Work

CSS Variables (CSS Custom properties) for Beginners

Kasie Udoka Success — Tue, 18 Jun 2024 20:40:32 +0000

In our projects, we often encounter repetitive values such as width, color, font, etc. These values can lead to redundancy in our work and make it difficult to change on large projects.
This guide explains CSS variables also known as CSS custom properties in a beginner-friendly manner and a step-by-step guide for changing CSS values using JavaScript when a user performs an action such as a click.

By implementing CSS Variables, you can streamline your design process and improve the efficiency of your project.

Prerequisite: A basic knowledge of HTML, and CSS is required to comprehend this article.

What are CSS Variables?

You may be wondering if "variables" exist in CSS(Cascading Style Sheets) as it does in programming languages, and the answer is "yes". CSS variables also known as CSS custom properties are entities defined by CSS authors that express certain values to be reused across the components.

This means that CSS provides you with a tiny storage of value that can be referenced as many times as possible within your project.

Let's break this down,

Imagine two people working on a project that requires changing a brand color from red to green. Person1 edits the color on all elements in the project to green, while Person2 simply changes the CSS value on their variable to green and everything works just fine. Would you rather be Person1 or Person2?

Benefits of Using CSS Variables

Improves the readability and semantics of code
Makes changing repetitive values a lot easier.
Easy update of values dynamically using JavaScript, offering flexibility in response to user actions or clicks.

How to Declare CSS Variables

CSS variables can be declared using two dashes as a prefix for the CSS style property name, and any valid CSS value.

Syntax

--variable-name: value

This can be declared locally or globally depending on your specific need.

Local declaration means declaring the variable inside a CSS selector and, hence can only be accessed inside that scope.

/* this is a local declaration*/
header{
--brand-color: red
}

Global declaration is done using :root pseudo-class. This makes the variable accessible globally.

/* this is a global declaration*/
:root{
--brand-color: red
}

💡Note: CSS variable names are case-sensitive hence primary-Color and primary-color are not the same.

How to Access CSS Variables

CSS variables are accessed using the var() function.

selector{

property: var(--variableName)

}

How to Change CSS Variables Using JavaScript

This is helpful when there is a need to change some values when a user performs a particular action. For example, when a user should select fonts, colors, and themes on your website.

To change CSS values based on the user's actions, you have to take the following steps;

Step 1: Setup Your HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <script src="./app.js"></script>
    <title>Document</title>
</head>
<body>
    <header>
        <h1>Hello There</h1>
        <p>This is a paragraph</p>
        <button id="button" onclick="handleClick()">Change Color here</button>
    </header>
</body>
</html>

Step 2: Style your CSS;

:root{
    --primary-color: blue;
}
h1{
    color: var(--primary-color)
}
p{
    background-color: var(--primary-color);
}
button{
    border: 5px solid var(--primary-color)
}

Output

Step 3: JavaScript;
Manipulate the DOM (Document Object Model) and get the CSS selectors. e.g :root

const changeButton = document.getElementById('button')
const root = document.querySelector(':root')

Create a function for handling the click event.
In the function, change the root value by using the "setProperty" method.

function handleClick(event) {
root.style.setProperty('--primary-color', 'green')
}

The Script.js

const changeButton = document.getElementById('button')
const root = document.querySelector(':root')
function handleClick(event) {
root.style.setProperty('--primary-color', 'green')
}

Output after click

In Conclusion

This method works perfectly with any CSS value such as fonts, width, colors, etc.
To read more on CSS Style Properties please visit MDN

Please check out my other articles on Front-end development, Innermost workings of the web and How to overcome impostor syndrome in tech .

Please like, comment and follow for more web development, and tech-related articles.

Overcoming Imposter Syndrome as a Beginner in Tech

Kasie Udoka Success — Sun, 16 Jun 2024 22:38:34 +0000

In this realm of technology, where innovation and expertise thrive, many of us have faced a nagging sense of inadequacy at some point in our journey. It’s a phenomenon known as imposter syndrome.

Imposter Syndrome meaning

A persistent feeling that despite our accomplishments, we don’t truly belong, our successes are merely flukes, and any recognition we receive is undeserved.

Have you ever found yourself questioning your abilities, doubting whether you’re truly cut out for the tech world? Have you downplayed your achievements, attributing them to luck rather than skill and hard work? If so, you’re not alone. In this article, I will share my personal experience, insights, and strategies for overcoming these self-limiting beliefs as a beginner in tech.

My Story

Transitioning from a non-tech background to front-end development was not an easy feat. It was filled with fear, self-doubt, feelings of inadequacy, and intimidation. There were so many concepts and technologies to learn, and varying roadmaps to follow.

I was so confused until a friend gave me an Udemy course by Colt Steele which built a strong foundation for my front-end coding. I not only gained valuable skills but also built beginner projects. I was doing okay except that I didn't feel it internally. My projects were getting interesting, and my skills sharpening but I wasn't acknowledging them and that was imposter syndrome.

Every line of code seemed like a potential mistake, and every project was completed like a stroke of luck. Every tiny bug made me doubt myself, so I had to look for a way out. They were major issues I started having when I developed this "fraud" syndrome as referred to by National Institute of Health, these issues will be explained in the next section.

Consequences of Imposter Syndrome

Low Confidence level: This is a common tech-industry challenge for newbies. The continuous self-doubt associated with impostor syndrome leads to decreased self-confidence and reluctance to take on new challenges.

Fear of Failure: There's often an excessive fear of making mistakes with imposters in tech and any other field. This occurs due to perfectionism. Most people experiencing imposter syndrome usually want everything to be perfect. It is okay to strive for excellence but that should focus on the overall outcome rather than the "how".

Procrastination: This is a product of fear, and might lead to delays of tasks, and general weakness.

Stress and Anxiety: Continuous worry about being exposed as a fraud can lead to heightened stress levels.

Career Stagnation: Avoiding opportunities for advancement due to feeling undeserving or unqualified.

Burnout: Overworking to prove oneself can lead to burnout and health breakdown.

Isolation: This occurs when a person keeps believing that others are more competent.

How to Overcome Imposter Syndrome

Learn to celebrate your little efforts
This might seem insignificant but try to appreciate your success no matter how little. Appreciate that concept learned, that tutorial video you finished, that project you led, and that post you shared because they play an integral role in building confidence in your tech skills. Understand that every success brings you steps closer to that future you envisage.
Practice Learned Optimism:
People who believe that bad events have specific causes are more optimistic. I gained this insight from Martin Seligman's Learned Optimism book. Practicing optimism means looking at your mistakes and imperfections in a new light. This optimistic style of explaining good events internally increases self-esteem. This doesn't mean you shouldn't take responsibility for your actions but you should acknowledge your strengths and work towards developing them.
Have a Growth Mindset
A growth mindset involves the belief that skills and intelligence can be enhanced through persistent effort and determination.
This is another crucial coping strategy for imposter syndrome. Instead of viewing challenges as threats to competence, see them as opportunities to learn and improve. When faced with complex tasks, approach them with curiosity and a willingness to learn, rather than fear of failure.
Collaborate and Seek Feedback
Instead of viewing team members as competition, collaborate with them and improve your skillset. Seek feedback and work on them. Use feedback to improve your skills rather than viewing it as a reflection of your ability. Feedback is invaluable in personal and professional growth as it helps build mental resilience.
Show Your Work
You don't have to be a genius. Be an amateur. Amateurs are not afraid to make mistakes in public. Even as a professional, the best way to flourish is to retain an amateur spirit and embrace uncertainty. These words from Austin Kleon in his book Show Your Work stood out for me the most.
It is important to share that mini-project, that small milestone reached, that video edited. Learn to share the process, not only products. This way you can overcome perfectionism, and improve your self-belief as a tech professional.

One Final Note

Always strive for success despite imposter syndrome. Overcoming self-doubt in tech might be difficult but with constant practice, the process gets easier.
Celebrate your small achievements, practice optimism, develop a growth mindset, collaborate and seek feedback, and finally show your work.
Imposter syndrome can be different for everyone but this is my personal experience, research, and insights.

Please share how you overcame imposter syndrome in your career, work, or school in the comment section. Please like, comment, and follow for more web development and tech-related topics.

How the web works: page loading and beyond

Kasie Udoka Success — Wed, 08 May 2024 01:55:52 +0000

Have you ever wondered what happens behind the scenes before a website loads? It's a question that piques the curiosity of many internet users, and for good reason. Understanding the intricate processes in the moments leading up to the webpage display can unlock a deeper appreciation for the web's inner workings.

But the significance of this knowledge extends beyond mere curiosity. For users, it provides insights on navigating the web effectively and making informed choices about online interactions. For developers, it lays the foundation for building robust and maintainable web applications that deliver seamless user experiences.

In this article, we'll dive into the dynamics of the web, breaking down complex processes occurring behind the scenes.

Whether you're a curious user seeking to understand more about technology or a developer looking to enhance your web development skills, this article will provide a vivid and simplified explanation of the inner workings of the web.

Web Architecture Overview

The web is known as the World Wide Web in full. The web is a vast network of interconnected documents and resources that can be accessed over the Internet.
So the internet helps us access the web. The internet allows data to be transmitted across far distances via wireless technologies.

The basic architecture is the client-server model. The user's device serves as the client, whereas the server is an interconnection of software.

This architecture allows for separate concerns, where clients handle user interfaces, while servers manage data storage and processing.

The Web Page Loading Process

The page load process is a basic aspect of web browsing, which envelops a sequence of actions that occur when a user requests and accesses a web page.
This website dev. to is displaying to you because of some intricate actions occurring over the web.

You can view this page because:

You have a browser;
you are connected to the internet
and this website lives on a server.

Let's have a brief definition of some terms:

Browser: a software application used to access and view information on the web. They interpret the content received from servers and render it into a visual format that users can interact with. e.g. Chrome, Safari, etc.
Server: Servers are software applications responsible for serving content to clients. They receive incoming requests, process them, and send back responses containing the requested resources.
IP address: It is a unique identifier for the client device, allowing data packets to be sent across the internet.
DNS: Domain Name System is like a book that contains the server's IP address.
HTTP: stands for Hypertext Transfer Protocol. It is a protocol that defines how messages are transmitted over the web. It is like the language that clients and servers communicate with.

Here's how it works:

When a client enters a site URL(Universal Resource Locator) on their browser,

The browser goes to the DNS and gets the real address(IP address)to the website server,
the browser then sends an HTTP Request to that server, to retrieve a copy of the website,
The server processes this request and sends a copy of the website as data packets to the browser.
the browser then parses the data packets, to display the text, images, etc. that you see on the web.
The browser parses the HTML(structure) first. Followed by the CSS, and JavaScript DOM.
This is when a user sees a nice visual representation of page content to interact with.

How HTTPS (Hypertext Transfer Protocol Secure) Secures Web

Communication.

is an extension of HTTP that uses encryption protocols to secure data over the internet.

Encryption is the process of encoding data transmitted between clients to prevent unauthorized access without an encryption key.

Tech Target says that encryption is the method by which information is converted into secret code that hides the information's true meaning.

HTTPS through complex processes outside the scope of this article:

Ensures Confidentiality
Instills trust and confidence
Ensures data integrity by avoiding modification.

In Conclusion,
For a web page to display on a screen, these actions must take place to ensure user experience and security.
For a recap; when a URL is sent from a client's browser to the server, a copy of the website is retrieved and parsed by the browser to be displayed as a web page.

Web architecture may be difficult to grasp as a beginner but with time, everything gradually opens up.
For further details on the innermost workings of the web, you can visit mozilla developer network or w3.schools

Please like, comment, and follow for more web development-related content.

A Beginner's Guide to Front-End Development

Kasie Udoka Success — Sat, 04 May 2024 20:09:59 +0000

Front-end development refers to creating the visual and interactive aspects of websites and web applications that users directly interact with. It is a good choice for a long-term career change, or a side business, as it requires a low barrier to entry.
Before we dive into the steps, it is important to understand what front-end development is all about, and what front-end developers do.

This article is completely beginner-friendly and doesn't require any prior knowledge of coding.

A front-end developer is a programmer who focuses on a website or web application's user interface and user experience.

Roles of a Front-End Developer

Front-end developers form an integral part of the web development process. Specializing in crafting and refining client-side interfaces for applications and websites.
They are responsible for a variety of important tasks:

User Interface Design Implementation
Dynamic functionalities and interactivity of websites.
Ensuring Responsiveness across devices
Performance optimization
Version Control
Cross-browser Compatibility testing

User Interface Design Implementation:

Front-end Development involves crafting visually captivating interfaces through code. It involves implementing designs that align with brand objectives. This is done with a thorough understanding of front-end design.

Dynamic functionalities and interactivity of websites.

Functionalities such as button clicks are achieved in front-end coding. This ensures a smooth and seamless experience for users by optimizing the usability and accessibility of the interface

Ensuring Responsiveness across devices.

According to Exploding Topics, Over 60% of website traffic comes from mobile devices. This entails that developers should ensure responsiveness on almost all devices. Responsiveness across devices is an essential role of front-end developers.

Performance Optimization.

This is achieved by optimizing code, minimizing image size, and caching during development.

Version Control

Versioning helps developers to track changes in their projects. It helps in branch management, codebase maintenance, and documentation.

Cross browser compatibility

Front-end developers play significant roles in ensuring websites and web applications function consistently across browsers.

Essential Front End Technologies.

HTML
CSS
JavaScript
Git
JavaScript frameworks/libraries
CSS frameworks/libraries

HTML (Hypertext Markup Language):

HTML is the standard markup language for creating the structure and content of web pages. It defines the elements and layout of a webpage, such as headings, paragraphs, images, and links.

CSS (Cascading Style Sheets):

CSS is used to style the appearance of HTML elements on a webpage. It allows developers to define colors, fonts, layouts, and other visual aspects to create appealing and responsive designs.

JavaScript:

JavaScript is a programming language that allows web pages to have dynamic and interactive features.
It is used for tasks such as; button clicking and creating interactive features like sliders, carousels, and animations.

Git:

Version control systems like Git are essential tools for managing code changes, collaboration among developers, and tracking project history.

JavaScript libraries and frameworks:

This includes React.js, Vue.js, Angular, and Svelte which are used to build dynamic and interactive user interfaces for web applications. They provide reusable components, and capabilities to enhance development efficiency and maintainability.

CSS frameworks:

CSS frameworks such as Bootstrap, Tailwind CSS, and so on provide pre-designed styles and components to streamline the process of building responsive and visually consistent web layouts

How to become a front-end developer in 2024

You can become a front-end developer by enrolling in a boot camp or taking self-paced courses.
I recommend taking free courses on FreeCodeCamp to learn the basics.
Here's my advice for anyone looking to start front-end
development in 2024;

Start by learning how the web works, and understand the core concepts of web development
Learn HTML basics
Style your web pages using CSS
Build simple static websites
Learn JavaScript concepts such as variables, DOM, events, loops, etc.
Add functionalities to your styled pages
Learn version control and push your projects to Github, an open-source version control software that lets multiple people make separate changes to web pages at the same time
Always google any issues you encounter.
Learn a CSS framework, and use it for building projects.
Choose a JavaScript library or framework of choice and start learning.
Join any developers community like dev. to
Practice Practice Practice.

In Conclusion

Hone your skills. Start by structuring with HTML, styling with CSS, and interactivity with JavaScript. Use Git for version control and push your projects to GitHub for collaboration.
Front-end development might be overwhelming but you can master it by practicing consistently.

Please like, comment, and follow for more web development-related content.