bluehost

Showing posts with label website. Show all posts
Showing posts with label website. 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>
at No comments:
Labels: , , , ,

Saturday, 24 June 2023

Adding a Dark Mode to Your Website: Enhancing User Experience with Ease

photo    courtesy




Introduction:

In the contemporary digital environment, incorporating a dark mode feature into your website can significantly enhance the user experience. Dark mode creates a visually appealing and relaxing browsing environment, lessening eye fatigue and enhancing comprehension. This article delves into the process of incorporating a dark mode into your online presence, providing insights and useful suggestions to ensure the smooth introduction of this desired function.

photo  Google


HTML process of adding dark mode:

<!DOCTYPE html>
<html lang="en" class="light-mode">
<head>
<link rel="stylesheet" type="text/css" href="dark.css">
</head>
<body>
<!-- Page content -->
<span id="dark-mode-icon"></span>

<button id="dark-mode-toggle">Toggle Dark Mode</button>
<script src="dark.js"></script>
</body>
</html>

4. Implementing Dark Mode with CSS:

The CSS techniques used to implement dark mode effectively. Utilize media queries to detect user preferences, or provide a manual toggle option for users to switch between light and dark modes. Walk through the necessary CSS modifications for background colours, text colours, and other relevant elements.

.light-mode {
/* Light mode styles */
Colour: #000;
background-color: #fff;
}
.dark-mode {
/* Dark mode styles */
color: #fff;
background-color: #333;
}
/* Additional styles for elements in dark mode */
.dark-mode h1 {
color: #fff;
}
@media (prefers-color-scheme: dark) {
/* Styles for automatic dark mode */
html:not(.dark-mode) {
color: #fff;
background-color: #333;
}
/* Additional styles for elements in automatic dark mode */
html:not(.dark-mode) h1 {
color: #fff;
}
}
body {
/* Other body styles */
transition: background-color 0.3s ease, color 0.3s ease;
}
#dark-mode-icon {
width: 24px;
height: 24px;
background-image: url('dark.png');
background-size: cover;
/* Add other styling as needed */
}

5. The JavaScript part of dark mode:

document.addEventListener('DOMContentLoaded', () => {
const darkModeToggle = document.getElementById('dark-mode-toggle');
const html = document.querySelector('html');
const localStorageKey = 'darkMode';
// Retrieve user preference from local storage
const isDarkModeEnabled = JSON.parse(localStorage.getItem(localStorageKey));
// Apply the appropriate class based on the user's preference
if (isDarkModeEnabled) {
html.classList.add('dark-mode');
} else {
html.classList.remove('dark-mode');
}
darkModeToggle.addEventListener('click', () => {
// Toggle dark mode class
html.classList.toggle('dark-mode');
// Save user preference to local storage
localStorage.setItem(localStorageKey, html.classList.contains('dark-mode'));
});
});


Conclusion:

By incorporating a dark mode feature into your website, you can significantly enhance the user experience by providing a visually appealing, comfortable, and customizable browsing experience. Follow the steps outlined in this article, adapting them to suit your website's specific requirements. Embrace the benefits of dark mode and empower users with an immersive and enjoyable interface. Implementing dark mode can be a game-changer in providing an exceptional user experience while keeping your website up to date with modern design trends.

at No comments:
Labels: , ,
Subscribe to: Posts (Atom)

React vs Angular; Front-End Web Development

Angular and React  are two of the most popular Javascript tools for front-end development. React is a Javascript created by Meta...