-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
142 lines (95 loc) · 6.72 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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Joe's Website</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.box {
border: 1px solid grey;
background-color: #d3d3d3;
vertical-align: bottom;
padding: 5px;
text-align: left;
margin-top: 20px;
}
.hr {
border-width: 3px;
}
.align-left {
float: left;
margin-right: 10px;
}
.medium {
width: 140px;
max-height: auto
}
</style>
</head>
<body>
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="navbar-brand">Joe Mazzella's Website</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="resume.html">Resume</a></li>
<li><a href="links-and-posts.html">Links and Posts</a></li>
</ul>
</div>
</div>
</div>
<div class="container"><h2 class="title">Welcome</h2></div>
<div class="container">
<p><img src="images/profile-pic.jpg" class="img-rounded img-responsive align-left medium"></img>Welcome to my site! I'm an attorney based in the San Francisco Bay Area. I put this site together to serve as a personal page, as well as a way to practice and learn how to build things online. If something on here isn't working, there's a good chance I'm still figuring it out. However, in case I missed it, please open an issue in my <a href="https://github.com/bluemazzoo/bluemazzoo.github.io">GitHub account</a>. Thanks!</p>
</div>
<hr>
<div class="container">
<div class="col-sm-10">
<h3 id="how-i-built-this-site">How I Built This Site</h3>
<p>As I mentioned above, this site will always be a work in progress, as I continue to learn more about programming. However, there are a few resources that I looked to at the beginning. Here they are, in no particular order:</p>
<ul class="developer-resources">
<li><a href="https://www.udemy.com/the-complete-web-developer-course-2/">Rob Percival's Udemy Course</a> - This course taught me the basics about bootstrap and where to find lots of other resources.</li>
<li><a href="https://www.freecodecamp.org/">freeCodeCamp</a> - I started this course after I'd built the page, but it helped me figure out the CSS to create the dislcaimer box at the bottom of each page, as well as understand some of the CSS basics that I wasn't too familiar with.</li>
<li><a href="https://www.khanacademy.org/computing/computer-programming/html-css">Khan Academy's Intro to HTML/CSS</a> - This course taught me the basics about HTML and CSS, which is foundational for any understanding of programming. It also teaches you some of the basics about how the tools you'll need to use throughout the process of building a website.</li>
<li><a href="https://www.coursera.org/specializations/python">Coursera's Python for Everybody course</a> - This course goes through a more complex language, python, but explains a lot about how to run programs on your computer. It's not necessary to make a website, but you'll learn a ton</li>
<li><a href="https://www.w3schools.com/">w3schools website</a> - This website contains more documentation about programming than you'll need to get a website going, but it's a great resource if you forget how to do anything.</li>
<li><a href="http://www.ben.balter.com/">Ben Balter's website</a> - Ben's put together a great personal website that is way more complicated than what I've been able to put together. However, it makes use of bootstrap and is a great resource if you want to view the source and see how he put together some of the pages and posts.</li>
<li><a href="https://www.chenhuijing.com/blog/setting-up-custom-domain-github-pages/">Adding custom domain</a> - It took me a little time to figure this out, but this website has a great walkthrough of how to add a custom domain to a GitHub Pages site.</li>
<li><a href="https://help.github.com/articles/setting-up-an-apex-domain/#configuring-an-alias-or-aname-record-with-your-dns-provider">Adding an Aname record to the domain</a> - I had no idea what an Aname record was until I had to put one in place. Basically, after I set up the CNAME record, I tried to search this website without the "www" in front of it, but couldn't get through. Then, I did some googling, and found out about <a href="https://my.bluehost.com/cgi/help/whats-an-a-record">apex records</a>. For a fluid user experience, make sure you add that to your DNS records.</li>
</ul>
</div>
</div>
<footer>
<!-- Make the footer have rounded edges, text centered, and background a lighter grey -->
<div class="container">
<div class="row box">
<p class="text-center">While my website contains legal issues, it is not intended to and does not constitute legal advice, recommendations, or counseling under any circumstance and should not be considered a substitute for advice from qualified counsel. My website, and your use of it, does not create an attorney-client relationship.</p>
</div>
</div>
</footer>
</div><br />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>