PhanaCode.com: website development

Showing posts with label website development. 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>

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.

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.

bluehost

Friday, 29 September 2023

How To Create Your CV Using HTML and CSS

Sunday, 22 May 2022

Inputs Types In HTML

Saturday, 23 October 2021

How To Add A Background Image To Your HTML website.

React vs Angular; Front-End Web Development

PhanaCode.com

Donations

Followers

bluehost

Friday, 29 September 2023

How To Create Your CV Using HTML and CSS

Sunday, 22 May 2022

Inputs Types In HTML

Saturday, 23 October 2021

How To Add A Background Image To Your HTML website.

React vs Angular; Front-End Web Development

Subscribe To

PhanaCode.com

Donations

Followers