DEV Community: Emmanuel Kenneth

Why I want To Be A Front-End Developer And How HNG Will Help Acheive My Goals

Emmanuel Kenneth — Wed, 29 Jan 2025 14:53:20 +0000

As someone who loves to stay a lot online, I come across so many websites with beautiful user interfaces and smooth interactions everyday, most times I even pick a product or business over it's competitors just due to the fact that their sites have better user interface and user experience.
I sat down so many times to ponder how this websites are made and how those beautiful and attention grabbing animations are put together and the technology behind them, I did some research about this to quench my curiosity and that is how I came across HTML, CSS and Javascript which are the basic building blocks of these websites I was so eager to learn these tools so I too can create these interfaces that are so soothing to the eye when you look at it.
I went online and did further research so I can get straight to learning these tools and that's how I discovered that HTML, CSS and Javascript are not the only tools used in crafting websites, I started to discover libraries and frameworks like React, Angular, Vue, NodeJS, Tailwind CSS, Bootstrap, NextJS and many more that I cannot recall right now, As a newbie I was so eager to jump into these frameworks as they looked so shiny and exciting based on the description videos I watched about them refusing to learn the basics and that was how Jumped into React with just little knowledge of HTML and CSS(which I did not even complete my tutorials on) then along the line I struggled so badly as while learning React first I was always having difficulty understanding Javascript codes written within JSX as the tutor in these youtube videos probably assumed prior knowledge of Javascript and that was how I Jumped from tutorials to tutorials around youtube and the web as I had difficulty understanding Javascript.
Along the line I met someone who is an established front end developer and told him of my problem and that was when he told me that I need to go back and understand the basics of HTML, CSS and Javascript after giving me some challenges to solve thereby accessing my poor skills of the basics.
After several months of learning HTMLS, CSS and Javascript I came back to React and observed the journey was more smoother as the only issues I had was understanding hard React concepts unlike my first try where I struggled with Javascript and React concepts simultaneously.
I am still on the journey right now, working hard on my front end skills while simultaneously doing school work, My goal is to make sure I am a cracked front end developer that can handle any task thrown at me efficiently as it is my passion like Steve Jobs says "the only way to do great work is to love what you do".

One of my motivations for choosing to be a Front-end developer is for career reasons, I would love to make a living of being a front end developer cause for me it would be a great honor to also make a living off what I love to do and that is why at the beginning of the first month of 2025 I took a decision to apply for the HNG internship program, my reasons being recommendations of friends, my friends which I met on social media or twitter to be precise who have gone through this program have told me how the HNG internship prepares you for a real work environment, how tight deadlines are which is a common phenomenon at workplaces and how much hours you would have to spend completing tasks and many meetings so my aim is to get a feeling of how a work environment feels like and what it entails so I am actually prepared for jobs, I plan to make friends during this program who could motivate me anytime I have to deal with burnouts and possibly meet the mentors in my track so I can be properly guided.
Now we have come to the end of the article I would love to say that I hope this internship program is a success for me and I get to the final stage of this program cause it is one of my main goals for enrolling for this program as it would be a great addition to my CV while job hunting in the future.

A the end of this program I expect myself to be fully ready for a work environment and to have met more front end developer like myself that I could possibly learn from.

If you need an interactive website with stunning UI for your business endeavors you can hire React developers right here

Find and Hire Elite ReactJs Developers | HNG

Hire the best Developers available for hire and freelance jobs anywhere in the world. Find Developers that suit your needs — chat with us now.

hng.tech

Props in React

Emmanuel Kenneth — Wed, 23 Aug 2023 17:54:44 +0000

Before we jump straight into this article, for you to follow along you must have a good understanding of what components in react are and some basic understanding of Javascript.
In this article we will be explaining what props are and how they are used in react and then we will dive into react code to see how props works and how they are used to share values between components.
Note: Props can only be passed from a parent component to a child components as react has a unidirectional data flow.
Props is a short form for properties, it is a way of sharing values between components or to put it in a shorter way it is an argument passed into a component, with the use of props we are able to to pass data from a parent component to a child component.
Now let’s take a look at how components share props and what problems they solve now that we know what they are;

function Button() {
   return (
  <button>Click here</button>
  )
}

function App() {
   return (<> 
   <Button />
   <Button />
   </>
  )
}

In the code above we can observe see that we have two button components rendered in the app component which will show the following in the browser

As you can see the two buttons show the same thing but you might ask what if we want these buttons to show different values or lets just say for example we want the second button to display don't click me, this is where props comes in handy to get over this obstacle, now we will create a props in the child component "Button" called text and use it as a variable in each button component rendered inside the app component;

function Button({text}) {
   return (
  <button>{text}</button>
  )
}


function App() {
   return (<> 
   <Button text="click me" />
   <Button text="Dont click me" />
   </>
  )
}

Now with this we have successfully changed the text values in the two different button components thereby overcoming the obstacle we talked about above, this code will show the following in the browser

Now this is not all we can do with props, we can also utilize the power of props to apply different styles across the two buttons;

function Button({text, color, backgroundColor}) {
  const btnstyle ={
    color: color,
    backgroundColor: backgroundColor
  }
   return (
  <button style={btnstyle}>{text}</button>
  )
}


function App() {
   return (<> 
   <Button text="click me" color="white" backgroundColor="blue" />
   <Button text="Dont click me" color="green" backgroundColor="black" />
   </>
  )
}

In the code snippet above we are able to pass values in objects as props as we could change the style of the button using the properties in "btnStyle" object. The result of our code snippet is shown below.

Conclusion

With this knowledge given to you above you should be able to pass props between components and lessen the code you have to write.
For more Information on props and how they work:https://react.dev/learn/passing-props-to-a-component

Responsive web design using CSS Media queries

Emmanuel Kenneth — Thu, 17 Aug 2023 15:39:56 +0000

In this article we will be explaining what media queries are, the use of media queries in responsive web design , why they must be used, the challenges that media queries solve, and how this challenges were overcome before the invention of media queries, but there will be no CSS code as examples as this only talks about CSS media queries and it's benefits.

What are media queries

First of all let's look at what a CSS media query is and what it does : According to the MDN documentation "Media queries allow you to apply CSS styles depending on a device's general type (such as print vs. screen) or other characteristics such as screen resolution or browser viewport width.
According to the definition above CSS media queries allows you to apply styles on a website depending on a devices characteristics such as print or screen.
As this article focuses on responsive web design using CSS media queries we will only be looking at how media queries work based on the size of a screen(screen resolution).

Use of media queries

Now how does CSS media query apply to responsive web design?
When writing out CSS code for the design of a website the CSS code output only tells the frontend developer how the website will look based on he/she's devices screen size or browser viewport height and width but the issue is when this site is pushed into production users will not always have the same screen size as the frontend developer and as a result the whole site might look messy and terrible if the user and front end developers screen size are far apart and in some cases some elements won't render properly and some elements might not even show at all.
This is where the developer has to use CSS media queries along with browser developer tools which mostly come as a package with the browser, with the use of the browser developer tools the frontend developer is able to simulate differing screen sizes and is able to see how the CSS code output looks across different screen sizes and with this the frontend developer is able to go back to his CSS code, create a media query for different screen widths and heights to apply a different CSS style to an element different from the one originally applied therefore making the site still look good and beautiful on the widths and heights specified in the media query and with this the issue of the site looking messy on different screen is eliminated making the site look pleasant for all users.

Before media queries

Now before the use of media queries responsive web design was achieved using methods like:
*Flexbox and grid, viewport units (i.e vw and vh)
*Mobile subdomains which involved creating one site for users with big screens like laptops and tablets and users with small screen such as mobile devices, fluid images.
*JavaScript and user agent sniffing where JavaScript is employed to detect the device screen size of a user and apply styles accordingly.

However the above methods are very ineffective and are not used by frontend developers in the present day as media query already provides a very efficient and better alternatives to this methods.
Thanks to media queries every user is able to enjoy the internet on whatever device they are using while simultaneously making the work of frontend developers easier as they don't have to go through rigorous methods to apply styles across different screens.

For more information on media queries and a deeper dive with code examples on how media queries are implemented I recommend this MDN article:https://www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries&ved=2ahUKEwjLorm5-9GAAxUxTUEAHYgrAKMQFnoECAkQAQ&usg=AOvVaw1v_p3zTt_PZsCrt2oJc1wF

var, let and const

Emmanuel Kenneth — Sat, 15 Apr 2023 13:33:15 +0000

var, let and const are keywords used in JavaScript for the declaration of variables.
Now before we take a look at these keywords and what makes each of them unique in JavaScript, we will have to explain two JavaScript concepts which I believe will be necessary in order to follow along with this article. These concepts are:

Variables
Scope

Now we will be looking at these two concepts in more detail;

Variables: A variable is a container used for storing values in JavaScript. This values could be data types such as strings, numbers, arrays, objects etc. When variables are declared they must be assigned a value or the variable will be automatically assigned a value of “undefined”. Take the code as an example below;

var a; // a has been declared with var but no value was assigned to the variable identifier “a”; 
console.log(a);  // this will print a value of undefined to the console
var b = 40; // 40 has been assigned to the variable b
console.log(b); //this will print 40 to the console as 40 has been assigned to the variable b

.
“in the variable above a is called the identifier and = to here is called an assignment operator”.

Scope: This is an area in a JavaScript which a variable can be accessed. We have three types of scope in JavaScript which include:
Block Scope: This is a type of scope in which variables can only be accessed within a block ({}). Here variables declared within this block cannot be accessed from outside the block, even if the block is within a function block scoped variables still have no access to the function.
Function scope: Function scoped variables are accessed from only within a function and can’t be accessed outside the function. They are also known as local scope.
Global scope: Variables that are globally scoped can be accessed from anywhere within a JavaScript code even from within a function or block. Here there is no restriction on where or where not to use a variable as the values in a variable can be accessed from anywhere.
Now that we are done explaining these two concepts let’s move unto the next phase which is explaining what var, let and const are by taking a look at their characteristics under scopes, re-assignment and re-declaration.
```
              var
```
var is the oldest keyword for declaring variables and has been around for as long as JavaScript itself.
Scope
Variables declared with var are function scoped meaning once declared in a function they can be accessed from anywhere within a function and cannot be accessed outside the function.
For example;

function example1 () {
var a = 10
console.log(a); 
}
 example1() // when the function is called here the console will print 10
console.log(a); // the console here will print “a is not defined” as it can’t access the variable (var a) within the function

Because var is function scoped even variables declared with var inside a block within a function can still be accessed by the function outside the block.
For example

function example2 (){ 
{  var b = 12; }
console.log(a);
}
  example2() // the function prints 12 to the console as it can still access the variable (var b) within the block

       Re-declaration and Re-assignment

Variables declared with var can be re-declared and re-assigned in a JavaScript program.
For example in the program below the variable ( var a) is re-declared,

var a = 30; 
var a = 40; // here the variable a is re-declared and assigned a new value of 40
console.log(a); // this will print 40 to the console

Variables declared with var can also be re-assigned “that is to chnge the value of a variable”.

var a = 40;
a =60; // here instead of the variable a been re-declared with the var keyword it is given a new value 
console.log(a) // this will print the new value of 60 to the console

Note: Although var allows re-declaration of variables it is not a good practice

let

let is a keyword for declaring variables in JavaScript, it was introduced in ES6 along with const. Unlike var which is as old as JavaScript itself, let and const were introduced in 2015.
Scope
Variables declared using the let keyword are block scoped, once variables are declared in a block using the let keyword they cannot be accessed outside the block.
For example

{ let a = 10
console.log(a); //the console will print 10
}
console.log(a); // here the console prints “a is not defined”
as it can’t access the variable ( let a) within the block

Even a function can’t access a let variable outside the block but only from within the block

function name () {
{ let a = 40;
console.log(a) // this will print 40 to the console as the function can only access the variable here
};
console.log(a) ;// this will print an error of undefined as the function cannot access the variable here

}

Re-declaration and Re-assignment
Variables declared with let cannot be re-declared,
For example

Let a = 10;
Let a = 20;
Console.log(a); // this is going to give an error (Identifier 'a' has already been declared) to the console

This doesn’t apply if the variables are declared in different scopes.

let a = 10; // at the global scope

console.log(a) //this will print 10 to the console
function name () {
    let a = 20; // at the function scope
    console.log(a) // this prints 20 to the console when the function is called
    {let a = 30; // at the block scope
    console.log(a) // this prints 30 to the console when the function is callled
}

}

name()

Variables declared with let can be re-assigned a value even within the same block and it won’t cause any issues

let a = 10
a = 20
console.log(a) // the new value of 20 assigned to a will print to the console without any issues

                  const

Variables declared with const are a constant reference to a variable.
const was introduced to JavaScript in 2015 along with let, although they are similar in some areas they have differences, we will see what is similar and what is different as we go through its characteristics.

Scope
Since const and let have the same scope (block scope) I don’t think I will need to cover it again in order not to waste much of your time.
Re-declaration and Re-assignment
Variables declared with let are similar to variables declared with const as they don’t allow re-declaration of variables.

const a = 40;
const a = 50;
console.log(a); // this will print (Identifier 'a' has already been declared) to the console

Variables declared with const do not allow re-assignment
For example

const a = 40;
a = 50;
console.log(a) // this will print the error (Assignment to constant variable.) to the console

But this doesn’t mean the values of an array or an object can’t be changed added, deleted or re-assigned when they are assigned to a variable declared with const.

const fruits = ["watermelon", "carrots", "apple", "kiwi"];
console.log(fruits) // here the full fruits array is printed to the console
fruits.pop(); // this removes the last element in the array which is "kiwi" in this case  
console.log(fruits) //here the fruits arrays printed in the console is ["watermelon", "carrots", "apple"]
 fruits.push("banana") // this adds banana to the end of the array so the console prints ["watermelon", "carrots", "apple", "banana"]
 console.log(fruits);
 // the array values can also be re-assigned
 fruits[0] = "tomato" // this replaces "watermelon" with "tomato" in the array
 console.log(fruits); // this prints ['tomato', 'carrots', 'apple', 'banana'] to the console

Object values can be manipulated and added.
For example;

const person = {
    name: "Joe",
    Age: 24
}
console.log(person) // as you can see ( {name: 'Joe', Age: 24} ) is printed to the console
person.height = "6.5ft" // this adds a height property to the person object and assigns a value of 6.5ft to it
console.log(person) // the console now prints ({name: 'Joe', Age: 24, height: '6.5ft'});
person.name = "John" // this takes the name property that is assigned a value of Joe in the person object and re-assigns john to it
console.log(person) // this prints ({name: 'John', Age: 24, height: '6.5ft'}) to the console

Now that we have come to the end of the article I want to advise developers new to JavaScript to avoid the usage of var as it causes many problems while running code, let should be used for values that can change in the program while const should be used when you are very sure that the value of the variable cannot be changed.

The Evolution of CSS

Emmanuel Kenneth — Tue, 04 Apr 2023 10:24:31 +0000

Over the years CSS goes through major changes which leads to the implementation of new features which Frontend web developers make use of to beautify websites.
Now before we go into the topic let's first take a look at what CSS is and what it does in the web browser.
CSS(Cascading StyleSheet) is a StyleSheet document used to describe the presentation of a document written in HTML or XML. It describes how elements should be rendered on a web page and on different screens through the use of media queries.
Now let's go into today's topic;
CSS gets new features added over the years by W3C specification, Each of the levels of CSS builds upon the last by adding more options to developers to describe how a HTML element should be rendered on a web page.
This CSS with new features added is called a new level, and as of now we have four levels of CSS which are

CSS level 1
CSS level 2
CSS level 3
CSS level 4 (although this isn't an entirely new level as this has no single W3C Specification) Now let's take a look at each level of CSS to see what features they had and how each new level built upon the past levels.

CSS1
The first W3C specification of CSS was published on the 17th of December 1996, Hakon Wium Like and Bert Bos are both credited as the original inventors. It was the first CSS level to become an official W3C specification.
Some of it's features include

Font properties such as typeface and emphasis.
Color of text, backgrounds and all other elements. -Text attributes such as spacing between words, letters and line of texts
Unique identification and general classification of groups of attributes
Margin, padding, border and positioning for elements The W3C no longer recommends the CSS level 1 recommendation

CSS2
CSS level 2 specification was developed by the W3C and was published as a recommendation in May 1998, As a superset of CSS1 CSS2 includes a number of new features which include:

Absolute, fixed and relative positioning of elements
Z-index
Concept of media types
Support for aural StyleSheet
Bi-directional text
new font features such as shadows The W3C no longer maintains this recommendation

CSS 2.1
This is a revision of CSS level 2. It is also known as CSS level 2 revision 1.
No new features where implemented here rather it fixes the error of CSS2 and adds already implemented browser extensions to the specification.
It was officially published as a recommendation on June 7 2011.

CSS3
CSS3 is divided into multiple seperate documents called modules.
Each of the modules extends features defined in CSS2, preserving backwards compatibility.
Due to modularization different modules have different stability and statuses.
A handful of modules have candidate recommendation status and are considered fairly stable.
Some of the main module features are
CSS3-background, CSS3-box, CSS-fonts, CSS-media queries

CSS4
There is no single specification for CSS4 because the specification has been split into multiple different modules which level independently.

The evolution doesn't stop here as modules are developed by the CSS Working group, From time to time the CSS group publishes an array of whole modules that are considered stable enough to be implemented by browser developers.
In conclusion CSS evolved from CSS1 to CSS3 thereby producing more ways by which frontend web developers could use tu style their sites and make them more beautiful and complex with properties such as animation.
After going through stages CSS3 is the W3c recommendation that is used by most Frontend Web Developers today in the styling of their websites