Git is a distributed version control system DVCS designed for efficient source code management, suitable for both small and large projects. It allows multiple developers to work on a project simultaneously without overwriting changes, supporting collaborative work, continuous integration, and deployment. This Git and GitHub tutorial is designed for beginners to learn fundamentals and advanced concepts, including branching, pushing, merging conflicts, and essential Git commands. Prerequisites include familiarity with the command line interface CLI, a text editor, and basic programming concepts. Git was developed by Linus Torvalds for Linux kernel development and tracks changes, manages versions, and enables collaboration among developers. It provides a complete backup of project history in a repository. GitHub is a hosting service for Git repositories, facilitating project access, collaboration, and version control. The tutorial covers topics such as Git installation, repository creation, Git Bash usage, managing branches, resolving conflicts, and working with platforms like Bitbucket and GitHub. The text is a comprehensive guide to using Git and GitHub, covering a wide range of topics. It includes instructions on working directories, using submodules, writing good commit messages, deleting local repositories, and understanding Git workflows like Git Flow versus GitHub Flow. There are sections on packfiles, garbage collection, and the differences between concepts like HEAD, working tree, and index. Installation instructions for Git across various platforms Ubuntu, macOS, Windows, Raspberry Pi, Termux, etc. are provided, along with credential setup. The guide explains essential Git commands, their usage, and advanced topics like debugging, merging, rebasing, patch operations, hooks, subtree, filtering commit history, and handling merge conflicts. It also covers managing branches, syncing forks, searching errors, and differences between various Git operations e.g., push origin vs. push origin master, merging vs. rebasing. The text provides a comprehensive guide on using Git and GitHub. It covers creating repositories, adding code of conduct, forking and cloning projects, and adding various media files to a repository. The text explains how to push projects, handle authentication issues, solve common Git problems, and manage repositories. It discusses using different IDEs like VSCode, Android Studio, and PyCharm, for Git operations, including creating branches and pull requests. Additionally, it details deploying applications to platforms like Heroku and Firebase, publishing static websites on GitHub Pages, and collaborating on GitHub. Other topics include the use of Git with R and Eclipse, configuring OAuth apps, generating personal access tokens, and setting up GitLab repositories. The text covers various topics related to Git, GitHub, and other version control systems Key Pointers Git is a distributed version control system DVCS for source code management. Supports collaboration, continuous integration, and deployment. Suitable for both small and large projects. Developed by Linus Torvalds for Linux kernel development. Tracks changes, manages versions, and provides complete project history. GitHub is a hosting service for Git repositories. Tutorial covers Git and GitHub fundamentals and advanced concepts. Includes instructions on installation, repository creation, and Git Bash usage. Explains managing branches, resolving conflicts, and using platforms like Bitbucket and GitHub. Covers working directories, submodules, commit messages, and Git workflows. Details packfiles, garbage collection, and Git concepts HEAD, working tree, index. Provides Git installation instructions for various platforms. Explains essential Git commands and advanced topics debugging, merging, rebasing. Covers branch management, syncing forks, and differences between Git operations. Discusses using different IDEs for Git operations and deploying applications. Details using Git with R, Eclipse, and setting up GitLab repositories. Explains CI/CD processes and using GitHub Actions. Covers internal workings of Git and its decentralized model. Highlights differences between Git version control system and GitHub hosting platform.
You might like this:
- Build Weather App using JavaScript
- Santa Animation With HTML & CSS
- Why Blogger Fails In Blogging
- YouTube Video Thumbnail Downloader
Facebook Post Box Clone in HTML CSS & JavaScript With Source Codes
To create Facebook Post Box in HTML, CSS & JavaScript. Firstly, you have need to create two Files: first us HTML & second is CSS files. After creating these files just copy paste the below codes into your files. You can also download the source code files of this Facebook Post Box Clone from the given download button.HTML
Firstly, You have to create an HTML file with the name of index.html and copy-paste the given html codes into your HTML file. You’ve to create a file with .html extension andRemember you won’t get icons that are used on this Facebook post box. To get icons you have to Download source files for it.
<!DOCTYPE html>
<!-- Coding By Codegyan - codegyan.in -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Facebook Post Box Clone | Codegyan</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- FontAweome CDN Link for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="container">
<div class="wrapper">
<section class="post">
<header>Create Post</header>
<form action="#">
<div class="content">
<img src="icons/logo.png" alt="logo">
<div class="details">
<p>CodingNepal</p>
<div class="privacy">
<i class="fas fa-user-friends"></i>
<span>Friends</span>
<i class="fas fa-caret-down"></i>
</div>
</div>
</div>
<textarea placeholder="What's on your mind, CodingNepal?" spellcheck="false" required></textarea>
<div class="theme-emoji">
<img src="icons/theme.svg" alt="theme">
<img src="icons/smile.svg" alt="smile">
</div>
<div class="options">
<p>Add to Your Post</p>
<ul class="list">
<li><img src="icons/gallery.svg" alt="gallery"></li>
<li><img src="icons/tag.svg" alt="gallery"></li>
<li><img src="icons/emoji.svg" alt="gallery"></li>
<li><img src="icons/mic.svg" alt="gallery"></li>
<li><img src="icons/more.svg" alt="gallery"></li>
</ul>
</div>
<button>Post</button>
</form>
</section>
<section class="audience">
<header>
<div class="arrow-back"><i class="fas fa-arrow-left"></i></div>
<p>Select Audience</p>
</header>
<div class="content">
<p>Who can see your post?</p>
<span>Your post will show up in News Feed, on your profile and in search results.</span>
</div>
<ul class="list">
<li>
<div class="column">
<div class="icon"><i class="fas fa-globe-asia"></i></div>
<div class="details">
<p>Public</p>
<span>Anyone on or off Facebook</span>
</div>
</div>
<div class="radio"></div>
</li>
<li class="active">
<div class="column">
<div class="icon"><i class="fas fa-user-friends"></i></div>
<div class="details">
<p>Friends</p>
<span>Your friends on Facebook</span>
</div>
</div>
<div class="radio"></div>
</li>
<li>
<div class="column">
<div class="icon"><i class="fas fa-user"></i></div>
<div class="details">
<p>Specific</p>
<span>Only show to some friends</span>
</div>
</div>
<div class="radio"></div>
</li>
<li>
<div class="column">
<div class="icon"><i class="fas fa-lock"></i></div>
<div class="details">
<p>Only me</p>
<span>Only you can see your post</span>
</div>
</div>
<div class="radio"></div>
</li>
<li>
<div class="column">
<div class="icon"><i class="fas fa-cog"></i></div>
<div class="details">
<p>Custom</p>
<span>Include and exclude friends</span>
</div>
</div>
<div class="radio"></div>
</li>
</ul>
</section>
</div>
</div>
<script>
const container = document.querySelector(".container"),
privacy = container.querySelector(".post .privacy"),
arrowBack = container.querySelector(".audience .arrow-back");
privacy.addEventListener("click", () => {
container.classList.add("active");
});
arrowBack.addEventListener("click", () => {
container.classList.remove("active");
});
</script>
</body>
</html>
CSS
Lastly, you have to create a CSS file with the name of style.css and copy paste the given css codes in your CSS file. The css file give better look to your facebook post box.
/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(#00C6FF, #0078FF);
}
::selection{
color: #fff;
background: #1a81ff;
}
.container{
width: 500px;
height: 480px;
overflow: hidden;
background: #fff;
border-radius: 10px;
transition: height 0.2s ease;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}
.container.active{
height: 590px;
}
.container .wrapper{
width: 1000px;
display: flex;
}
.container .wrapper section{
width: 500px;
background: #fff;
}
.container img{
cursor: pointer;
}
.container .post{
transition: margin-left 0.18s ease;
}
.container.active .post{
margin-left: -500px;
}
.post header{
font-size: 22px;
font-weight: 600;
padding: 17px 0;
text-align: center;
border-bottom: 1px solid #bfbfbf;
}
.post form{
margin: 20px 25px;
}
.post form .content,
.audience .list li .column{
display: flex;
align-items: center;
}
.post form .content img{
cursor: default;
max-width: 52px;
}
.post form .content .details{
margin: -3px 0 0 12px;
}
form .content .details p{
font-size: 17px;
font-weight: 500;
}
.content .details .privacy{
display: flex;
height: 25px;
cursor: pointer;
padding: 0 10px;
font-size: 11px;
margin-top: 3px;
border-radius: 5px;
align-items: center;
max-width: 98px;
background: #E4E6EB;
justify-content: space-between;
}
.details .privacy span{
font-size: 13px;
margin-top: 1px;
font-weight: 500;
}
.details .privacy i:last-child{
font-size: 13px;
margin-left: 1px;
}
form :where(textarea, button){
width: 100%;
outline: none;
border: none;
}
form textarea{
resize: none;
font-size: 18px;
margin-top: 30px;
min-height: 100px;
}
form textarea::placeholder{
color: #858585;
}
form textarea:focus::placeholder{
color: #b3b3b3;
}
form :where(.theme-emoji, .options){
display: flex;
align-items: center;
justify-content: space-between;
}
.theme-emoji img:last-child{
max-width: 24px;
}
form .options{
height: 57px;
margin: 15px 0;
padding: 0 15px;
border-radius: 7px;
border: 1px solid #B9B9B9;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
form .options :where(.list, li),
.audience :where(.arrow-back, .icon, li .radio){
display: flex;
align-items: center;
justify-content: center;
}
form .options p{
color: #595959;
font-size: 15px;
font-weight: 500;
cursor: default;
}
form .options .list{
list-style: none;
}
.options .list li{
height: 42px;
width: 42px;
margin: 0 -1px;
cursor: pointer;
border-radius: 50%;
}
.options .list li:hover{
background: #f0f1f4;
}
.options .list li img{
width: 23px;
}
form button{
height: 53px;
color: #fff;
font-size: 18px;
font-weight: 500;
cursor: pointer;
color: #BCC0C4;
cursor: no-drop;
border-radius: 7px;
background: #e2e5e9;
transition: all 0.3s ease;
}
form textarea:valid ~ button{
color: #fff;
cursor: pointer;
background: #4599FF;
}
form textarea:valid ~ button:hover{
background: #1a81ff;
}
.container .audience{
opacity: 0;
transition: opacity 0.12s ease;
}
.container.active .audience{
opacity: 1;
}
.audience header{
padding: 17px 0;
text-align: center;
position: relative;
border-bottom: 1px solid #bfbfbf;
}
.audience header .arrow-back{
position: absolute;
left: 25px;
width: 35px;
height: 35px;
cursor: pointer;
font-size: 15px;
color: #747474;
border-radius: 50%;
background: #E4E6EB;
}
.audience header p{
font-size: 22px;
font-weight: 600;
}
.audience .content{
margin: 20px 25px 0;
}
.audience .content p{
font-size: 17px;
font-weight: 500;
}
.audience .content span{
font-size: 14px;
color: #65676B;
}
.audience .list{
margin: 15px 16px 20px;
list-style: none;
}
.audience .list li{
display: flex;
cursor: pointer;
margin-bottom: 5px;
padding: 12px 10px;
border-radius: 7px;
align-items: center;
justify-content: space-between;
}
.list li.active,
.audience .list li.active:hover{
background: #E5F1FF;
}
.audience .list li:hover{
background: #f0f1f4;
}
.audience .list li .column .icon{
height: 50px;
width: 50px;
color: #333;
font-size: 23px;
border-radius: 50%;
background: #E4E6EB;
}
.audience .list li.active .column .icon{
background: #cce4ff;
}
.audience .list li .column .details{
margin-left: 15px;
}
.list li .column .details p{
font-weight: 500;
}
.list li .column .details span{
font-size: 14px;
color: #65676B;
}
.list li .radio{
height: 20px;
width: 20px;
border-radius: 50%;
position: relative;
border: 1px solid #707070;
}
.list li.active .radio{
border: 2px solid #4599FF;
}
.list li .radio::before{
content: "";
width: 12px;
height: 12px;
border-radius: inherit;
}
.list li.active .radio::before{
background: #4599FF;
}
Also Read : How to Create Text To Speech Converter in HTML & JavaScriptIf you wann to check the demo of this code, then you can check using below demo button. Click on the following download button to download all source code files of Facebook post box using javascript directly on your computer.