PhanaCode.com: HTML

Showing posts with label HTML. Show all posts

Friday, 29 September 2023

How To Create Your CV Using HTML and CSS

HTML and CSS can be used to create stunning projects and ideas. Today, we have decided to make our own curriculum vitae (CV) using HTML and CSS.

photo CV

First make sure you have already drafted your cv and updated it to match your current career and work experience.

Here is the code for designing the website:

<body>
    <div class="container">
        <div class="header">
            <h1>Your Name</h1>
            <p>Web Development</p>
        </div>
        <div class="contact-info">
            <p>Email:youremail@gmail.com</p>
            <p>Phone:(+000) 4578894</p>
            <p>Website:www.yourwebsite.com</p>
        </div>
        <div class="section">
            <h2>Summary</h2>
            <p>A passionate wed developer with a strong foundation in HTML,CSS,Javascript.<br>
            Experienced in creating professional, responsive, and user-friendly websites.<br>
        Continuously learning to adopt with changing technology.</p>
        </div>

        <div class="section">
            <h2>Skills</h2>
            <ul>
                <li>HTML:5</li>
                <li>CSS</li>
                <li>JavaScript</li>
                <li>Responsive design</li>
                <li>Web Development</li>
            </ul>
        </div>
        <div class="section">
            <h2>Experience</h2>
            <h3>Web developer - Name of company</h3>
            <p>Designed and developed a responsive website for a clied.<br>
            Collaborated with the design team to implement user-friendly interface.</p>
        </div>
        <div class="section">
            <h2>Education</h2>
            <h3>Bachelor of science in Computer Science</h3>
            <p>your University - Graduated 2013</p>
        </div>
    </div>
    
</body>
</html>

Now, we are styling our cv using CSS.

here is the codes:

<style>
        body{
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: aliceblue;
            text-align: center;
        }
        .container{
            max-width: 800;
            margin: 0 auto;
            padding: 20px;
            background-color: rgb(216, 228, 224);
            box-shadow: 0 0 10px rgda (0,0,0,0.1);
        }
        h1,h2,h3{
            color: black;
        }
        .header{
            text-align: center;
        }
        .container-info{
            text-align: center;
            margin-top: 20px;
        }
        .section{
            margin-bottom: 30px;
        }
        .section h2{
            font-size: 20px;
            margin-bottom: 10px;
            border-bottom: 1px solid #333;
            padding-bottom: 5px;
        }
        .section p{
            line-height: 1.6;
        }
        .section ul{
            list-style-type: none;
            padding-left: 20px;
        }
    </style>

Tuesday, 24 May 2022

How To Make a Smooth Grid Layout Using CSS.

CSS can be used together with HTML to give a good HTML Website and other features.

CSS is used to style HTML codes and make them attractive.

Without CSS, HTML website together with other programs like apps would be o no attraction at all.

CSS and HTML go hand in hand, and without one , the other would be of no much use.

In this article, I'm going to show you how to create attractive, and smooth user grid using both CSS and HTML.

Below are the codes of HTML register;

<body id="body">
   <div id="container" class="container">
       <h2>Register here</h2>
       <div class="logo" ></div><br><br>

       <div class="fields">
       <input class="email" type="email" class="email-input" placeholder="Enter Email" ><br>
       
       <input class="username" type="text" class="user-input" placeholder="Enter Username"><br>
     
      
       <input  class="password" type="password" class="pass-input" placeholder="Enter Password"><br>

       <input  class="password" type="password" class=" pass-input" placeholder="Confirm Password"><br>

       <button type="button">Register</button>
    </div>

       <p>Already have an Account? <span id="login"><a href="index.html" style="color:#fb2525;">Login Here</a></span></p>

   </div>


   <script>

   </script>
</body>

sign in codes;

<body id="body">
   <div class="container">
       <h2>Login here</h2>
       <div class="logo" ></div><br>
       <div class="fields">
        <input class="username" type="text" class="user-input" placeholder="Enter username"><br>
        <input class="password" type="password" class="pass-input" placeholder="Enter password"><br><br>
       
      
       <button type="button">Login</button>
    </div>
       <p id="forgot" onclick="Forgot()" >Fogort Password?</p>
       <p>Create New Account <span id="register"  > <a href="register.html" style="color:#fb2525;"> Here</a></span></p>
       

   </div>


   <script>
       function Forgot() {
           console.log('clicked');
       }
    
   </script>
</body>

Below are the codes of CSS;

#body{
    margin:0;
    padding:0;
    background:#cbced1;
    background-size: cover;
    background-position:center;
    font-family: sans-serif;
}
.container{
    width: 350px;
    height: 450px;
    position: absolute;
    left: 40%;
    top: 2%;    
   color: #24cea9;
   text-align: center; 
  padding: 60px 35px 35px 35px;
  border-radius: 40px;
  background: #ecf0f3;
  box-shadow: 13px 13px 20px #7e878f,
              -13px -13px 20px #e6dede;

}

#container{
    width: 350px;
    height: 550px;
    position: absolute;
    left: 40%;
    top: 2%;    
   color: #24cea9;
   text-align: center; 
  padding: 60px 35px 35px 35px;
  border-radius: 40px;
  background: #ecf0f3;
  box-shadow: 13px 13px 20px #7e878f,
              -13px -13px 20px #e6dede;
 
}

.logo{
    background: url("bloh.jpg") no-repeat;
    width: 70px;
    height: 70px;
    background-size: 100% 100%;
    /* background-color: #fd7213; */
    border-radius: 50%;
    top: 30%;

    margin: auto;
    box-shadow: 0px 0px 2px #5f5f5f,
                0px 0px 0px 5px #517691,
                8px 8px 15px #5f5f5f,
                -8px -8px 15px #ffff;
}

.fields{
    width: 100%;
    padding: 5px 5px 5px 5px;
}
.fields input{
    border:none;
    outline: none;
    background: none;
    font-size: 18px;
    color: #555;
    padding: 20px 40px 20px 35px;
}

.username, .password, .email{
   margin-bottom: 10px;
   border-radius: 25px;
   box-shadow: inset 8px 8px 6px #cbced1,
               inset -8px -8px 6px #ffffff;

}


button{
    background: #24cea9;
    border-radius: 30px;
    outline: none;
    cursor: pointer;
    border: none;
    width: 250px;
    height: 60px;
    font-size:14px;
    font-style:normal;
    font-weight: bold;
    text-align: center;
    font-family: 'lato', sans-serif;
    color: #fff;
    border: none;
    box-shadow: inset 3px 3px 4px #49caf6,
               inset -3px -3px 3px #ffffff;
    /* transition: 0.5s; */
}

button:hover{
    background-color: #49caf6;
}
p{
    font-size: 14px;

}

You can add more features and make your grind look more attractive.

Sunday, 22 May 2022

Inputs Types In HTML

There are many inputs you can employ when designing HTML codes.

Some of them are radio button, check button, submit button, file upload button, password, login , signup, etc.

You need to use both HTML and CSS so as to come up with a beautiful user interface that is, a good login or sign up interface.

In my codes, I have incorporated both HTML and CSS and my styles looks attractive.

Use this HTML codes;

<div id="input">
        <h1>INPUT TYPES IN HTML</h1>
        <p>
            <label for="Name">Name </label>
            <input type="text" id="txtName" required>
        </p>
        <br>
        <p>
            <label for="phone">phone </label>
            <input type="tel" id="txtphone" required>
        </p>
        
        <br>
        <label for="email">email </label>

        <input type="email" id="txtemail" required>
        <br>
        <p>
            <label for="password">password </label>
            <input type="password" id="txtpassword" required>  
        </p>
        <br>
        <p>
            <label for="checkbox">checkbox </label>
            <input type="checkbox" id="checkbox" required> 
        </p>
        
        <p>
            <label for="radio">radio </label>
            <input type="radio"> 
        </p>
       
        <p>
            <label for="color">color </label>
            <input type="color">
        </p>
        
        <p>
            <label for="file">file </label>
            <input type="file" required>
        </p>
        
        <p>
            <label for="image">image </label>
            <input type="image" required>
        </p>
        <div class="button">
            <p>
                <!--  -->
                <input type="submit" name="Submit" id="Submit" value="Submit">

            </p>
        </div>    
    </div>  

Use this CSS codes;

body {
    background-color: rgb(157, 219, 219);
    text-align: center;
}
.button {
    color: rgb(13, 54, 236);
}
#Submit {
    background: rgb(51, 255, 0);
}
#checkbox {
    color: blue;
}

Now, design your interface to look more professional than mine.

You can share your new codes in the comments section below and compare with others.

Have a good coding career.

Friday, 18 February 2022

My Programming Journey And History

Hi dear programmers, I hope you are making your programming career a better one.

In this story, I want to narrate to you how I started as a self-taught programmer has been going.

I started my programming process in November 2020 making it one year in the programming industry.

Most of my teacher's guide has been YouTube, and google. It is a difficult process but at the end, it gives good results.

Since then, I've known how to program different things using Python. I also learned how to develop websites, majorly front-end interface.

You can also do like me.

I now encourage you to gain more skills and experience, since programming is the future.

Saturday, 23 October 2021

How To Add A Background Image To Your HTML website.

Many programmers and website builders face challenges of inserting a background image to their HTML and CSS websites. Others struggle a lot in passing through Google videos, and they can't get the best codes to paste direct to their website.

Having a good experience in website development, I'm going to give you the best and straightforward codes which will help you come from these problems.

To place a background image, you need to first identify where to position your image on the website. Second, look for a good image which can fit the whole place. In this case, the image should be very decorative to attract many readers or visitors to your website.

If you are using external CSS, make sure your CSS link is connected with the HTML pages.

<link rel="stylesheet" href="index.css">

After that, give the name of the container using class="" or id="". The class in CSS is usually used with(.) while Id is used with(#).

At the HTML page, insert this codes.

<div id="home">
</div>

In CSS page, insert your image.

#home {
        background-image: url('wapp.jpeg');
        background-size: cover;
        background-position: center;
        min-height: 100%;
        height: 500px;
        position: relative;
        text-align: center;
        padding-top: 0;
    }

Thank you for visiting me.

Sunday, 10 October 2021

How To Make An Active Download Button Using HTML And CSS.

If you are creating a blog or a website, and you want to put downloadable documents, there are ways you can create the download button and link it to your documents.

For the button to work out perfectly, the documents to be downloaded should be in the same folder as the other documents.

The link of the document should now be mounted into the website code e.g. if "post/edit/310299486750145624" is the document link, now the code should be like

href="post/edit/310299486750145624"

create a button like this;

<button class="btn"><i class="fa fa-download"></i> Download</button>

Make sure you position your button at the preferred place.

Then give your button a class so that the program can know what it's going to do.

class="et_pb_button"

The full button code;

<a href="post/edit/310299486750145624" download="newname" target="_blank"
             class="et_pb_button" style="color: #1148df;">Download Link</a>

Friday, 8 October 2021

How To Add A Favicon In To A HTML Website

Favicon is an icon associated with a particular website, typically displayed in the address bar of a browser accessing the site or next to the site name in a user's list of bookmarks. It
serves as a branding for your website. Its main purpose is to help visitors locate your page easier.
Favicon icon is added between the head tags, and it must be added into each and every page of a website.
<head>

</head>

You should start with the link to connect the icon.

<link rel="icon">

Then the icon link from your project folder href="favicon.png"follows.

<link rel="icon" href="favicon.png" type="image/x-icon">

This is the full link.

How To Put A Logo At The Center Of Website Using CSS And HTML.

In this article, we are going to show you how to align your website logo at the centre of the website.

This involves a very simple HTML codings and styling.

First, you need to have your logo in the same folder as your other images and photos. Make sure your logo is very attractive; usually a logo carries some information about the company or the website.

You can use or hire somebody to design for you a good logo or apply online like in Fiverr and pay for the quality of the logo.

Now, to put your logo at the right corner of the website, you simply place this code between the body tangs;

 <div class="column">
                        <div class="logo">
                            <br>
                            <img src="log.jpg" alt="logo">
                        </div>
                    </div>

<body>
    
</body>

and you are done.

Now, to place the logo at the centre, you simply use the CSS

 <style>
      .white-box {
            width: 100%;
            height: 120;
            border-radius: 30px 30px 0px 0px;
            display: block;
            text-align: center;
            transform: translateY(-20px);
            padding: 4px;
            background: #fff;
        }
    </style>

And that is wow?

Your logo should look like this

Thank you very much for reading this educative blog.

Thursday, 9 September 2021

How To Create A Gallery Using HTML, CSS , And JS;

Today's article is aimed at creating a gallery where we can put our photos and or videos. It will function as gallery app or google photos.

The gallery will contain buttons where you will be selecting whether to move forward or backward by pressing the buttons.

The HTML codes.

<!DOCTYPE html>

<html>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="gallery.css">

<h2 style="text-align:center">My Gallery</h2>

<video width="600" controls autoplay loop>

</video>

<div class="container">

    <div class="mySlides">

        <div class="numbertext">1 / 9</div>

<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fwww.cnet.

com%2Fa%2Fimg%2FpLwWAw3f1OdjhUWe1-u0jcqhIcI%3D%2F

1200x630%2F2019%2F09%2F10%2Fd3dc3047-4c7f-499e-8b8c-240b3e27c6d2%2Fgoogle-

logo-6.jpg&imgrefurl=https%3A%2F%2Fwww.cnet.com%2Ftech%2Fservices-and-software

%2Fgoogle-one-storage-starts-offering-some-features-for-free%2F&tbnid=EHjUDy1Y

NjPeHM&vet=12ahUKEwiimYTh1fHyAhUDGRoKHeksDPsQMygcegUIARCGAg..i&docid=iTrW3iE24

PKfIM&w=1200&h=630&q=google%20photos&ved=2ahUKEwiimYTh1fHyAhUDGRoKHeksDPsQMyg

cegUIARCGAg" style="width:100%">

    </div>

    <div class="mySlides">

        <div class="numbertext">2 / 9</div>

<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fimages.indianexpress.

com%2F2021%2F05%2FGoogle_Reuters_F.jpg&imgrefurl=https%3A%2F%2Findianexpress.

com%2Farticle%2Ftechnology%2Ftechook%2Fgoogle-photos-free-storage-policy-june-

1-ends-check-plans-storage-pixel-users-7337569%2F&tbnid=Sx3ERkzPGnTY4M&vet=

12ahUKEwiimYTh1fHyAhUDGRoKHeksDPsQMygfegUIARCMAg..i&docid=wVPDJT3nWFtmyM&w=

1200&h=667&q=google%20photos&ved=

2ahUKEwiimYTh1fHyAhUDGRoKHeksDPsQMygfegUIARCMAg" style="width:100%">

    </div>

    <div class="mySlides">

        <div class="numbertext">3 / 9</div>

<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fcdn-res.

keymedia.com%2Fcms%2Fimages%2Fus%2F039%2F0132_637309597704291234.

jpg&imgrefurl=https%3A%2F%2Fwww.hcamag.com%2Fasia%2Fspecialisation%2Flearning-

development%2Fgoogle-to-support-3000-jobseekers-in-singapore%2F228475&tbnid=

I6tgnIsHZoivuM&vet=10CIoBEDMonwFqFwoTCMjv0cTW8fICFQAAAAAdAAAAABAC..i&docid=

cRnRmoII5sHFSM&w=1000&h=600&q=google%20photos&ved=

0CIoBEDMonwFqFwoTCMjv0cTW8fICFQAAAAAdAAAAABAC" style="width:100%">

    </div>

    <div class="mySlides">

        <div class="numbertext">4 / 9</div>

        <img src="tech.jpg" style="width:100%">

    </div>

    <div class="mySlides">

        <div class="numbertext">5 / 9</div>

<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fimages.ctfassets.

net%2Fwcfotm6rrl7u%2F24PvUvHxz3ZwBFFtufgRQe%2F14f808748369bba7d34493023b6fa4dc%

2FGoogle_One-og_image.jpg&imgrefurl=https%3A%2F%2Fwww.nokia.com%2Fphones%2Fen_

int%2Fgoogle-one&tbnid=a3voUblV2VLiLM&vet=12ahUKEwiimYTh1fHyAhUDGRoKHeksDPsQMy

hOegUIARCSAQ..i&docid=FRCdA0hBH27ePM&w=1200&h=630&q=google%20photos&ved=2ahUKEw

iimYTh1fHyAhUDGRoKHeksDPsQMyhOegUIARCSAQ" style="width:100%">

    </div>

    <div class="mySlides">

        <div class="numbertext">6 / 9</div>

<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fcdn57.androidauthority.

net%2Fwp-content%2Fuploads%2F2020%2F11%2Fgoogle-photos-app-icon-logo-google-

pixel-5-2.jpg&imgrefurl=https%3A%2F%2Fwww.androidauthority.com%2Fgoogle-photos

-937968%2F&tbnid=Q6JFAzN64gbW3M&vet=12ahUKEwiimYTh1fHyAhUDGRoKHeksDPsQMyhSegU

IARCaAQ..i&docid=Bjph8NoD5mBaqM&w=1920&h=1080&q=google%20photos&ved=2ahUKEwi

imYTh1fHyAhUDGRoKHeksDPsQMyhSegUIARCaAQ" style="width:100%">

    </div>

    <div class="mySlides">

        <div class="numbertext">7 / 9</div>

<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fwww.cnet.com%2Fa%2Fimg%2

FvyXvPd3VpbvIftGIu2uu6M7Yk7o%3D%2F1200x630%2F2021%2F06%2F03%2F094be1de-9cce

-4762-b8e5-6f69cfafed81%2Fgoogle-one-plan-upgrade-google-photos-unlimited-

ending-cnet-2021-008.jpg&imgrefurl=https%3A%2F%2Fwww.cnet.com%2Ftech%2Fservices

-and-software%2Fgoogle-photos-unlimited-free-storage-has-ended-heres-what-to

-do-now%2F&tbnid=9JDDOlww9ESe3M&vet=12ahUKEwiimYTh1fHyAhUDGRoKHeksDPsQMyhQegU

IARCWAQ..i&docid=99qLieN9Jb67kM&w=1200&h=630&q=google%20photos&ved=2ahUKEwiimY

Th1fHyAhUDGRoKHeksDPsQMyhQegUIARCWAQ" style="width:100%">

    </div>

    <div class="mySlides">

        <div class="numbertext">8 / 9</div>

<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fstatic01.nyt.

com%2Fimages%2F2020%2F10%2F21%2Fbusiness%2F21Googleworld-illo%2F30Googleworld-

illo-videoSixteenByNineJumbo1600.jpg&imgrefurl=https%3A%2F%2Fwww.nytimes.

com%2F2020%2F10%2F20%2Ftechnology%2Fdoj-google.html&tbnid=6VkDOKNz2jqSKM&vet=

10CBYQMyhuahcKEwjI79HE1vHyAhUAAAAAHQAAAAAQAg..i&docid=3tHeBj2gDZ0x6M&w=1600&h=

900&q=google%20photos&ved=0CBYQMyhuahcKEwjI79HE1vHyAhUAAAAAHQAAAAAQAg" style="width:100%">

    </div>

    <div class="mySlides">

        <div class="numbertext">9 / 9</div>

<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fcdn.pocket-lint.

com%2Fr%2Fs%2F1200x%2Fassets%2Fimages%2F141075-apps-feature-what-is-

google-lens-and-how-do-you-use-it-image1-fvo5qgkrqn.jpg&imgrefurl=

https%3A%2F%2Fwww.pocket-lint.com%2Fapps%2Fnews%2Fgoogle%2F141075-what-is-

google-lens-and-how-does-it-work-and-which-devices-have-it&tbnid=

OTxzNM7uMS20yM&vet=10CFcQMyiKAWoXChMIyO_RxNbx8gIVAAAAAB0AAAAAEAI..

i&docid=_c-UEac8WF-XvM&w=1200&h=800&q=google%20photos&ved=0CFcQMyiKAWoXChMIyO_

RxNbx8gIVAAAAAB0AAAAAEAI" style="width:100%">

    </div>

    <a class="prev" onclick="plusSlides(-1)">❮</a>

    <a class="next" onclick="plusSlides(1)">❯</a>

    <div class="caption-container">

        <p id="caption"></p>

    </div>

    <div class="row">

        <div class="column">

            <img class="demo cursor" src="moon.jpg" style="width:100%"

 onclick="currentSlide(1)" alt="The horizon">

        </div>

        <div class="column">

            <img class="demo cursor" src="web.jpeg" style="width:100%"

 onclick="currentSlide(2)" alt="third-world">

        </div>

        <div class="column">

            <img class="demo cursor" src="we.jpg" style="width:100%"

 onclick="currentSlide(3)" alt="$ is the future">

        </div>

        <div class="column">

            <img class="demo cursor" src="tech.jpg" style="width:100%" 

onclick="currentSlide(4)" alt="skypers">

        </div>

        <div class="column">

            <img class="demo cursor" src="images (39).jpeg" style="width:100%"

 onclick="currentSlide(5)" alt="life is $ ">

        </div>

        <div class="column">

            <img class="demo cursor" src="website.jpeg" style="width:100%"

 onclick="currentSlide(6)" alt="guru and net">

        </div>

        <div class="column">

            <img class="demo cursor" src="saf.jpg" style="width:100%"

 onclick="currentSlide(7)" alt="get new ideas">

        </div>

        <div class="column">

            <img class="demo cursor" src="dev.jpg" style="width:100%"

 onclick="currentSlide(8)" alt="socialise">

        </div>

        <div class="column">

            <img class="demo cursor" src="blog.jpg" style="width:100%" 

onclick="currentSlide(9)" alt="develop yourself">

        </div>

    </div>

</div>

</body>

</html>

The CSS codes.

body {
    font-family: Arial;
    margin: 0;
}

* {
    box-sizing: border-box;
}

img {
    vertical-align: middle;
}


/* Position the image container (needed to position the left and right arrows) */

.container {
    position: relative;
}


/* Hide the images by default */

.mySlides {
    display: none;
}


/* Add a pointer when hovering over the thumbnail images */

.cursor {
    cursor: pointer;
}


/* Next & previous buttons */

.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 40%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
}


/* Position the "next button" to the right */

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}


/* Number text (1/3 etc) */

.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}


/* Container for image text */

.caption-container {
    text-align: center;
    background-color: #222;
    padding: 2px 16px;
    color: white;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}


/* Six columns side by side */

.column {
    float: left;
    width: 16.66%;
}


/* Add a transparency effect for thumnbail images */

.demo {
    opacity: 0.6;
}

.active,
.demo:hover {
    opacity: 1;
}

JavaScript codes.

<script>
    var slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    function currentSlide(n) {
        showSlides(slideIndex = n);
    }

    function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("demo");
        var captionText = document.getElementById("caption");
        if (n > slides.length) {
            slideIndex = 1
        }
        if (n < 1) {
            slideIndex = slides.length
        }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " active";
        captionText.innerHTML = dots[slideIndex - 1].alt;
    }
</script>

You can create,change or modify the codes at your wish.

bluehost

Friday, 29 September 2023

How To Create Your CV Using HTML and CSS

Tuesday, 24 May 2022

How To Make a Smooth Grid Layout Using CSS.

Sunday, 22 May 2022

Inputs Types In HTML

Friday, 18 February 2022

My Programming Journey And History

Saturday, 23 October 2021

How To Add A Background Image To Your HTML website.

Sunday, 10 October 2021

How To Make An Active Download Button Using HTML And CSS.

Friday, 8 October 2021

How To Add A Favicon In To A HTML Website

How To Put A Logo At The Center Of Website Using CSS And HTML.

Thursday, 9 September 2021

How To Create A Gallery Using HTML, CSS , And JS;

React vs Angular; Front-End Web Development

PhanaCode.com

Donations

Followers

bluehost

Friday, 29 September 2023

Tuesday, 24 May 2022

Sunday, 22 May 2022

Friday, 18 February 2022

Saturday, 23 October 2021

Sunday, 10 October 2021

Friday, 8 October 2021

Thursday, 9 September 2021

Subscribe To

Donations

Followers