HTML Fundamentals – Creating Twitter Homepage Using HTML and CSS

mine 1Hello guys, today I created my final project on Pirple HTML Fundamental course. I designed Twitter homepage using HTML. I used and external stylesheet for the project.

The project basically contains three section inside the body: The first section is the left area having a light blue colour, the right side having the login buttons and form and the third section having the footer links.

I have improved my knowledge of website design with this pirple course. Check out the codes of the website and the style.

Check Stylesheet here

Project: Twitter Homepage in Dark Mode.

Final Project for Pirple HTML fundamentals created by: Joseph Chuks.

Credit goes to for the extra CSS
properties used in this document.

Created using Adobe Dreamweaver

<!DOCTYPE html>
<!– Begin Meta tags showing the description, keywords, author and title of the website–>
<meta charset=”utf-8″>
<meta name=”description” content=”Twitter Homepage”>
<meta name=”keywords” content=”Twitter, CSS, HTML, Pirple, HTML Fundamentals”>
<meta name=”author” content=”Joseph Chuks”>
<meta name=”viewport” content=”width=device-width”>
<title>Twitter. It’s what’s happening / Twitter</title>
<!– Begin Link to the stylesheet used–>
<link rel=”stylesheet” href=”css/style.css”>
<!– End Link to the stylesheet used–>
<link rel=”icon” type=”image/png” href=”images/2.png”>
<!–end favicon–>
<!– End Meta tags showing the description, keywords, author and title of the website–>
<!–start main section–>
<!–Start The left section showing the icons and background twitter bird–>
<section id=”first”>
<div id=”a”>
<div class=”welcome”><span class=”icon icon-search”></span><strong>Follow your interests.</strong></div>
<div class=”welcome”><span class=”icon icon-users”></span><strong>Hear what people are talking about.</strong></div>
<div class=”welcome”><span class=”icon icon-comment”></span><strong>Join the conversation.</strong></div>
<!–End The left section showing the icons and background twitter bird–>

<!–start second section showing the login form and buttons–>
<section id=”second”>
<div class=”login-area”>
<div id=”b”>
<form method=”post” action=””>
<div class=”form-group”>
<label>Username, Phone or Email</label>
<input type=”text” name=”username” class=”form” />

<div class=”form-group”>
<input type=”password” name=”password” class=”form” />
<a href=”#”>Log In</a>
<a href=”#” class=”pswd”>Forgot Password?</a>

<section id=”others”>
<div id=”logo”>
<img src=”images/logo.png” alt=”logo” width=”40px” />

<h1>See what’s happening in the world right now</h1>

<h4>Join Twitter today.</h4>

<div id=”buttons”>
<a href=”#signup” class=”signup-btn”>Sign Up</a>
<a href=”#login” class=”login-btn”>Login</a>
<!–start second section showing the login form and buttons–>
<!–end main section–>
<!–start footer section–>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Help Center</a></li>
<li><a href=”#”>Terms</a></li>
<li><a href=”#”>Privacy policy</a></li>
<li><a href=”#”>Cookies</a></li>
<li><a href=”#”>Ads info</a></li>
<li><a href=”#”>Blog</a></li>
<li><a href=”#”>Status</a></li>
<li><a href=”#”>Jobs</a></li>
<li><a href=”#”>Brand</a></li>
<li><a href=”#”>Advertise</a></li>
<li><a href=”#”>Marketing</a></li>
<li><a href=”#”>Businesses</a></li>
<li><a href=”#”>Developers</a></li>
<li><a href=”#”>Directory</a></li>
<li><a href=”#”>Settings</a></li>
<li>© 2020 Twitter, Inc.</li>
<!–end footer section–>


Article Categories:

Leave a Reply

Your email address will not be published. Required fields are marked *