Hi, my name is Pankaj, I recreate the frontend of Hackers News website. I am working on this project for 2 days. Now I did this project today.
From this project, I learn a lot. The basics of HTML and CSS learn from the by taking the free course of Pirple .
Here the source code
“HTML Code”
<!DOCTYPE html>
<html>
<head>
<meta name=”referrer” content=”origin”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<link rel=”stylesheet” type=”text/css” href=”stylesheet1.css”>
<title>Hacker News</title>
</head>
<body>
<center>
<! — The <table> tag defines an HTML table.
An HTML table consists of one <table> element and one or more <tr>, <th>, and <td> elements.
The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell. →
<table border=”0" cellpadding=”0" cellspacing=”0" width=”85%” bgcolor=”#f0f0e4">
<! — The <tr> tag defines a row in an HTML table.
A <tr> element contains one or more <th> or <td> elements. →
<tr>
<! — The <td> tag defines a standard data cell in an HTML table.
An HTML table has two kinds of cells:
Header cells — contains header information (created with the <th> element)
Data cells — contains data (created with the <td> element)
The text in <td> elements are regular and left-aligned by default.
The text in <th> elements are bold and centered by default. →
<td bgcolor=”#ff7700">
<table border=”0" cellpadding=”0" cellspacing=”0" width=”100%” style=”padding:2px”>
<tr>
<td style=”width:18px;padding-right:4px”>
<a href=”#”>
<img src=”hackersnews.gif” width=”20" height=”20" style=”border:1px white solid;”>
</a>
</td>
<td>
<! — The <span> tag is an inline container used to mark up a part of a text, or a part of a document.
The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline element. →
<span>
<b class=”name1"> <a href=”#”>Hacker News</a></b>
<a href=”#” class=”name2">new</a> |
<a href=”#” class=”name2">past</a> |
<a href=”#” class=”name2">comments</a> |
<a href=”#” class=”name2">ask</a> |
<a href=”#” class=”name2">show</a> |
<a href=”#” class=”name2">jobs</a> |
<a href=”#” class=”name2">submit</a>
</span>
</td>
<td style=”text-align:right;padding-right:4px;”>
<span>
<a href=”#” class=”name2">login</a>
</span>
</td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border=”0" cellpadding=”0" cellspacing=”0" class=”itemlist”>
<tr>
<td align=”right” valign=”top”>
<span>1.</span>
</td>
<td valign=”top”>
<center>
<a href=’upside.gif’>
<div class=”votearrow” title=”upvote”>
</div>
</a>
</center>
</td>
<td>
<a href=”#” class=”size1">The Day AppGet Died</a>
<span class=”size2">
(<a href=”#”><span>keivan.io</span></a>)
</span>
</td>
</tr>
<td colspan=”2">
</td>
<td class=”size3">
<span>579 points</span> by <a href=”#”>lostmsu</a>
<span> <a href=”#”> 6 hours ago</a></span>
<span></span> | <a href=”#”>hide</a> | <a href=”#”>201 comments</a>
</td>
</tr>
<tr style=”height:5px”></tr>
<tr>
<td align=”right” valign=”top”>
<span>2.</span></td>
<td valign=”top” class=”votelinks”>
<center>
<a href=’#’>
<div class=’votearrow’ title=’upvote’></div>
</a>
</center>
</td>
<td>
<a href=”#” class=”size1">OpenSilver is a modern, plugin-free, open-source reimplementation of Silverlight</a>
<span class=”size2">
(<a href=”#”><span class=”sitestr”>github.com</span></a>)
</span>
</td>
</tr>
<td colspan=”2">
</td>
<td class=”size3">
<span>58 points</span> by <a href=”#”>LyalinDotCom</a>
<span>
<a href=”#”>2 hours ago</a>
</span> <span>
</span> | <a href=”#”>hide</a> | <a href=”#”>40 comments</a>
</td>
</tr>
<tr class=”spacer” style=”height:5px”>
</tr>
<tr>
<td align=”right” valign=”top” class=”title”>
<span>3.</span></td>
<td valign=”top” class=”votelinks”>
<center>
<a href=’#’>
<div class=’votearrow’ title=’upvote’></div>
</a>
</center>
</td>
<td>
<a href=”#” class=”size1">Htmx — high power tools for HTML</a>
<span class=”size2"> (<a href=”#”><span>htmx.org</span></a>)
</span>
</td>
</tr>
<tr>
<td colspan=”2">
</td>
<td class=”size3">
<span>309 points</span> by <a href=”#”>oftenwrong</a>
<span><a href=”#”>6 hours ago</a>
</span> <span>
</span> | <a href=”#”>hide</a> | <a href=”#”>74 comments</a>
</td></tr>
<! — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — →
<tr style=”height:5px”></tr>
<tr>
<td align=”right” valign=”top”><span>4.</span></td>
<td valign=”top” class=”votelinks”>
<center>
<a href=’#’>
<div class=’votearrow’ title=’upvote’></div>
</a>
</center>
</td>
<td>
<a href=”#” class=”size1">Show HN: Obsidian — A knowledge base that works on local Markdown files</a>
<span class=”size2">
(<a href=”#”><span>obsidian.md</span></a>)
</span>
</td>
</tr>
<tr>
<td colspan=”2">
</td>
<td class=”size3">
<span>812 points</span> by <a href=”#”>ericax</a>
<span>
<a href=”#”>13 hours ago</a></span>
<span></span> | <a href=”#”>hide</a> | <a href=”#”>360 comments</a>
</td></tr>
<! — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — →
<tr style=”height:5px”></tr>
<tr>
<td align=”right” valign=”top”><span>5.</span></td>
<td valign=”top” class=”votelinks”>
<center>
<a href=’#’>
<div class=’votearrow’ title=’upvote’></div>
</a>
</center>
</td>
<td>
<a href=”#” class=”size1">Show HN: RoughNotation — create and animate hand-drawn annotations on a web page</a>
<span class=”size2">
(<a href=”#”><span>roughnotation.com</span></a>)
</span>
</td>
</tr>
<tr>
<td colspan=”2">
</td>
<td class=”size3">
<span>508 points </span> by <a href=”#”>shihn</a>
<span class=”age”>
<a href=”#”>13 hours ago</a></span>
<span></span> | <a href=”#”>hide</a> | <a href=”#”>62 comments</a>
</td></tr>
<! — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — →
<tr style=”height:5px”></tr>
<tr>
<td align=”right” valign=”top”><span>6.</span></td>
<td valign=”top” class=”votelinks”>
<center>
<a href=’#’>
<div class=’votearrow’ title=’upvote’></div>
</a>
</center>
</td>
<td>
<a href=”#” class=”size1">What’s in a Parser Combinator? (2016)</a>
<span class=”size2">
(<a href=”#”><span”>remusao.github.io</span></a>)
</span>
</td>
</tr>
<tr>
<td colspan=”2">
</td>
<td class=”size3">
<span>38 points</span> by <a href=”#”>pythux</a>
<span>
<a href=”#”>10 hours ago</a></span>
<span></span> | <a href=”#”>hide</a> | <a href=”#”>80 comments</a>
</td></tr>
<! — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — →
<tr style=”height:5px”></tr>
<tr>
<td align=”right” valign=”top”><span>7.</span></td>
<td valign=”top” class=”votelinks”>
<center>
<a href=’#’>
<div class=’votearrow’ title=’upvote’></div>
</a>
</center>
</td>
<td class=”title”>
<a href=”#”class=”size1">Idea Generation</a>
<span class=”size2">
(<a href=”#”><span>samaltman.com</span></a>)
</span>
</td>
</tr>
<tr>
<td colspan=”2">
</td>
<td class=”size3">
<span>272 points</span> by <a href=”#”>awaxman11</a>
<span>
<a href=”#”>13 hours ago</a></span>
<span></span> | <a href=”#”>hide</a> | <a href=”#”>360 comments</a>
</td></tr>
<! — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — →
<tr style=”height:5px”></tr>
<tr>
<td align=”right” valign=”top”><span>8.</span></td>
<td valign=”top” class=”votelinks”>
<center>
<a id=’up_23324598' href=’#’>
<div class=’votearrow’ title=’upvote’></div>
</a>
</center>
</td>
<td>
<a href=”#” class=”size1">Most-streamed track of the day by country</a>
<span class=”size2">
(<a href=”#”><span>worldspotify.com</span></a>)
</span>
</td>
</tr>
<tr>
<td colspan=”2">
</td>
<td class=”size1">
<span>86 points</span> by <a href=”#”>sebastien-lbn</a>
<span>
<a href=”#”>7 hours ago</a></span>
<span></span> | <a href=”#”>hide</a> | <a href=”#”>200 comments</a>
</td></tr>
<! — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — →
<tr style=”height:5px”></tr>
<tr>
<td align=”right” valign=”top”><span>9.</span></td>
<td valign=”top” class=”votelinks”>
<center>
<a href=’#’>
<div class=’votearrow’ title=’upvote’></div>
</a>
</center>
</td>
<td>
<a href=”#” class=”size1">Guitar Decomposed: 5. Mutating the Third</a>
<span class=”size2">
(<a href=”#”><span class=”sitestr”>bartoszmilewski.com</span></a>)
</span>
</td>
</tr>
<tr>
<td colspan=”2">
</td>
<td class=”size3">
<span>12 points</span> by <a href=”#”>lelf</a>
<span>
<a href=”#”>9 hours ago</a></span>
<span></span> | <a href=”#”>hide</a> | <a href=”#”>15 comments</a>
</td></tr>
<! — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — →
<tr style=”height:5px”></tr>
<tr>
<td align=”right” valign=”top”><span> 10.</span></td>
<td valign=”top” class=”votelinks”>
<center>
<a href=’#’>
<div class=’votearrow’ title=’upvote’></div>
</a>
</center>
</td>
<td>
<a href=”#” class=”size1">How many people did it take to build the Great Pyramid?</a>
<span class=”size2">
(<a href=”#”><span>ieee.org</span></a>)
</span>
</td>
</tr>
<tr>
<td colspan=”2">
</td>
<td class=”size3">
<span>72 points</span> by <a href=”#”>samizdis</a>
<span>
<a href=”#”>7 hours ago</a></span>
<span></span> | <a href=”#”>hide</a> | <a href=”#”>47 comments</a>
</td></tr>
<! — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — →
<tr style=”height:5px”></tr>
<tr>
<td align=”right” valign=”top”><span> 11.</span></td>
<td valign=”top” class=”votelinks”>
<center>
<a href=’#’>
<div class=’votearrow’ title=’upvote’></div>
</a>
</center>
</td>
<td>
<a href=”#” class=”size1">Deno Is a Browser for Code </a>
<span class=”size2">
(<a href=”#”><span>kitsonkelly.com</span></a>)
</span>
</td>
</tr>
<tr>
<td colspan=”2">
</td>
<td class=”size3">
<span>98 points</span> by <a href=”#”>ericax</a>
<span>
<a href=”#”>7 hours ago</a></span>
<span></span> | <a href=”#”>hide</a> | <a href=”#”>84 scomments</a>
</td></tr>
<! — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — →
<tr style=”height:5px”></tr>
<tr>
<td align=”right” valign=”top”><span> 12.</span></td>
<td valign=”top” class=”votelinks”>
<center>
<a href=’#’>
<div class=’votearrow’ title=’upvote’></div>
</a>
</center>
</td>
<td>
<a href=”#” class=”size1">The PEPs of Python 3.9</a>
<span class=”size2">
(<a href=”#”><span>lwn.net</span></a>)
</span>
</td>
</tr>
<tr>
<td colspan=”2">
</td>
<td class=”size3">
<span>220 points</span> by <a href=”#”>zdw</a>
<span>
<a href=”#”>6 hours ago</a></span>
<span></span> | <a href=”#”>hide</a> | <a href=”#”>56 comments</a>
</td></tr>
<! — — — — — — — — — — — — — — — — — — — — — — — — — — — →
<tr style=”height: 5px;”></tr>
<tr style=”height: 5px;”></tr>
<tr>
<td colspan=”2">
</td>
<td class=”size1">
<a href=”#” rel=”next”>More</a>
</td>
</tr>
</table>
</td>
</tr>
<! — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — →
<table width=”100%” cellspacing=”0" cellpadding=”1">
<tr>
<td bgcolor=”#ff6600">
</td>
</tr>
</table><br>
<! — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — →
<center>
<span class=”size2">
<a href=”#”>Guidelines</a>
| <a href=”#”>FAQ</a>
| <a href=”#”>Support</a>
| <a href=”#”>API</a>
| <a href=”#”>Security</a>
| <a href=”#”>Lists</a>
| <a href=”#” rel=”nofollow”>Bookmarklet</a>
| <a href=”#”>Legal</a>
| <a href=”#”>Apply to YC</a>
| <a href=”#”>Contact</a>
</span>
<br><br>
<form method=”get” action=”#”>Search:
<input type=”text” name=”q” value=”” size=”17" autocorrect=”off” spellcheck=”false” autocapitalize=”off” autocomplete=”false”>
</form>
</center>
</td>
</tr>
</table>
</center>
</table>
</center>
</body>
</html>
“CSS Code”
body {
padding: 0px;
marker: 0px;
}
table {
font-family: Verdana, Geneva, sans-serif;
border: 1px;
}
.name1 {
font-size: 15px;
margin-right: 5px;
}
.name2 {
font-size: 12px;
}
.votearrow {
width: 13px;
height: 13px;
border: 1px;
margin: 1px 0px 1px;
background: url(“upside.gif”)
no-repeat;
}
.size1 {
font-size: 14px;
}
.size2 {
font-size: 10px;
}
.size3 {
font-size: 12px;
}
a {
text-decoration: none;
color: black;
}
nav{
height: 60px;
background-color: #F4791A;
width: 100%;
line-height: 60px;
color: black;
}
nav ul {
list-style: none;
padding-left: 0px;
display: flex;
margin-top: 0px;
}
nav li {
background-color: #F4791A;
margin: 0px;
}
nav li:hover {
background-color: #F4791A;
}
nav a {
text-decoration: none;
color: white;
display: block;
padding: 0 10px;
color: black;
}
ul li:before {
content: ‘’;
display: inline-block;
height: 20px;
width: 20px;
background-size: 20px;
background-image: url(“y18.gif”);
background-repeat: no-repeat;
margin-right: 6px;
}
