Skip to content

Instantly share code, notes, and snippets.

@fer408

fer408/index.html

Created February 1, 2016 08:23
Show Gist options
  • Save fer408/650c86e781b7f6a94f46 to your computer and use it in GitHub Desktop.
Save fer408/650c86e781b7f6a94f46 to your computer and use it in GitHub Desktop.
Download ZIP
Intro to Programming Project 1
Raw
index.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>A Pen by fernando alarcon</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<DOCTYPE>
<html>
<head>
<title>Things i've learned</title>
</head>
<body>
<h1> Important concepts I learned in Intro to Programming</h1>
<div class="lesson">
<h1>Lesson:1.1</h1>
<div class="concept">
<div class="concept-title">How the web works</div>
<div class="concept-description">
<p> The web is a bunch of computers that talk to each other through a web like connection of servers and computers.</p>
</div>
</div>
<div class="concept">
<div class="concept-title">Tags and elements</div>
<div class="concept-description">
<p>In this lesson of the segment i leaned about how HTML are made up of tags. There are many different tags and they all have different purposes.</p>
</div>
</div>
<div class="concept">
<div class="concept-title">HTML</div>
<div class="concept-description">
<p>in this lesson i learned allot about Hyper Markup language and how its makes up what people see in webpages.</p>
</div>
</div>
<div class="concept">
<div class="concept-title">Computers are stupid</div>
<div class="concept-description">
<p>In this lesson i learned that Computers can be considered stupid because they take information literally so if theres any sort of minor mistake is your syntax then your code will go haywire.</p>
</div>
</div>
<div class="concept">
<div class="concept-title"> Inline and Block</div>
<div class="concept-description">
<p>In this portion of the lesson i learned how HTML is either inline or block. and how block elements form an invisible box around its desired content</p>
</div>
</div>
</div>
<div class="lesson">
<h1>Lesson 1.2</h1>
<div class="concept">
<div class="concept-title">Developer tools</div>
<div class="concept-description">
<p>In this lesson i learned about developer tools and how to acces them through my webpage
</p>
</div>
</div>
<div class="concept">
<div class="concept-title">DOM(Document Object Mode)</div>
<div class="concept-description">
<p>In this part of the lesson i learned about how DOM is the tree like structure of HTML</p>
</div>
</div>
<div class="concept">
<div class="concept-title">The realationship of HTML and boxes</div>
<div class="concept-description">
<p> In this part of the lesson i learned about the relationship between HTML and boxes. and how it makes it much easier for programmers to vizualize codes beign in certain boxes</p>
</div>
</div>
<div class="concept">
<div class="concept-title">Programming text editors</div>
<div class="concept-description">
<p> in this part of the lesson i was introduce to text editors that are used by professionals to create code.</p>
</div>
</div>
</div>
<div class="lesson">
<h1>Lesson:1.3</h1>
<div class="concept">
<div class="concept-title">CSS</div>
<div class="concept-description">
<p>In this portion of the lesson i learned about CSS(Cascading Style Sheets) and what its function in web development, as well as some of the neat tricks you can make webpages do with CSS.</p>
</div>
</div>
<div class="concept">
<div class="concept-title">More on Dev Tools</div>
<div class="concept-description">
<p>During this portion of the lesson i was shown more whays to use dev tools as well as different ways to get to the console, for example i didn't know that if i right click and pick "inspect element" that it takes me to the console</p>
</div>
</div>
<div class="concept">
<div class="concept-title">Experimenting with style</div>
<div class="concept-description">
<p> In this portion of the lesson i leared about how to experiment with style using CSS. I was introduced to many different ways to make my webpage look awesome.</p>
</div>
</div>
<div class="concept">
<div class="concept-title">Code Repetition</div>
<div class="concept-description">
<p>In this portion of the lesson where I learned about how important its is as a programmer to avoid making repetitions with my code. This will benefit me in that i have to write less code, I'll be less prone to making errors in my syntax.Overall
it will make me look like i know what I am doying.
<p>
</div>
</div>
<div class="concept">
<div class="concept-title">Code structure</div>
<div class="concept-description">
<p>During this portion of the lesson i was introduced tp code structure and its importance in programming. I learned that it's important to have things structured so its easy for a programmer to read. I also learned about how there are structured
programming rules to help keep my code looking professional.</p>
</div>
</div>
</div>
<div class="lesson">
<h1>Lesson 2.1</h1>
<div class="concept">
<div class="concept-title">What is Programming?</div>
<div class="concept-description">
<p>A computer program is a guide that tells computers how to do neat stuff. Like play games and surf the net.</p>
</div>
</div>
<div class="concept">
<div class="concept-title">Programming Languages</div>
<div class="concept-description">
<p>In this lesson I learned about computer languages and how they are used. I learned that humans need to communicate with computers in languages created specifically for that task. I also got an introduction to the Python Language
<p>
</div>
</div>
<div class="concept">
<div class="concept-title">Python</div>
<div class="concept-description">
<P>During this part of the Lesson I got an introduction to the programming language python and saw some ways that i can use it. For example there was that module where you have to create a code that calculates how many minutes there is in a week.</p>
</div>
</div>
<div class="concept">
<div class="concept-title">Programming Grammar</div>
<div class="concept-description">
<p>In this portion of the Lesson i Learned about how important it is to implement proper grammar when writing code. I learned that the smallest mistakes can make a computer go haywire if not written in the specific syntax that Programming Language
utilizes.
</p>
</div>
</div>
</div>
</body>
</html>
</body>
</html>
Raw
style.css
body {
background-color: blue;
font-family: Verdana
}
h1 {
text-align: center;
font-size: 45px
}
.lesson {
background-color: black;
color: blue;
font-size: 20px;
padding: 15px;
border-radius: 25px;
}
.concept-title {
background-color: red;
color: black;
font-size: 25px;
text-align: left;
border-radius: 15px;
padding: 15px;
}
.concept-description {
font-size: 15px;
background-color: blue;
color: black;
border-radius: 25px;
padding: 15px
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment