DEV Community: SardiusJay

Frontend Technologies

SardiusJay — Thu, 27 Jun 2024 13:32:08 +0000

Hey there!!!!

it is true that in the evolving world of technology, you may have come across software development, where you are hearing web development frontend and Backend but I will be sharing with you about Frontend Development and the Technologies behind it

let's dive in

Frontend development, also known as front-end development, refers to the process of creating the user interface (UI) and user experience (UX) for websites and web applications. Frontend developers focus on the client side of web development, ensuring that the visual elements users interact with are functional, responsive, and aesthetically pleasing.

Here are some key points about frontend development:

Languages and Technologies:

HTML (Hypertext Markup Language): Used to structure content on web pages.
CSS (Cascading Style Sheets): Styles the HTML content, controlling layout, colors, fonts, and responsiveness.

JavaScript: Adds interactivity, animations, and dynamic behavior to web pages.

Responsibilities:

-Creating responsive layouts that adapt to different screen sizes (desktop, tablet, mobile).

-Implementing user interfaces based on design mockups.

-Handling user interactions (e.g., form submissions, button clicks).

-Optimizing performance for faster loading times.

-Ensuring cross-browser compatibility.

Frameworks and Libraries:

React.js: A popular JavaScript library for building reusable UI components.
Angular: A comprehensive framework by Google for large-scale applications.
Vue.js: A flexible and lightweight framework.
Next.js: A React framework for server-side rendering (SSR) and static site generation (SSG).

Tools and Build Systems:

Webpack: Bundles assets (JavaScript, CSS, images) for production.
Babel: Transpiles modern JavaScript code to older versions for wider browser support.
Sass/LESS: CSS preprocessors for better code organization.
Collaboration:
Frontend developers work closely with designers, backend developers, and other team members to create cohesive web applications.

Something amazing about this is that I started an internship with HNG HNG Internship and it is an opportunity to learn more and challenge myself with frontend technologies like HTML, CSS, and Javascript and to build projects also.

frontend #internship #HNG

What Is Decentralized Finance (DeFi) and How Does It Work?

SardiusJay — Sun, 16 Jun 2024 13:07:50 +0000

Hey there, I believe you are planning to read this article, which means you have heard about it or you are into Web 3. We have been hearing about Web2, and now Web3 is the talk of the town, where you hear about blockchain and cryptocurrency and how people are making a lot of money from them.

But I will talk about something different but still, in the web3 ecosystem, something you may have heard before or are just coming across through this article. And it is *DeFI-Decentralized Finance *
without further ado, let's get on it

What is DeFi-Decentralized Finance?

Decentralized Finance (DeFi) is a blockchain-based form of finance that does not rely on central financial intermediaries such as banks, exchanges, or brokerages. Instead, it utilizes smart contracts on blockchains, the most common being Ethereum.

DeFi platforms allow people to lend or borrow funds from others, speculate on price movements on a range of assets using derivatives, trade cryptocurrencies, insure against risks, and earn interest in savings-like accounts. DeFi aims to democratize finance by replacing traditional, centralized institutions with peer-to-peer relationships that can provide a full spectrum of financial services, from everyday banking, loans, and mortgages, to complicated contractual relationships and asset trading.

How does DeFi work?

Now that you understand the meaning of DeFi (decentralized finance), it is also very important that you know how it works.

DeFi works by using technologies and protocols such as blockchain, cryptocurrencies, and smart contracts. Here’s a simplified breakdown:

Blockchain: DeFi is built on blockchain technology, which provides a decentralized and transparent ledger for all transactions.
Cryptocurrencies: These are used as the medium of exchange on DeFi platforms, replacing traditional fiat currencies.

Smart Contracts: These are self-executing contracts with the terms of the agreement directly written into code. They automate and enforce the performance of contracts without intermediaries.

dApps (Decentralized Applications): These are applications built on a blockchain that facilitate financial services like lending, borrowing, or trading.

Protocols: These are the rules that define how data is transmitted and shared across the DeFi network, ensuring interoperability between different services and products.

Through dApps, users engage with DeFi platforms by connecting to smart contracts that manage their assets by protocol guidelines. As a result, financial transactions can now be carried out automatically and without requiring the trust of a counterparty or middleman.

What is the goal of establishing DeFi in the blockchain ecosystem?

The primary goal of DeFi is to create an open, accessible, and inclusive financial system that operates without the need for centralized authorities. It aims to:

Democratize finance: Make financial services universally accessible, allowing anyone with an internet connection to access financial services without traditional gatekeepers.

Increase transparency: Offer more transparency in financial transactions and services through the use of blockchain’s public ledger.
Improve security: reduce the risk of fraud and corruption by removing the single point of failure that comes with centralized systems.

Enhance efficiency: Streamline financial processes by automating them with smart contracts, reducing the need for intermediaries and lowering costs.

I believe through this you have an understanding of DeFi and how it works, If this helps you, you can drop a comment about your thoughts about DeFi. You can follow me for more articles on blockchain, web3, and DeFi.

Follow me
X-SardiusJay
Linkedin-Oluwatobi Abidoye

CSS ART : Something Unique about JUNE

SardiusJay — Mon, 03 Jun 2024 22:24:28 +0000

This is a submission for Frontend Challenge v24.04.17, CSS Art: June.

Inspiration

The inspiration behind the June-themed CSS art is a blend of seasonal elements associated with the month of June.

Sun: June often marks the beginning of summer in many parts of the world. The sun is a symbol of warmth, longer days, and outdoor activities. The bright yellow sun in the art represents the sunny days of June.
Leaves: In Africa, because that is my location. June is a time of transition. it's when leaves are lush and green, while in the southern part of the country, it might be the start of autumn with leaves changing color. The green leaves in the artwork capture this duality.
Raindrops: June can bring both rain and sunshine. The raindrops symbolize the occasional showers that nourish the earth and contribute to the vibrant greenery. They also represent the unpredictability of weather during this month.
Colors: The choice of colors—yellow for the sun, green for leaves, and blue for raindrops—reflects the natural palette associated with June.

Demo

HTML CODE

<!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="index.css">
    <title>CSS Art</title>

</head>
<body>
    <div class="sun"></div>
    <div class="leaf leaf1"></div>
    <div class="leaf leaf2"></div>
    <div class="raindrop raindrop1"></div>
    <div class="raindrop raindrop2"></div>
    <div class="raindrop raindrop3"></div>
    <div class="raindrop raindrop4"></div>
</body>
</html>

CSS CODE

* {
    padding: 0;
    margin: auto;
    box-sizing: border-box;
}

body {
    background-color: black;
}

/* Sun */
 .sun {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-color: #f9d71c;
    border-radius: 50%;
}

/* Leaves */
.leaf {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 40px solid #228b22;
    transform-origin: bottom center;
}

/* Leaf 1 */
.leaf1 {
    top: 60%;
    left: 30%;
    transform: rotate(30deg);
}

/* Leaf 2 */
.leaf2 {
    top: 60%;
    left: 70%;
    transform: rotate(-30deg);
}

/* Raindrops */
.raindrop {
    position: absolute;
    width: 10px;
    height: 20px;
    background-color: #00aaff;
    border-radius: 50%;
    animation: fall 2s infinite linear;
}

/* Raindrop 1 */
.raindrop1 {
    top: 10%;
    left: 20%;
}

/* Raindrop 2 */
.raindrop2 {
    top: 15%;
    left: 40%;
}

/* Raindrop 3 */
.raindrop3 {
    top: 20%;
    left: 60%;
}

/* Raindrop 4 */
.raindrop4 {
    top: 25%;
    left: 80%;
}

/* Animation */
@keyframes fall {
    0% {
        transform: translateY(-10%);
    }
    100% {
        transform: translateY(100%);
    }
}

Journey

The Process

Inspiration: The initial inspiration came from the user’s prompt, which mentioned various aspects of June—summer solstice, falling leaves, Father’s Day, and Pride Month.

Conceptualization: I visualized a scene that combined these elements: a sunny day with green leaves, raindrops, and a cheerful vibe.

Design Choices: I chose simple shapes (sun, leaves, raindrops) and vibrant colors to represent June’s essence.

CSS Implementation: I crafted the art using CSS properties like position, border-radius, and animation.

Animation: The raindrops falling animation was added to create movement and dynamism.

What i Learn
_*CSS Art Techniques: *_Creating art with CSS involves thinking creatively within the constraints of CSS properties. It’s a fun way to blend design and code.

Symbolism: Each element in the art symbolizes something—sun for warmth, leaves for seasonal change, and raindrops for unpredictability.

what am particularly Proud of

Balancing Simplicity and Aesthetics: Achieving a visually appealing result with minimal shapes and colors.
Responsive Design: Ensuring the art adapts well to different screen sizes.

Next Steps:
Explore More Complex Art: I’d like to experiment with more intricate CSS art, perhaps incorporating gradients, shadows, and more detailed shapes.

Interactive Elements: Adding interactivity (hover effects, transitions) to CSS art for an engaging user experience.

Collaboration: Collaborating with other developers/artists to create larger-scale CSS art projects.

Embracing Gender Equality in the Tech Industry

SardiusJay — Wed, 20 Mar 2024 18:44:14 +0000

I believe that every industry is meant for everyone and every gender and the right not to look down or less of someone based on the reason of gender is important, many have stopped learning or coming to tech because they think it is only for guys which are not and also it is important o make it know and talk about how people should treat the genders in times of oppountrity and equality for the growth of the Tech Ecosystem.

there are many obstacles to gender equity in tech but the primary one is the Mindset of persons and individuals in tech, I strongly believe that if our mindset is placed well it should help bridge the issue of considering a particular gender over another.

In my few experiences In the Tech ecosystem, I have seen equity in gender based on giving the job/task to the right person because the person is good and qualified for the job not thinking maybe of the gender.

Looking ahead, the level of gender equality will improve and become better because we have seen in times and presently that the opposite gender(Female has been given the importance for them to be active and find their feet in Tech also)

the effective strategy to employ in advocating for gender equity is empowering the opposite gender(female) gender.

wecoded

How to Create a New Reposiorty on Github

SardiusJay — Sun, 25 Dec 2022 03:19:49 +0000

Introduction
There are different means of pushing your project to GitHub, it can be done manually on your Github account by dragging and dropping the file to your account or making use of Git Command and there is the advantage of using git to push to your GitHub account, But first, you must have a Github account that will help you to be able to connect it with your git and you can make use of your terminal or your command prompt as a window user but it is always advisable to use your Git.

Definition
What is Git?
Git is software for tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development. Its goals include speed, data integrity, and support for distributed, non-linear workflows.

What is Github?
GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere. This tutorial teaches you GitHub essentials like repositories, branches, commits, and pull requests.

Personal Experience when I refuse to push my project to Github
As a developer, there is always a need for you to save your project. Still, funny enough some people will say they have their Hard disk and their external storage to keep their folders and project or probably their flash drive, but am sharing this because of the problem I faced some months ago after doing numbers of the project and my hard disk got crashed I was very sad and unhappy but everything I worked for both day and night was gone. Still, some came back to me that have some of my projects pushed to my Github account I mean I was so glad and happy to continue with my project after a long period.

But come to think of it, sharing my side of the story is just to let you know that saving money in the bank is good and likewise saving (pushing) your project online(Github) is very important, I like to give you the steps needed to push your project on GitHub with ease

Let's Go

Steps involved pushing your project on Github
The following is the command for git on how to push to GitHub, The following will guide you on how to push your code to Github by using git

Step 1:- Open your Github Account, Click on New which will direct you to create a new repository

Step 2:- If you have an existing repository, then open that repository, otherwise, click on the "New" button to create a repository.

Step 3:- Enter the name and description(in which it is optional) for the repository. Then click on public or private Repository whatsoever you want to change yours to according to the requirement. Select the checkbox if you want to initialize the repository with a README

Step 4:- Then, Open your Vs code or your terminal or which one you are using but like Gitbash is still advisable for window users

Step 5:- On Your Github account there will be some codes on it, which you will need to copy and paste onto your terminal

Step 6:- The Code creating a new repository on the Command Line

echo "# pushing-project" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/SardiusJay/pushing-project.git
git push -u origin main

Then, For an existing Repository

git remote add origin https://github.com/SardiusJay/pushing-project.git
git branch -M main
git push -u origin main

Conclusion

Hope you enjoy it and now understand how to add a new repository to your GitHub account, Watch out for my next article very soon!!!! hope you learned something new. and in my next article I will be discussing how to push your project to your Github using Git(a Version control sytem)

Share with me your idea in the comment below about how this content has really helped you🤓🤓🤓

introduction to CSS Framework(Bootstrap)

SardiusJay — Mon, 21 Feb 2022 10:10:47 +0000

Introduction

There are different aspect of making using of framework in web development and more essentially in the area of a frontend Engineer, which entails the framework for CSS3 and JavaScript. for the CSS framework we have the framework which are Tailwind and Bootstrap while for JavaScript framework which is AngularJs and the javascript library are Reactjs, Vuejs.. but we are going to be discussing about Bootstrap.

Prerequisite

before you start making use of this front-end framework, there is need for you to understand the fundamentals which can also be referred to as prerequisite

And this understand can only be the way forward to making use of the Bootstrap framework as a frontend developer, this entails having understanding on how to use HTML5 And CSS3

But there must be willingness to learn and understand this to be able to use Bootstrap very well..

The goal of this article🎉

After reading this article to the end, every reader should be able to :

Understand what Bootstrap is,
What it include and the functions it can perform.
The reason for making use of Bootstrap with Html and CSS.

What is Bootstrap

Bootstrap is a free front-end framework for faster and easier web development, it include HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins

There are different type of Bootstrap

Bootstrap 3
Bootstrap 4
Bootstrap 5
There was upgrade in the development of this framework(Bootstrap) and from 3 and now to 5 and it has been able to work in different way I mean better than those available before, so we are discussing Bootstrap 5 which i will advice you to go..
Note:- The Bootstrap requires a containing element to wrap site contents.

Bootstrap Container
what is a container in Bootstrap?
Containers are used to pad the content inside of them, and there are two container classes available:

The .container class provides a responsive fixed width container
The .container-fluid class provides a full width container, spanning the entire width of the viewport

And there different container Sections:-

Fixed Container A sample of how the fixed container is programed

`<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>`

Fluid Container A sample of how the fixed container is programed

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

Container Padding A sample of how the fixed container is programed

<div class="container pt-3"></div>

Container Border and Color A sample of how the fixed container is programed

<div class="container p-3 my-3 border"></div>

<div class="container p-3 my-3 bg-dark text-white"></div>

<div class="container p-3 my-3 bg-primary text-white"></div>

Responsive Containers A sample of how the fixed container is programed

<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>

What it include and the functions it can perform.

Bootstrap it makes the website responsive and which makes automatically adjust themselves to look good on all devices, from small phones to large desktops.
it include a lot and functions that help you easily as a frontend engineer get your design done in less time than you think

Functions it can perform

i have discuss one of the functions the bootstrap can perform to make it more responsive which is the Container and others will be listed below, Follow and enjoy the ride😄 😁 😆

Bootstrap Card

A card in Bootstrap 4 is a bordered box with some padding around its content. It includes options for headers, footers, content, colors, etc.

Basic Card
A basic card is created with the .card class, and content inside the card has a .card-body class:

<div class="card">
  <div class="card-body">Basic card</div>
</div>

And in a Card we have the Header, Content and the footer. a code that display how it is arranged on a card

<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">Content</div>
  <div class="card-footer">Footer</div>
</div>

And to add a background color, we are going to be making use of Contextual Cards

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Cards with Contextual Classes</h2>
  <div class="card">
    <div class="card-body">Basic card</div>
  </div>
  <br>
  <div class="card bg-primary text-white">
    <div class="card-body">Primary card</div>
  </div>
  <br>
  <div class="card bg-success text-white">
    <div class="card-body">Success card</div>
  </div>
  <br>
  <div class="card bg-info text-white">
    <div class="card-body">Info card</div>
  </div>
  <br>
  <div class="card bg-warning text-white">
    <div class="card-body">Warning card</div>
  </div>
  <br>
  <div class="card bg-danger text-white">
    <div class="card-body">Danger card</div>
  </div>
  <br>
  <div class="card bg-secondary text-white">
    <div class="card-body">Secondary card</div>
  </div>
  <br>
  <div class="card bg-dark text-white">
    <div class="card-body">Dark card</div>
  </div>
  <br>
  <div class="card bg-light text-dark">
    <div class="card-body">Light card</div>
  </div>
</div>

</body>
</html>

The code above give illustrations of the different color that is imbedded in Bootstrap that can be use, check and enjoy the moment😀😃😄😁😆😅😊😇🙂

The reason for making use of Bootstrap with Html and CSS.

The need for responsiveness in a Website or a Web page cannot be overemphasized and making a frontend engineer happy and making the work awesome

Note that you cannot make use of Bootstrap without making use of Html and CSS and if you are reading this article I will encouraged you to read my previous articles to have the basic knowledge needed before approaching the CSS Frameworks

Conclusion

Wow😍🥰 I Hope and believe you have gain one or two things from this article, In this fantastic series of Getting Started with Bootstrap. keep an eye out for more from my blog.

You can also read this Article to learn more about Html and CSS

You can reach out to me on Twitter to learn more about any subject, and I will respond. Thank you for taking the time to read this😘.

Enjoy🎉

Introduction to CSS(Cascading Style Sheets) Understanding How CSS works with Your HTML

SardiusJay — Thu, 03 Feb 2022 15:54:24 +0000

We have to Discuss the CSS and the fundamentals of Cascading Style Sheets, As a junior web designer or web developer. you need to understand the styling of a web page or website.

Now, let's ask about the meaning of CSS?? CSS stands for Cascading Style Sheets CSS is the language we use to style a Web page. CSS describes how HTML elements are to be displayed on the screen, paper, or in other media CSS saves a lot of work. It can control the layout of multiple web pages all at once

Why do we use CSS CSS is used to define styles for your web pages, including the design, layout, and variations in display for different devices and screen sizes.

Understanding How Html works with CSS Having discussed the code of Html there are ways for you to link your Html and CSS together that will show the styling of your codes

Inline CSS *Internal CSS
External CSS
*Inline CSS:- The Inline CSS Is used within the Html code, An example will be written below

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

Internal CSS:- Internal CSS may be used if one single HTML page has a unique style. The internal style is defined inside the element, inside the head section. let's write some code and see but before that let us see<br> </p> <div class="highlight"><pre class="highlight plaintext"><code><!DOCTYPE html> <html> <body> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } < /style> < /body> < /html> </code></pre></div> <p></p> <p>External CSS:- THe External CSS is with the <link> element inside the <head> section of the Html<br> </p> <div class="highlight"><pre class="highlight plaintext"><code><!DOCTYPE html> <html> <head> <link rel="stylesheet" href="main.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> </code></pre></div> <p></p> <p>Then, the CSS will be in the next file that is been open in your IDE i.e VS code (Visual Studio Code)<br> body {<br> background-color: lightblue;<br> }</p> <p>h1 {<br> color: navy;<br> margin-left: 20px;<br> }</p> <p>Thanks for reading and I will love you to share with friends and developers that need help with this!!! </p>

The Anatomy of HTML(Hypertext Markup Language) The fundamentals of web development

SardiusJay — Thu, 03 Feb 2022 15:41:48 +0000

Hello programmer and coder out there!!

This is the second article in our series on the absolute fundamentals of knowing HTML. Our first article explained in detail what HTML Element is on a conceptual level. We looked at what a markup language is, what tags are and element can be make use of.

the newbie in tech and coming in to start with web development or too be a Frontend developer, there is always a need to start with the basics of programming that is base on Html..... and today we are going to be talking about the Anatomy of HTML... knowing the element(which we discuss with in the last article)

Anatomy is the identification and description of the structures of the elements, tags and other sources in Hyper text markup language. which deals with the skeleton of the website or web page, it will determine the web structure in terms of text,

which consist of the :- Html </> Head Body H1

Paragraph
Br
for example, let us create our first web page with Hello World!!



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Page/title>
</head>

<body>
<h1>Hello World!!</h1>
</body>
</html>

The Anatomy of Hypertext Markup Language

And that just the basics you need to know for the skeleton and foundation in dealing with HTML, but if there are others you can element that can be added it can be in the written in the comment below...

MY INTERNSHIP WITH ZURI

SardiusJay — Tue, 17 Aug 2021 15:01:39 +0000

My name is Abidoye John Oluwatobi, with the stack: Frontend Developer. I have a functioning Github and Figma account already and my E-mail: Abidoyejay@gmail.com . Am really interested in learning and acquiring this skill, Am writing this article base on my internship in Zuri I have really long for this great privilege to have internship here . I really desired to be trained and to achieve all a lot about my stack within the period of this 8 week.
Below are my goals to become a Frontend Developer in which that is my stack

I want to be a frontend developer at the end of the internship
To be able to work remotely with others
To understand from scratch to the highest of Frontend Software Developing
To build at least 5 project during the process of learning
To be able to teach others after been taught I believe from the Zuri internship I will learn how to be a Frontend Developer and this is the link to my internship arena https://zuri.team or https://internship.zuri.team and there also various links for beginner in Figma and Git https://youtu.be/3q3FV65ZrUs (Figma tutorial link) https://youtu.be/8JJ101D3knE (Git Tutorial link) https://youtu.be/W6NZfCO5SIk ( a Tutorial link to javascript for beginner). Thank you for reading.. wait for my next post!!!!!!

How Coding and Programming becomes a Passion

SardiusJay — Sat, 01 May 2021 01:10:42 +0000

My name is John oluwatobi Abidoye, Presently am a Junior Frontend developer and am aspiring to be a better programmer each and every day not more a cider.. smiles to that...😁😁..
But come to think of it, when everybody around you have no interest in programming and thinks it is something very hard.. seriously I think it was hard but it is and it is not again. While did I say this, it really can be define by your passion for something. While I really have interest was that the moment I see those code on the system(A Laptop or a PC) I just have this kind of passion to know it, But my environment is another negative factor... I know you really want to know why I chose to be a programmer and not any other thing.. hmm watch out for the next Article.. Stay tuned