1 Star2 Stars3 Stars4 Stars5 Stars (16 votes, average: 5.00 out of 5)

Coding Websites With CSS Absolute Beginner Web Development Lesson 9

This is the lesson where we actually begin to code a web page with html and CSS. We take the mock-up from the last post and make a real webpage with clickable links.

List of CSS Commands Used *

Here are a list of CSS commands used in this lesson.

  • color: changes the color of the text.
  • background-color: changes background color.
  • position: manipulates a position of an element. example: fixed, absolute, relative.
  • display: display options are block, inline-block, none.
  • width: adjusts the width of an element. Examples of mesurements: % px em vw vh.
  • margin: sets margin around elements.
  • font-family: sets the font family in an element.
  • padding: sets padding inside an element.
  • font-size: specify the font size.
  • letter-spacing: set spacing between letters in an element.
  • text-indent: indents text on elements.
  • line-height: specifies line height in paragraphs.
  • font-weight: set to bold, italic, 100 to 600
  • list-style: to remove bullets or numbers from list items.
  • text-decoration: remove and text decoration. Example: underline, strike-though.
  • float: floats and element left or right.
  • border: sets a border around an element. Syntax 3px solid black;
  • text-shadow: sets a text shadow on text. Syntax 1px 2px 3px #000;

Sudo Selectors *

We did not go over Sudo selectors in detail but we do use a one of them.

Subscribe To My YouTube Channel:
  • :first-of-type Selects the first of a type in CSS.

Here is the Mock Up used in This Lesson *

mockup

Codes For This Lesson *

Here are the codes for this lesson.

index.html *

<html>
<head>
<title>My First Programming Website</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main" id="top">
<div class="header">
<img src="logo200.png" id="logo" />
</div>
<div class="article">
<input type="color" id="col" />
<h1 id="firstp">My First Programming Website</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- sidebars-webpro -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1660558539461987"
     data-ad-slot="8877729013"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<h2 id="secondp">Heading 2</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<h2 id="thirdp">Heading 3</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="sidebar">
<ul id="menu">
	<li><a href="#top">Top</a></li>
	<li><a href="#firstp">First Paragraph</a></li>
	<li><a href="#secondp">Second Paragraph</a></li>
	<li><a href="#thirdp">Third Paragraph</a></li>
</ul>
</div>
</div>
</body>
</html>

style.css *

#logo{ display:block; width:200px; margin:0 auto;}.header{ background-color:#a10326;}
body{ margin:0; font-family: 'Roboto', sans-serif;}
.article{ width:60%; padding:2% 10%;}
p{ font-size:large; letter-spacing:3px; text-indent:40px; line-height:44px;}
p:first-of-type{ font-weight:bold;}
#sidebar li{ list-style:none;}
#sidebar li a{ text-decoration:none;}
#sidebar{ width:20%; float:right; display:block;}#menu{ position:fixed; top:30%; float:right; background-color:#5b6684;   border: 3px solid #8f132f; padding:55px;}
#menu li a{ color:#fff; text-shadow:1px 2px 3px #000;}

Next Lesson

Coding Websites With CSS Absolute Beginner Web Development Lesson 9 was last modified: November 7th, 2018 by Maximus Mccullough

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider a tip for the content.

One Time Tip

more tips

Reoccuring Tips

Tips

Coding Websites With CSS Absolute Beginner

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.