-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
107 lines (100 loc) · 12.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html>
<head>
<html lang="en-US"></html>
<link rel="stylesheet" href="stylesheet.css">
<script src="javascript.js" defer></script>
<meta property="og:image" content="kittycat.gif">
<meta property="og:description" content="This is just a fun page where I test out all the things that I've learned while doing CSS, HTML, and even Javascript!">
<meta property="og:title" content="Khety Land!">
<link rel="shortcut icon" href="kittycat.png" type="image/x-icon">
<meta charset="utf-8">
<title>Welcome!</title>
</head>
<body>
<h1 class="box1">Welcome to Khety Land!</h1>
<h3 class="box3">Hi! My name's Khety as you can tell by the header. And this is one of my first pages using HTML and CSS. This is going to be a sort of experimental page where I keep updating it everytime I learn something new about CSS and web design in general. So everytime you see this it'll be a little bit different and hopefully a little bit better everytime. So enjoy!
This is also going to be a blog! I hope that this might help someone that's trying to learn CSS, HTML, Javascript or anything Web Design. Or maybe that this will help anyone to find inspiration because that was also something that I struggled with a lot at the beginning. Or that it'll just serve as entertainment for someone that's trying to learn these things and just wants to procrastinate a little bit but still doesn't just want to watch youtube or netflix or something like that.
</h3>
<img src="welcome!.gif" class="box2">
<img src="welcome!.gif" class="box5">
<div class="box4">
<h3 class="flip" onclick="myFunction()" ondblclick="myFunction2()">My first blog entry!</h3>
<div id="panel">
<h3>Hi! So this is my first blog! I'm going to be be explaining the main things that I've learned so far. So far this is what my blog page looks like: <img src="2021-05-10 (2).png" class="img">
So as you can see the page contains a simple header saying "Welcome to Khety Land", two images/gifs that are on the side, and a body that contains a few words about who I am and what this page is about. Simple right? Well, as you can see, right now there is also a "button" that opens up the blog and closes it (by the way you close the blog by double clicking the "button" and you'll see why I double quote the button later on. Also, if you're dumb enough to ask yourself "Well, how do I open it?"
then this is probably not for you) but that doesn't show up in the screenshot because that screenshot was taken yesturday. Anyway, one of the main things that I'm going to show step-by-step how to make is: (drum roll) the little button thingy! (I don't know what to call it in tech-y terms). The main reason I want to show how to make the button thingy is because I stuggled with that for almost two days! It might not be much compared to people that have been designing for years or maybe even
just a few months and since I've been doing this for almost a week the most I've been stuck on something is about 2 days. Anyways, here's how to make the button thingy! So the first thing I'm going explain step-by-step is the HTML of the button thingy. The main reason I want to explain that one first is just because the javascript and css of this is all based on the HTML. So here we have the HTML code: <img src="buttonhtml.png" class="img2"> So as you can see the first thing that is very important to have
in your code is structure. It is neccesary in almost every programming and in some even mandatory. So right here the structure is class#1 which is in a div and it is called box 4, this class is just to bring together the button and the text that will drop-down. The next element is an h3 element which is the button, then there's the last class which is panel and that one contains this text right here. As you can see it is indented accordingly but if you don't know what indenting is then here is a good explaination about what it is and why it's neccesary so just
<a href="https://www.quora.com/What-is-indentation-in-programming-and-why-is-it-needed">click here</a> I'll explain how the HTML code works in a moment.</h3> <h3>So after structure comes the actual code, right? Correct! So now I'm going to explain everything that's related to the code part of the button <img src="buttonjs.png" class="img3"> That right there is the Javascript of the button. This is very basic and simple Javascript but if you're confused on how it works, it basically just says if you click the button change the panel style to block which means show. The button is automatically set to display:none; in the CSS code: <img src="buttoncss.png" class="img4"> The rest of the CSS code is pretty simple but if you don't know what it means yet don't worry! It's actually pretty easy to understand even without knowing code. The text-align basically is defining where in that block you want to align it (left, right, and center) if there is a part
that really confuses you, you can go <a href="https://www.w3schools.com/css/css_intro.asp">here</a>
So, like I said the CSS code is pretty simple, but those few lines are very important because if you use those lines wisely you can create a pretty beautiful button. Do I consider my button beautiful? No, not really. Do I consider to be a little easier on the eyes compared to before? Yeah. And getting back to the HTML part of the button, the indentation should be 1- The first div/ class (name it however you want) 2- Another class saying that if the area of the class is clicked run MyFunction() or whatever you choose to name your function 3- Next is an ID that contains an h3 tag that has all the text that you want to hide/show 4- And put all of that in the body</h3><h3>
So that's how my code works! I hope you that you enjoyed this blog and I hope this can help some people that are starting out or that just want some entertainment that's not completely dumb and useless. And hopefully I can look back at this and see my progress!
</h3>
</h3>
</div>
<h3 class="flip2" onclick="myFunction3()" ondblclick="myFunction4()">Testing out stuff in another page!</h3>
<div id="panel2">
<h3>Hi! Welcome to another blog post! So in this post I'm going to explain two things. One: How to push, commit, etc. I'm not going to explain how to set up git because I'm not good in that area and I'm still learning how to do that (mainly because my mom did it for me haha) and two: I'm also going to be showing you guys my journey doing a tutorial from Mozilla. I really recommend using <a href="https://developer.mozilla.org/en-US/docs/Learn/Front-end_web_developer">this tutorial</a> to learn about HTML & CSS basics along with Javascript. I'm going to be tracking all the stuff I test out. That page isn't going to be an actual website, it's just going to be a test area / playgorund. But anyhoo, let's start out with the basic commands to know on the command line.</h3>
<un>
<li>git push</li>
<li>cd ..</li>
<li>cd</li>
<li>git commit</li>
<li>git add .</li>
</un>
<h3>So first we're going to look at how to push something to your github page. <strong>Git add .</strong> is the first thing you need to do just to add whatever changes you made from the working directory to the staging area, and you write it as git add . in the command line. After that you need to <strong>Git commit</strong> This basically just adds those changes to the local repository, if it works it should look something like this: <img src="2021-05-20 (2)_LI.jpg" class="img5">
As you can see you write it as git commit -m "Put a brief description on what you changed" and you'll see how many deletions, insertions and files you changed. You can see a clear example of that in the text that beside the blue arrow. And once you've commited your changes you'll need to push to save all your changes and put them in your github page. The push works like what you see next to the red bracket (please excuse my bad drawing) if you do the push correctly then that's what's going to appear. All you need to input is git push and if everything before it worked then this should work aswell. </h3>
<h3><strong>Git cd:</strong> So in git cd there are to things you can do. One of the things is cd .. and it works like this: So let's say that you are in this folder "Users\Khety\OneDrive\Documents\KhetyLand" so if you input cd .. into the command line it will take you out of the last folder like this: "Users\Khety\OneDrive\Documents" and if you input cd NameofFolder it will add that folder. Note that the folder has to be inside the previous folder, because if KhetyLand is not inside of Documents it will not work.</h3>
<h3>Now we're going to move on to my test page. So I'm going to link a website that's really fun and useful, it has a lot of little tips and tricks for HTML & CSS so if you want to use the same resource as me then <a href="https://markodenic.com/html-tips/">here it is.</a>I've been using this website to learn a few things about HTML and a few things that I learned to do are:</h3>
<ul>
<li>Meters</li>
<img class="img6" src="2021-05-21.png">
<h3>The meter code is really easy and with just a little CSS you can have different meters for different things! Without the CSS it still looks decent but you can add your own creativity to it!</h3>
<p id="codeexample"><label for="value1">Low</label></p>
<p><meter id="value1" min="0" max="100" low="30" high="75" optimum="80" value="25"></meter></p>
<li>Simple Survey technique</li>
<img class="img7" src="2021-05-21 (2).png">
<h3>The code for this is almost as simple as the code for the meters. And just like the meters, with a little CSS, your own creative touch and some Javascript you can have a cute little survey on your page!</h3>
<p id="codeexample"><form>
<p><fieldset></p>
<p><legend>Choose your favorite language</legend></p>
<p><input type="radio" id="javascript" name="language"></p>
<p><label for="javascript">JavaScript</label><br/></p>
<p><input type="radio" id="python" name="language"></p>
<p><label for="python">Python</label><br/></p>
<p></fieldset></p>
<p></form></p>
<li>Easy contact me footer!</li>
<h3>You can actually see an example of this right below this text! A contact me footer is always neccasary for a company website or even just a normal website which is why this is one of the coolest hacks! You only use HTML, so no Javascript requiered,
and it's not even hard HTML! It's very simple and something that is really useful for your page! Just add a little CSS and it's ready to go! Also I want to mention that the contact me part of a page doesn't have to be a footer it's just one of the most common ways to
add a contact me part and it's one that a regularly see.</h3>
<p><a href="mailto:{email}?subject={subject}&body={content}"> Send us an email </a></p>
<p><a href="tel:{phone}"> Call us </a></p>
<p><a href="sms:{phone}?body={content}">Send us a message</a></p>
</ul>
<h3>So that would be the end of this blog! I know that I didn't explain how the code worked exactly but I don't have the best grasp on how it works or how to explain it. I linked the page that I got these cool little hacks/tips so if you want to understand how to do it then just go ahead and look at how it works!
I might make another small blog about it if I get a good enough grasp on how it works but until then just look at my other blogs!
</h3>
</div>
<h3 class="flip3" onclick="myFunction5()" ondblclick="myFunction6()">Fun news!</h3>
<div id="panel3">
<h3>Hi! I hope that whoever is reading this is having a good day! I just have some fun news! I'm starting a travel blog with my family! My whole family has a lot of experience traveling but this will be the first time we are all going to be traveling to
Europe together! We'll be posting about our trips, experiences, tips, ect.! I will leave a link to the Github page and I'll leave you guys with a satisfying picture of a previous trip!
</h3>
<img src="notredame.JPG" class="img8">
</div>
<div class="container">
<a class="footer" href="mailto:khetyaviles1612@gmail.com?subject=Hi!&body=I really like your blog! Just had a little question, so ________?">
Send me an email
</a>
<a class="footer" href="tel:{6351117558}">
Call me
</a>
<a class="footer" href="sms:{6351117558}?body={Hi! I really like your website I just had a little question, so _______?}">
Send me a message
</a>
</div>
</div>
</body>
</html>