DEV Community: George Kingi

How to Manage the Overwhelming Information Online as a Beginner in HTML, CSS, and JavaScript

George Kingi — Wed, 03 Jul 2024 20:18:43 +0000

The internet is a vast storehouse of information. When you browse platforms like X, Instagram, Facebook, Medium, and Dev.to and more, numerous people share valid opinions on learning, roadmaps to follow, abundant reading materials, and even quick money-making tips with minimal learning.

This can become overwhelming, leaving you confused and unsure of where to start. Some individuals are more focused on gaining followers than providing genuine help. This article aims to help you relax, learn without pressure, and strategize on managing the overwhelming amount of information available online.

As I write this article, I too aim to share valuable insights on how to handle the overwhelming amount of information available on the internet. I hope that this article will assist you, the reader, in understanding that its purpose is purely to help and not to add to the overwhelm.

Here are a few strategies you can implement to manage the overwhelming amount of information available on the internet, especially as a beginner in HTML, CSS, and JavaScript.

Start with a Structured Curriculum

Select a dependable course or tutorial series that starts with the fundamentals and advances in a logical sequence. Free platforms such as freeCodeCamp, Codecademy, and MDN Web Docs provide comprehensive and well-structured learning paths.

Set Clear Goals and Objectives

It's essential to have a clear internal dialogue and precisely define your learning goals and objectives. Challenge yourself with questions using the 5 Ws (Why, When, Who, What, Where). For instance, consider whether you aim to build a personal website, grasp responsive design techniques, or establish a solid foundation in web development.

Break Your Learning into Small Chunks

Break down your learning into smaller, manageable segments. Begin by mastering HTML tags before progressing to CSS selectors and properties.

Regular Practice

Practice is key to mastery, so apply your knowledge by creating small projects. Whether daily or every few days, the goal is consistent practice. Start with simple tasks like building a basic webpage or styling a form. Getting overwhelmed is totally normal, Programming is not a walk to the park, so practice, practice and practice.

Use Reliable Resources

Stick to a few trusted resources to avoid information overload. Some recommended sites include:
MDN Web Docs
W3Schools
freeCodeCamp
https://www.theodinproject.com/
https://www.codecademy.com/
Code in Place (stanford.edu)

Join a Community

Engage actively with online communities like Reddit, local coding meetups, or Stack Overflow. Asking questions and joining discussions can offer emotional support and motivation especially when you feel overwhelmed.

Keep a Learning Journal

Keeping a daily record of what you learn acts as a second brain, as described in some books. This practice not only strengthens your understanding but also creates a valuable reference for revisiting concepts in the future. You can maintain a learning journal on your phone.

Limit Time on Theory

Finding a balance between studying theory and engaging in practical exercises is essential in coding. Hands-on experience is crucial; simply reading code isn't enough—you must actively code and continue learning through practice.

Stay Patient and Persistent

Learning to code demands patience as it unfolds gradually. Stay resilient and remain undeterred by challenges or setbacks along the way; persistence is the key to success.

Take Breaks

Don’t overwhelm yourself. Take regular breaks to rest and recharge. This helps in maintaining focus and productivity.

Conclusion

Embarking on the journey to learn HTML, CSS, and JavaScript involves navigating a vast sea of information. To overcome this challenge, it's crucial to adopt structured learning strategies, such as choosing reliable courses and breaking down learning into manageable chunks. Practice plays a pivotal role; building small projects regularly reinforces understanding and hone practical skills. Engaging with communities and maintaining a learning journal provide valuable support and encouragement. Remember, patience and persistence are paramount—coding is a gradual process, and perseverance through challenges ensures steady progress toward mastering these essential web development skills.

What happens if you include the CSS tag inside the of an HTML document instead of the ?

George Kingi — Fri, 14 Jun 2024 20:04:45 +0000

Well, this question is beginner-friendly but invites thoughtful consideration before giving an answer.

How To Create a Virtual ATM Card using Plain HTML & CSS

George Kingi — Thu, 06 Jun 2024 15:39:23 +0000

Imagine at your disposal, you only have a picture of the Master Card Logo and another picture of the ATM card chip, you are tasked to create a visually appealing ATM card from the two separate pictures. You are about to find out how powerful CSS and HTML are. The Tech space is ever-changing but understanding these two languages is crucial for any aspiring Front-End developer.

This article will guide you on how to make the front and back sides of an ATM card from scratch. The card will flip to the back or front sides when hovered over. We will build the structure of the card using HTML, and then make our ATM card more real and appealing using CSS. This article is meant for beginners and experts in web development.

Tools We Need:

The Vs Code Editor:
A Picture of Master Card Logo
A picture of an ATM card chip

Preview of the Final output of the ATM Card

We will create the below-flipping ATM card, you will notice that once you move your cursor over the front or back sides of the ATM, the image responds by flipping on either side. Feel free to change the content of the card as the information displayed on the card is my own

Creating The ATM Card from Scratch

We will go ahead and create an HTML file and a CSS file then link them via the external style.

Follow the below steps;

Visit Google and search for “Master card logo image”. Select and save the image on your computer by either downloading it or snipping it.
While on Google, search for “ATM card chip image”. Select the chip image of your choice, snip and save it on your computer.
Create a folder anywhere on your computer, name it whatever you want and copy the two images here.
Open Vs Code Editor, go to file select open folder then select the folder you just created.

While on the Vs Code Editor, create a new file and name it index.html. The file name must have the extension .html

Create a new file and name it style.css. The file name must have the extension .css.

You should have something like the snip below, I named my folder “Atm”.

HTML Syntax

Open index.html and enter the below code:



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VIRTUAL CARD</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>    
    <section>
        <div class="Card">
            <div class="front-face">
                <header>
                    <span class="logo">
                        <img src="Chip Image.PNG">
                        <h5>Master Card</h5>
                    </span>
                    <img src="Mastercard Logo.png" class="mscard">
                </header>
                <div class="Card-details">
                    <div class="name-number">
                        <h6>Card Number</h6>
                        <h5 class="Number">2547 0080 9861 0000</h5>
                        <h5 class="name">George Kingi</h5>  
                    </div>
                    <div class="valid-date">
                        <h6>Valid Thru</h6>
                        <h5>25/03</h5>
                    </div>
                </div>
            </div>
            <div class="back-face">
                <h6>For customer service call +2547 0080 9861 or email at kingsgee@gmail.com </h6>
                <span class="magnetic-strip"></span>
                <div class="signature"><i>208</i> </div>
                <h5><p>By using this card the holder agrees to the terms and conditions under
                    which it was issued</p><br><p>This card is issued by and remains the property of Master card Bank Plc, if found please return it to any bank</p></h5>
            </div>
        </div>
    </section>
</body>
</html>

*Output: *

With the above HTML syntax, the structure of our ATM Card is set. The next step is to introduce the powerful CSS to place each of the above information into its rightful place.

Application and Implementation of different designs and styles of the ATM Card.

To understand the CSS code better, you will be required to check the comments on the code which offer ease of understanding.

The CSS Syntax



<!--Resizing the page and font type-->


*{margin: 0%; padding: 0 ;
    box-sizing: border-box;
    font-family: sans-serif;
}


<!--Adding different properties on section area-->
section{
    min-height: 100vh;
    width: 100%; position: relative;
    background-color: rgb(231, 129, 5) ;
    display: flex;
    align-items: center;
    justify-content: center;
    color: bisque;}


.Card{
    height: 225px;
    width: 350px;
    position: relative;
    z-index: 100; transition: 0.6s;
    transform-style: preserve-3d;
}


<!--Adding hover effect on the card-->
.Card:hover {
    transform: rotateY(180deg);
}


.Card .front-face,.back-face{
position: absolute;
background-color: rgba(23, 0, 0, 0.1);
height: 100%; width: 100%;
border-radius: 25px;
backdrop-filter: blur(25px);
border: 1px solid #4e1528;
 padding: 25px;
 backface-visibility: hidden;}


<!--Adding Flip on the back-face of card-->
.back-face{
    border: none;
    padding: 15px 25px 25px;
    transform: rotateY(180deg);}


.front-face .logo img{
    width: 50px;
    margin-right: 100px;

}


h5{
    font-size: 16px;
    font-weight: 400;
}


.front-face .mscard{
    width: 50px;
}


.front-face header, .front-face .logo {display: flex; align-items: center;}


.front-face header {justify-content: space-between;}


.front-face .Card-details
{margin-top: 40px;
display: flex; align-items: flex-end;
justify-content: space-between;}


h6{font-size:10px; font-weight: 400;}


h5.Number{font-size: 18px; letter-spacing: 1px;}


h5.name {margin-top: 20px;}


.back-face h6{font-size: 10px;}


<!--Adding different properties for the back of card-->
.Card .back-face .magnetic-strip
{position: absolute;
height: 40px;
background-color: black;
width: 100%;
top: 50px; left: 0;}




.Card .back-face .signature
{display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 80px;
height: 40px;
width: 85%;
border-radius: 6px;
background: repeating-linear-gradient(#fff, #fff 3px, #efefef 0, #efefef 9px);
}


.signature i
{color: black;
font-size: 12px;
margin-right: -30px;
background-color: white;
padding: 4px 6px;
border-radius: 4px;
z-index: -1;}


.Card .back-face h5
{font-size: 9px;
margin-top: 10px;}

Output:

Conclusion

In summary, CSS is so powerful that it can do almost anything, we just created an ATM card, surely CSS can do anything, and developers are encouraged to be more creative to cultivate this knowledge.

The same knowledge can be applied in the creation of wonderfully designed websites including; Portfolio websites, E-commerce websites, Personal Websites, Business websites, etc.

How to Create a Responsive Card Using Plain HTML & CSS

George Kingi — Tue, 04 Jun 2024 23:26:33 +0000

When you go online, and visit different websites, you will always come across websites that have an image with text at either the top or bottom of the image. A profile picture on a platform with bio text at the bottom is a perfect example of this context.

The image with the text is called a CARD in HTML and CSS. A card contains a title, a picture (photo), and descriptive information. This article is about how to create a card (image) that responds by either moving up or down once hovered over. It will serve both beginners and experts in HTML and CSS.

Preview of the Final Responsive Card Output

We will create the below responsive card, you will notice that once you move your cursor over any of the three images, the image responds by either moving up or down, some exciting but basic animations.

Creating the Responsive Card from Scratch

We will first create the structure of our project using the markup language, HTML, then proceed to style it up using CSS.

Step-by-Step Process of Creating the Responsive Card

Download 3 Pictures of your choice (Click here for free pictures:(https://unsplash.com/s/photos/forms)
Create a folder and give it a name of your choice (I named my folder “Box or Card”).
Open the folder you just created and inside it create another folder, give it a name of your choice, and move the pictures you just downloaded here.
Open Vs Code Editor, go to file select open folder then choose the folder you just created.
While on the Vs Code Editor, create a new file and name it index.html. The file name must have the extension .html
Create a new file and name it style.css. The file name must have the extension .css and link the two files as seen in the below syntax
You should have something like the snip below; I named my pictures; Growth, Development, and Reproduction.

HTML Syntax

Open index.html and enter the below code;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BOX OR CARD</title>
    <link rel="stylesheet" href="style.css">
</head>
<h2>RESPONSIVE SERVICES CARD BY KINGSGEE</h2>
<body>
    <H3>DISCUSSION ON GROWTH, DEVELOPMENT AND MATURATION</H3>


<div class="container">
    <div class="box">
        <img src="Growth.jpg" alt="">
        <h3>Growth</h3>
        <p>Growth is the change in  physical characteristic of an individual
            increase in weight or length
        </p>
        <button class="button">See more</button>
    </div>

Output:

Continuation of the HTML Syntax


To add more images  add the code below;

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BOX OR CARD</title>
    <link rel="stylesheet" href="style.css">
</head>
<h2>RESPONSIVE SERVICES CARD BY KINGSGEE</h2>
<body>
    <H3>DISCUSSION ON GROWTH, DEVELOPMENT AND MATURATION</H3>


<div class="container">
    <div class="box">
        <img src="Growth.jpg" alt="">
        <h3>Growth</h3>
        <p>Growth is the change in  physical characteristics of an individual
            increase in weight or length
        </p>
        <button class="button">See more</button>
    </div>
    <div class="box">
        <img src="Development.jpg" alt="">
        <h3>Development</h3>
        <p>This refers to the change in a structure such as thoughts or behavior of an individual
        </p>
        <button class="button">See more</button>
    </div>
    <div class="box">
        <img src="Reproduction.jpg" alt="">
        <h3>Maturatiion</h3>
        <p>Its the emergence of unfolding of an individual genetic potential as they become older
        </p>
        <button class="button">See more</button>
    </div>
</div>
<br><br>
<h3>&trade; &copy;+254700809861 for more inquiries</h3>
</body>
</html>

Output:

With the above HTML syntax, our structure is set. The next step is to introduce the powerful CSS to make our images responsive.

Application and Implementation of different designs and styles on Cards.

Discussing the Asterisk ( *), Margins, Border, Padding, and other CSS styles

The Asterisk (*):➜ is the CSS universal selector that selects all elements in the HTML document

Margin:➜ Used to create extra space around an element.

Border:➜ Used to set an element’s border.

Padding:➜ Used to create space between the content of an element and its border, the default state is 2px.

CSS Hover, Transform, Transition, and some Animations and how to apply them

* {
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: arial;
}


<!--Adding color on background-->
body{
    background-color: #146f6f;
    padding-top: 50px ;
    padding-bottom: 100px;
}


<!--Adding color on the headings-->
h2{
    color: #0c0115;
}


h3 { color: #0c0115;
    font-size: 30px;
    margin-top: 10px;
}


.container{
    padding-top:50px;
    gap: 25px ;
    margin: auto;
    display:flex;
    justify-content: center;
}


<!--Adding responsiveness to the images-->


.box{width: 320px;
    height: 500px;
    background-color: #3ea9a9;
    border-radius: 100px;
    transition:transform 0.6s ease;
}


<!--Adding hover-->


.box:hover{
    transform: translateY(30px);
}


.box img{
    width: 250px;
    height: 250px;
    padding-top: 30px;
    border-radius: 30%;
}


.box p {
    color: #1a082a;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 25px;
    font-family: Georgia;
    font-weight: 5px;
}


.box button{
    width: 150px;
    height: 40px;
    background-color: #1c092e;
    border-radius: 10px;
     border: none;
     color: #b788e2;
     font-size: 17px;
     font-weight: bold;
     margin-top: 2px;}


.box button:hover{
    background-color: #1232ea;
    color: whitesmoke;
    border: 2px solid salmon;
}

Output:

Importance of Cards in Web Development

A card’s importance can not be downplayed as it is crucial in providing a user-friendly representation of information. A card provides a summary of what the developer intends to represent in a visually appealing way, notice that in our mini project above, we were able to add pictures, put some text, and define what the pictures are about, they look good, right? 90% of online websites have an aspect of card and developers should embrace this exciting skill. While this article has only touched base, developers are encouraged to keep on learning different CSS card designs.

Conclusion

In summary, our mini project above has helped us create a web page that has some animation, user user-friendly, and easy to read. Design cards are essential in displaying content in an effective and organized manner making a website user-friendly and visually appealing as we can see.
This knowledge can be applied in the making of different types of websites including; Portfolio websites, E-commerce websites, Personal Websites, Business websites, etc. Thanks to the internet, I can voice my valid opinions and help other developers learn and grow in Tech.

The Power of CSS in Styling-up Forms

George Kingi — Sat, 25 May 2024 18:06:59 +0000

This is the second part of our mini project on creating an Online Flipping Form. Here is the link for Part 1, (https://dev.to/george_kingi/how-to-create-an-online-flipping-form-using-plain-html-and-css-4ka5.)

In part 1, we focused on the HTML and created the structure of the Front and Back sides of the online form. In this section, we will dive deep into CSS, introduce unique styling on our forms, and give some highlights on Javascript.

Harnessing the Power of CSS in Styling-up Forms

Remember, we created a CSS file and linked it with the HTML file, Let's journey together in making the form flip; We affect changes on all elements on the webpage, and we select the elements using the Universal Selector (*) as below.

We then style up the container as below: as we style the container, notice that the output affects the contents and background of our webpage.

*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}


.container{
    height: 100vh;
    background: #f53207;
    color: #340707;
    display: flex;
    align-items: center;
    justify-content: center;
}

Output:

We additionally select the card for further styling. Remember to include the. (dot)

*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}


.container{
    height: 100vh;
    background: #f53207;
    color: #340707;
    display: flex;
    align-items: center;
    justify-content: center;
}


.card{
    width: 350px;
    height: 550px;
    box-shadow: 0 0 20px 20px #16010142;
    border-radius: 50px;
}

Output:

As we wind up styling our form, we apply some styling on the inner-card, card-front, card-back, and so on as below.

.card{
    width: 350px;
    height: 550px;
    box-shadow: 0 0 20px 20px #16010142;
    border-radius: 50px;
}


.inner-card{
    height: 100%;
    transform: rotateY(180deg);
    transform-style: preserve-3d;
}


.card-front, .card-back{
    position: absolute;
    height: 100%;
    padding: 50px;
    background-color: #931c02;
    box-sizing: border-box;
    backface-visibility:hidden;
    border-radius: 50px;
}


.card-back{
    transform: rotateY(180deg);

}


.card h2{
    font-weight: normal;
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
}


.input-button{
    width: 100%;
    background: transparent;
    border: 1px solid #5e0b0b;
    margin: 6px 0;
    height: 32px;
    border-radius: 20px;
    padding: 5px;
    box-sizing: border-box;
    text-align: center;
}


::placeholder{
    color: #fff;
    font-size: 12px;
}


button{
    width: 100%;
    background: transparent;
    border: 1px solid #fff;
    margin: 25px 0 10px;
    height: 32px;
    font-size: 20px;
    border-radius: 20px;
    padding: 2px;
    box-sizing: border-box;
    outline: none;
    color: white;
    cursor: pointer;
}


.submit-btn{
    position: relative;
}


.submit-btn::after{
    content: '\27a4';
    color: #333;
    line-height: 32px;
    font-size: 12px;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    right: -1px;
    top: -1px;


}


span{
    font-size: 20px;
    margin-left: 10px;
}


.card .btn{
    margin-top: 10px;
}


.card a{
    color: #fff;
    text-decoration: none;
    display: block;
    text-align: center;
    font-size: 13px;
    margin-top: 8px;


}

To learn more about CSS selectors, properties, colors, and more visit https://www.w3schools.com/css/default.asp

The Output:

We need to introduce some Javascript in our form to provide some interactivity, as such, locate the last div and input the script below,

Here are the final HTML and CSS codes that will indeed make our form flip on click as below

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online Flipping Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="inner-card" id="card">
                <div class="card-front">
                    <h2>LOGIN</h2>

                <form>
                    <input type="email" class="input-box" placeholder="Email" required>


                    <input type="number" class="input-box" placeholder="Phone Number" required>


                    <input type="password" class="input-box" placeholder="password" required>


                    <button type="submit" class="submit-btn">Submit</button>


                    <input type="checkbox"><span>Remember me</span>


                    <button type="button" class="button" onclick="openLOGIN()">I am New Here</button>


                    <a href="">Forgot password</a>
                </div>


                </form>


                <div class="card-back">
                    <h2>REGISTER</h2>


                    <form>
                        <input type="text" class="input-box" placeholder="Full Name" required>


                        <input type="email" class="input-box" placeholder="email" required>


                        <input type="number" class="input-box" placeholder="Phone Number" required>


                        <input type="password" class="input-box" placeholder="password" required>


                        <input type="date" class="input-box" placeholder="DOB" required>


                        <button type="submit" class="submit-btn">Submit</button>


                    <input type="checkbox"><span>Remember me</span>


                    <button type="button" class="button" ondblclick="openREGISTER()">I have an Account</button>


                    <a href="">Forgot password</a>


                    </form>

                </div>
            </div>
        </div>
    </div>
    <script>
        var card =document.getElementById("card");


        function openLOGIN(){
            card.style.transform = "rotateY(-180deg)";
        }


        function openREGISTER(){
            card.style.transform = "rotateY(0deg)";
        }
    </script>
</body>
</html>

Our Final CSS File should have the below code.


*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}


.container{
    height: 100vh;
    background: #f53207;
    color: #340707;
    display: flex;
    align-items: center;
    justify-content: center;
}


.card{
    width: 350px;
    height: 550px;
    box-shadow: 0 0 20px 20px #16010142;
    border-radius: 50px;
}


.inner-card{
    height: 100%;
    transform: rotateY(180deg);
    transform-style: preserve-3d;
    transition: transform 2s;
}


.card-front, .card-back{
    position: absolute;
    height: 100%;
    padding: 50px;
    background-color: #931c02;
    box-sizing: border-box;
    backface-visibility:hidden;
    border-radius: 50px;
}


.card-back{
    transform: rotateY(180deg);

}


.card h2{
    font-weight: normal;
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
}


.input-box{
    width: 100%;
    background: transparent;
    border: 1px solid #5e0b0b;
    margin: 6px 0;
    height: 32px;
    border-radius: 20px;
    padding: 5px;
    box-sizing: border-box;
    text-align: center;
    color: white;
}


::placeholder{
    color: #fff;
    font-size: 12px;
}


button{
    width: 100%;
    background: transparent;
    border: 1px solid #fff;
    margin: 25px 0 10px;
    height: 32px;
    font-size: 20px;
    border-radius: 20px;
    padding: 2px;
    box-sizing: border-box;
    outline: none;
    color: white;
    cursor: pointer;
}


.submit-btn{
    position: relative;
}


.submit-btn::after{
    content: '\27a4';
    color: #333;
    line-height: 32px;
    font-size: 12px;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    right: -1px;
    top: -1px;


}


span{
    font-size: 20px;
    margin-left: 10px;
}


.card .btn{
    margin-top: 10px;
}


.card a{
    color: #fff;
    text-decoration: none;
    display: block;
    text-align: center;
    font-size: 13px;
    margin-top: 8px;


}

The output will be as below:

(Never mind the quality 🤭😀)

How to create an Online Flipping Form using Plain HTML and CSS

George Kingi — Sat, 25 May 2024 17:13:42 +0000

Almost everyone who has used the Internet has come across Forms, many Internet users who are familiar with forms have come across them when signing up or joining a particular platform, it could be a Gmail sign-up page, Instagram, Facebook, or many other platforms. It is safe to think of a form as a door that can enable access to some information once opened. This article serves both beginners and experts in web development.

This article will showcase how to create an online flipping form, we will create a sign-up page for new users and a log-in form for existing users. The form will flip on click to the sign-up page if one is a new user and flip on click if one is an existing user. We will dive in shortly and it will come clear. We will build the structure of the form via HTML, make our form look good using CSS, and then introduce some Javascript for interactivity.

To make this more fun, we will break it down it two parts;
Part 1 → Will cover the HTML part.
Part 2 → Will cover the CSS part. Here is a link for part 2. https://dev.to/george_kingi/the-power-of-css-in-styling-up-forms-o8m

Let's grab a seat, shall we?

A form is a container that allows users to input data and submit it to a web server for processing. Forms are fundamental in enabling user interaction and data submission. The <form> <\form> element defines a form in HTML.

Definition and Uses of Tags

When creating a form, the <form> element acts as a container for other elements. The space within the form is defined by the <input> tag which allows users to input data. The <input> tag is defined by the type attribute which sets data in the form of text, number, date, image, reset, etc, while the placeholder provides the watermark.

Examples:
<input type =”text” >
<input type= “number”>

It is possible to define a class within the <input> element as we can see below, to allow for styling of the contents of the tag. The Placeholder attribute provides a watermark for the “First name”.

<input type="text" class="input-box"  placeholder="First name"  required>

An Overview of the Final Form

A Preview of the Front and Back of the Form

Creating The Online Flipping Form from Scratch

We will go ahead and create an HTML file and a CSS file then link them via the external style. Our code editor for this case will be the VS Code.

To create the Form follow the below steps;

Create a folder and name it whatever you want.
Open Vs Code Editor, go to file select open folder then select the folder you just created.
While on the Vs Code Editor, create a new file and name it index.html. The file name must have the extension .html
Create a new file and name it style.css. file. The file name must have the extension .css.

You should have something like the snip below, I named my folder “FLIPPING FORM”.

You do not need to generate the below code line by line, just hold shift and press the ! (exclamation mark ) on the keyboard, and the below code will be auto-generated, change the title to whatever you want,
Then use the link element to connect the HTML and CSS files as below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online Flipping Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>

The first step, declare three <div>s with their respective classes as we can see below, and then declare our <form> tag in the last <div>. Remember to name the heading of your page and the title which in this case is “Online Flipping Form” and ”‘Login” respectively.

To note, the class names we declared are random names that will help us when using CSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online Flipping Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container" >
        <div class="card">
            <div class="card-front">
                <h2>Login</h2>
                <form>
                </div>
                </form>
        </div>


    </div>

</body>
</html>

Within the <form> tag, we introduce the tag which allows users to input data in the form.

<body>
    <div class="container" >
        <div class="card">
            <div class="card-front">
                <h2>Login</h2>
                <form>
            <input type="email" class="input-button" placeholder="Email" required>
                </div>
                </form>
        </div>


    </div>

</body>

With the above code, the output on the browser is displayed as below.

We go ahead and create more forms as per our target project. See the below code block that will do the trick.

<body>
    <div class="container" >
        <div class="card">
            <div class="card-front">
                <h2>Login</h2>
                <form>
      <input type="email" class="input-button" placeholder="Email" required>


   <input type="number" class="input-button" placeholder="Phone Number" required>


    <input type="password" class="input-button" placeholder="Password" required>


    <button type="submit" class="submit-btn">Submit</button>


      <input type="checkbox" class="checkbox"><span>Remember me</span>


       <button type="button" class="btn">I am new here</button>


          <a href="">Forgot password</a>


                </div>
                </form>
        </div>


    </div>

</body>

With this, the output should be as per the below; Remember, we are creating a flipping form that has two sides, so let's call the below output the front side of the form.

Let's go ahead and create the back of the form and to do so, we declare another

tag and other DIVs as below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online Flipping Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container" >
        <div class="card">
            <div class="card-front">
                <h2>Login</h2>
  <form>
    <input type="email" class="input-button" placeholder="Email" required>


   <input type="number" class="input-button" placeholder="Phone Number" required>


    <input type="password" class="input-button" placeholder="Password" required>


   <button type="submit" class="submit-btn">Submit</button>


    <input type="checkbox" class="checkbox"><span>Remember me</span>


   <button type="button" class="btn">I am new here</button>


                    <a href="">Forgot password</a>

                </div>
                </form>


                <div class="card-back">


                    <h2>Register</h2>


                    <form>
      <input type="text" class="input-button" placeholder="Full Name" required>


     <input type="email" class="input-button" placeholder="Email" required>


   <input type="number" class="input-button" placeholder="Phone Number" required>


   <input type="password" class="input-button" placeholder="Password" required>


<input type="date" class="input-button" placeholder="Date-of-Birth" required>


   <button type="submit" class="submit-btn">Submit</button>


    <input type="checkbox" class="checkbox"><span>Remember me</span>


     <button type="button" class="btn">I have an Account</button>


         <a href="">Forgot password</a>


           </form>


                </div>
        </div>


    </div>

</body>
</html>

With the above code, our HTML structure is set. The browser should display the below output.

This brings us to the end of Part 1 on how to create an online flipping form. Part 2 will focus on how to make our form look good, introduce different styles on all the elements of the form, and finally make the form flip.

Here is the link to the Part 2: https://dev.to/george_kingi/the-power-of-css-in-styling-up-forms-o8m

How to Structure an HTML Document Correctly

George Kingi — Sun, 19 May 2024 14:42:09 +0000

Learning and understanding HTML is like building the foundation and structure of a house, HTML is the foundation of building up webpages and is the key tool for website development. It is almost impossible to discuss HTML without discussing CSS as both languages work hand in hand.

Once you finish building a home, you furnish it right? Like, you have to do interior decoration, beautify it, put the sofa set on a particular side of the living room, and so on, in web development, CSS helps us with the decoration and styling of our website. This article is meant for newbies in HTML but will offer some insight to the experts about how well to structure the HTML code.

There have been different versions of HTML over time and the present version is HTML5 which supports more features that make it possible to do more including Figure & Figcaption, Details, Progress & Meter

The Standard HTML5 Structure

A standard and basic HTML5 document is structured as below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
   <!-- the body is the container for the content of a webpage -—>
</body>
</html>

As a beginner, you see the code above and you get the feeling that this is a tall order, you may even be tempted to try to memorize the code or other codes you come across, but the real trick is to calm down, and try to understand the code instead. There is so much free information on the internet, you can google for codes anytime you feel stuck, just to get an idea and an understanding.

So, stop cramming codes: all the codes in the world are freely accessible on the internet.

The arrangement of the HTML document above is extremely important as we can highlight different items worth noting:

<! Doctype html>: This tag tells the browser that the document type is HTML5. The browser on the other hand can allow for additional features that HTML5 came with including a much faster load time, better media support, and mobile optimization.

<html lang ="en">: This tag is the root element that shows that the webpage is written in HTML5, the lang attribute tells the browser that the HTML language is English (en). The language (lang) can be changed to other languages like French (fr), Spanish (es), and many more languages.

Discussing the Head Section
A standard head section (which is also referred to as the ‘head element’) has the opening and closing tags <head> </head> and houses the metadata. Metadata is simply the data about the HTML document, however, this data is not visible on the browser, it only helps the browser to interpret the content of the code. Meta tags are self-closing which is equally important.

Our code below helps the browser interpret the data as below.

<meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

What is the purpose of the meta tags?

`<meta charset = "UTF-8">: This tells the browser what set of characters we are using. UTF-8 stands for Unicode Transformation Format and web developers are encouraged to use the UTF-8 character set which covers many characters and symbols.

<meta name = "viewport" content=" width=device-with" initial-scale=1.0>: This tag is used to control the layout of websites on different devices such as mobile devices, laptops, etc.

As a web developer, you can add even more meta tags depending on how you wish your website to perform, for instance, you can set your browser to refresh after every 15 seconds. Below is a meta tag that does the trick.

<meta http-equiv= "refresh" content="15">

The meta tag can offer more information about the web page description, published date, author, keywords, etc.

The head section also houses more common elements such as:

<title>: A tag that specifies the title of a web page.

<link>: A tag that helps to connect the html document with other files

<script>: A tag that is used to include JavaScript

<base>: A tag that is used to specify the base URL for all relative URLs

To note, the <body> tag houses all the website's content including paragraphs, images, lists of items, etc.

CSS Presentation

Once our HTML structure is set, we introduce CSS to make the webpage look good, and to do so, we can incorporate any of the three different types of CSS below to link an HTML file with the CSS file. It is important to note that CSS and HTML are so reliant on each other that one can not work on its own without the other. When using CSS, we select the HTML element first then we decide what kind of decoration or styling we use.

Inline Style:
<tag style=" property: value">

Embedded Style:

<head>
<style type="text/css" selector{property:value}>
</style>
</head>

External Style Sheet:
<head>
<link rel="stylesheet" type="text/css"href= "style.css">
</head>

Some Important CSS Selectors

W3schools defines CSS selectors as patterns used to select the element(s) you want to style. Below are some important selectors/patterns with different uses.

*(asterisk): It selects and applies styling on every element in a webpage.

<tag *>: A tag followed by the asterisk selects all elements within a tag

. class: Selects all the elements with the class class. Notice that when selecting a class, we add a dot (.) before the name of the class.

# id: Select elements within id (id in CSS stands for identifier), to select the id, you begin with the # (hash) sign before the name of the id you are selecting.

tag.class: All tags with class class.

Importance of Observing The Standard HTML Structure

An HTML document must be structured correctly, if not, it will cause the browser to show contents incorrectly or not show contents at all. It is therefore important to observe and implement the standard structure of an HTML document. The standard structure provides a way to organize the contents of a web page such as images, headings, videos, etc

The HTML structure also defines things like headings, links and thus giving the document meaning. The sequence of elements used in HTML instructs the browser on how to display content.

Conclusion

All browsers support HTML and not just HTML but a well-structured HTML document. Therefore, for web developers, it is crucial to have the HTML document properly organized. Web developers are encouraged to continuously learn how to arrange elements while observing the standard structure. They are also encouraged to learn the coding concepts and code more.

Ways to Add CSS in HTML: Understanding Inline, Internal & External Styles

George Kingi — Wed, 24 Apr 2024 21:04:50 +0000

This article provides a comprehensive guide for Web development learners on CSS styling methods.

CSS stands for Cascading Style Sheet and is defined as a programming language used to design website content. HTML (Hyper Text Mark Up Language) is a programming language for creating websites' structure and content, let's say that it was possible to do some basic styling using HTML. Therefore, both languages work hand in hand.

Discussing Types of CSS

There are 3 types of CSS. Below is a highlight of the same;

Inline Styling: This is done when we apply a style directly to a particular HTML element. In other words, we use the style attribute within an HTML Tag. This style overrides Internal and External styles.

Embedded/ Internal Styling: This is done when we include our style in the HTML document; usually we declare the <style> tag at the head section of the HTML file.

External Styling: When we write our style in a separate file with a .css extension, then apply style properties to the file. A <link> tag is then used to link this file to the HTML file.

Note: We will be using the VS Code editor and will go ahead to create both the HTML and CSS files represented below:

We will also create an HTML code with the title; ‘Types of CSS’ and a paragraph <p> ’I am learning CSS styles, it’s not easy but I am determined to commit at least 2 hours daily just to learn’. We will also create a CSS file and utilize it later.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Types of CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>I am learning types of CSS, it's not easy but I am determined to commit at
        least 2 hours daily to just learn</p>
</body>
</html>

Below is the output that we get on the browser with no styling.

How to Add Internal Styling With Coce Examples

We will go ahead and apply internal styling with the code above. Think about it for a moment, how do you change the color of the paragraph? Well, here is how you do it using the internal styling; see the below code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Types of CSS</title>
</head>
<body>
    <p style="color: red;">I am learning types of CSS, it's not easy but I am determined to commit at
        least 2 hours daily to just learn</p>
</body>
</html>

The Output is as below on the browser;

See? We have used the style attribute within the paragraph tag <p> to make the paragraph color red.

How to Add Embedded/Internal Styling With Code Examples

We will also go ahead and apply the embedded or internal style to our paragraph above; remember, in this type of CSS, we declare the <style> tag at the head section of our HTML file as per the below, and for that case, let's pick a different color for our paragraph, let's go by color BLUE. It's important to note that all rulesets must have the opening and closing curly braces in CSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Types of CSS</title>
    <style>
        p{
            color: blue;
        }
    </style>
</head>
<body>
    <p style="color: red;">I am learning types of CSS, it's not easy but I am determined to commit at
        least 2 hours daily to just learn</p>
</body>
</html>

Below is the final Output of the code above;

What do you notice here? Did the color change to Blue? It remained Red, right? This is because Inline styling is much stronger and overrides Internal and External styles. To change the outcome, we will have to eliminate the inline style and when we do, the outcome is as below;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Types of CSS</title>
    <style>
        p{
            color: blue;
        }
    </style>
</head>
<body>
    <p>I am learning types of CSS, it's not easy but I am determined to commit at
        least 2 hours daily to just learn</p>
</body>
</html>

How to Add External Styling With Code Example

Remember we created a file by the name style.css? This is where we will make use of it. So we will go ahead and open the style.css file and declare our style on the paragraph as below; To note, Internal/Embedded styling is much stronger and overrides External style. So we shall eliminate the internal style in our HTML file.

We must link our HTML and CSS files together otherwise the styles will not affect

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Types of CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
    <p>I am learning types of CSS, it's not easy but I am determined to commit at
        least 2 hours daily to just learn</p>
</body>
</html>

p {
    color:darkorange;
}

This is our output on the browser.

NOTE: It’s important to note that we have only worked with one Property Type, the Color, otherwise many CSS Properties and decorations can be applied including background, borders, positioning, etc.

There is also another type of CSS called Importing Style which is not commonly used. The style is somehow similar to linking; however, the syntax for importing the style sheet is @import followed by the keyword URL and the actual URL of the style sheet.

Importance of CSS in HTML

CSS is a critical component for web development as it provides the required tools for styling and designing websites. HTML alone provides the structure of a website, and CSS is majorly responsible for making a website visually appealing.

Summery

We have discussed the different types of CSS and how they can be used. All these styles are equally important as they style up websites and their contents differently. Developers can make informed decisions on which style to go for and when to use each style.

We have only discussed the basics of CSS, building an eye-catching website requires a deep understanding of both HTML and CSS. Beginner developers are encouraged to practice the different styles.

How To Create a Table in HTML and CSS with Code Examples

George Kingi — Wed, 17 Apr 2024 22:38:52 +0000

When you intend to create a structured data set in tabular format, a table will do the trick. This article is just about that as we will dive into it by creating a beautifully designed table. This will serve both beginners and experts in HTML and CSS. This article will also offer excellent teachings on creating a table using HTML to present tabular information and designing the same using CSS.

There are so many text editors, but we will use VS Code and create a food timetable.

Let's go!

THE TABLE DEFINITION in HTML

A Table in HTML can be defined as a tabular representation of data or information in rows and columns. Mastering the art of creating tables is key to the web development journey as they present both text and numerical data clearly and effectively. We will explore different options to unlock the potential of HTML tables.

DEFINITION and USES of TABLE TAGS

To create a table in HTML, it is important to understand the table tags. The <table> tag is the most important as it acts as a container for the entire table. A table is made up of 3 segments which include;

Table header <thead>: Refers to the cells and data written in at the top of the table.
Table body <tbody>: Refers to the main content of data in the table
Table footer <tfoot>: Refers to the cells and data written at the bottom of the table

Other Common HTML Table Tags:

<tr>: Used to represent table rows
<th>: Used to represent table headings
<td>: Used to represent table data cells

AN OVERVIEW of the FINAL PROJECT TABLE OUTPUT

PREVIEW of the FINAL TABLE OUTPUT

PREVIEW of the DIFFERENT STYLES APPLIED on the FINAL TABLE OUTPUT

DISCUSSING the HTML TABLE SYNTAX

In HTML and CSS, syntax can be defined as the order in which elements are written. Every programming language must observe the syntax rules. The elements that make up a table are the tags that create the structure of a table.

CREATING the FOOD TIME TABLE FROM SCRATCH

This is where the real work begins, it is important to come up with a title and a heading for your table, the below code will do the trick.

CREATING the TITLE of the PAGE, TABLE HEADING and TABLE TAG

<title> tag creates the title: FOOD TIME TABLE
<h2> tag creates the heading: AROMA LA CAFE’ FOOD TIMETABLE
<table> tag is the container of the entire table.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FOOD TIME TABLE</title>
</head>
<h2>AROMA LA CAFE' FOOD TIMETABLE</h2>
<body>
    <table>



    </table>

</body>
</html>

Below is the output of the above HTML code. It is important to note that the table is already created by the <table> tag but we may need help to view it as we are yet to define the rows and columns.

PRACTICAL USE of TABLE TAGS

Table head contains the Table row <tr>, the table heading is defined by the <th>tag,

<tbody> contains the <tr> and Table data <td>. It is important to observe the order and arrangement of these tags as they are the key to displaying structural content.

<h2>AROMA LA CAFE' FOOD TIMETABLE</h2>
<body>
    <table>
        <thead>
            <tr>
                <th>DAY</th>
                <th>BREAKFAST</th>
                <th>LUNCH</th>
                <th>SUPPER</th>
                <th>SNACK</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>MONDAY</td>
                <td>Bone Soup</td>
                <td>Ugali & Beef</td>
                <td>Rice & Beans</td>
                <td>Orange</td>
            </tr>
            <tr>
                <td>TUESDAY</td>
                <td>Cappucino & Samosa</td>
                <td>Vegetable Rice</td>
                <td>Sweet Potatoes</td>
                <td>Apple</td>
            </tr>

With the above code, we can see the below output.

Finally, our last HTML syntax is shown below.

<tr>
                <td>WEDNESDAY</td>
                <td>Green Tea Samosa</td>
                <td>Fries</td>
                <td>Brown Bread Smashed Potatoes</td>
                <td>Fresh Juice</td>
            </tr>
            <tr>
                <td>THURSDAY</td>
                <td>Mahamri Mbaazi</td>
                <td>Rice Beef</td>
                <td>Fries and Chicken</td>
                <td>Avocado</td>
            </tr>
            <tr>
                <td>FRIDAY</td>
                <td>Boiled Maize</td>
                <td>Pilau</td>
                <td>Ugali Vegetable</td>
                <td>Watermelon</td>
            </tr>
            <tr>
                <td>SATURDAY</td>
                <td>Porridge</td>
                <td>Biriani</td>
                <td>Steamed Cabbage</td>
                <td>Mango</td>
            </tr>
            <tr>
                <td>SUNDAY</td>
                <td>Peanuts</td>
                <td>Chicken Breast Ugali</td>
                <td>Fish Stew</td>
                <td>Pinneaple</td>
            </tr>
        </tbody>

</table>

And finally, our table is fully created with no borders and zero styling. CSS will play a major role in beautifying our table.

INTRODUCING CSS to STYLE UP our TABLE

What is CSS

CSS is a language that helps developers style their web pages by adding designs to elements like colors, font type, borders, padding, etc.

DISCUSSING DIFFERENT TYPES of STYLES in CSS

There are 3 main types of CSS that we will incorporate as we progress

Inline Styling: It's done when we apply a style directly to a particular HTML element
Embedded Styling: It's done when we include our style in the HTML document
External Styling: Is the most commonly used style where we write our style in a separate file and link it with the HTML file. We will utilize this style to design our table.

APPLICATION and IMPLEMENTATION of DIFFERENT DESIGNS and STYLES on TABLES

We will go ahead and create a file name by the name ‘style.css’ and link it with the HTML file as per below:

DISCUSSING the ASTERIC *, MARGIN, BORDER, PADDING, and OTHER CSS STYLES

In CSS, the * (asterisk) is known as the Universal selector and is used to select all items in the HTML file while the curly braces mark the beginning of the CSS code as displayed below.

In our code below, we introduce the “Margin property” which defines the space and gaps between an element with other elements

The “Padding property” defines the space and gaps between an element and the border of the element.

It is possible to style up elements by declaring them followed by the curly braces, which hold the property name and property value {: ;}

For instance, in our case, the body is the element, background-color is the property name while deeppink is the property value. This is how to style up the body with the different CSS styles as seen below.

To style up the table, the code below will also do the trick and display the below output.

You can learn more about nth-child here.www.freecodecamp.org

*{margin: auto; padding: 20px; font-family: Helvetica;}

body{display: grid; place-items:center;}

table {padding: 5px; border-collapse: collapse;}

PREVIEW of the OUTPUT of the ABOVE CODE

MORE CSS STYLES and FINAL OUTPUT

th {background-color:rgb(22, 22, 114); color: gold; text-align: center;}

table, td, tr {box-shadow: -6px 12px 12px -6px rgb(95,8, 55);
padding: 20px; text-align: center;}

h2, td, h4{color: black;}

MORE CSS STYLES and FINAL OUTPUT

Let’s go ahead and change the the color to “blue” and remove the background color to the default color
White:

OUTPUT

CSS HOVER, TRANSFORM, TRANSITION, and Some ANIMATIONS and HOW to APPLY THEM on TABLES

It is possible to change the colors of the items in the table rows using the nth-child property. In this context, The table is regarded as the parent while the rows are the children. Since the arrangement of the rows can be in odd or even numbers, we must declare the same as per below:

CSS hover is a property used to select items when you mouse over them, the effect is a great way to express visual interactivity.

Preview of the hover property;

tr:nth-child(even){background-color: #51517f;}

tr:nth-child(even):hover{background-color: #412f84 ;
    transform: scale(1.5); transition: transform 2000ms ease}

tr:nth-child(odd):hover{background-color: #1c536c; 
    transform: scale(1.5); transition: transform 2000ms ease;}

IMPORTANCE of TABLES in WEB DEVELOPMENT

Tables are a great way to represent data systematically to users
Tables offer easy-to-read and organised tabular data
Tables can be used to create a database

CONCLUSION

It is safe to say that learning to create a simple table is very important to any web developer as It represents complex data organized in rows and columns as well as gives a great foundation for web development.

Tabular data is easy to understand at a glance. Developers must understand clearly that tables are essential tools in all aspects of web development. It is also important to understand the basic concepts of CSS for designing and styling the table or the website as a whole.