Hello, this is my second In-Depth project blog post. Here’s a quick recap of my project. My In-Depth project is learning web development code, specifically HTML, CSS, and JavaScript. My goal is to create a functioning website, and to do that you need to include code from all three of these various languages. An analogy is to think of a website as a building. The skeleton/structure is HTML, the tiles and paint are CSS, and the elevator is JavaScript. (Programming With Mosh). Over the course of five months, I plan to first learn HTML, then CSS, and then JavaScript.
So far, I have mastered the basics of HTML. I started with HTML because it’s the building blocks of a website. It is what defines all of the information, and the other two codes are based on reorganizing and adding functionality to the website. To get a good understanding of the basics, I watched a roughly one-hour YouTube video on HTML, that also included parts of CSS as extra. It covered the following aspects:
HTML basics:
| !<DOCTYPE html> | This gets put at the top of the document and defines it as an html doc |
| <html>
</html> |
All code is in-between these two brackets. They go at the top and bottom of the document. |
| <head>
<head/> |
In between the two <head>’s all the browser information is defined. Stuff such as the title and the information page. |
| <title>
</title> |
This defines the headline title of the webpage that appears when searched up and at the top of the tab. |
| <body>
</body> |
In between these two <body>’s goes anything that is on the website itself. This includes all kinds of text, images, links, videos, and much more. |
| <img
src=”” alt=”” />
|
This is how you define an image. In between the scr parenthesis goes the image file name, and in the alt parenthesis goes text for if that image cannot be displayed. |
| <p>
</p> |
Inside <p> is where all text related code goes. This also includes editing text with CSS code |
These are the basics of HTML and are the building blocks for my future website. As well as learning the basics, I also have learned a couple tricks.
Prettier: Prettier is an extension that can be used in Visual Studio code, which is the coding platform that I’m using. Prettier is a way of formatting code in a much more organized and visually appeasing way. HTML code can technically be written in one line and still work, but that isn’t very organized and easy to read. What prettier does is it formats your code in a way that’s easy to navigate. Here’s an example of a very simple code before and after using prettier. As you can see it’s a very useful extension to have.
Before:
After:
CSS Basics:
During this time, I have also learned a bit of CSS code integrated into the HTML document. Normally on larger scale websites, HTML, CSS, and JavaScript would all be written in different files, but you can incorporate CSS into HTML. Here are a couple of things I have learned so far.
| <style>
</style> |
Inside <style> is where CSS editing happens. This includes |
| <strong> </strong> | To make text Bold |
| <I>< /I> | To make text italicized. |
| <u></u> | To make text underlined |
| color: ____; | You can change the text colour |
| font-style: _____; | You can change the font |
| class {
color: red font-style: normal; }
<class> </class> |
You can also group these attributes into classes and have the text in the singular class instead of having all the different attributes around the text. |
| width: ____px; | Changes the width of an image |
| Border-radius: ____px; | Changes the pictures edges smoothness |
| Float: ___; | Changes the position of the image |
How did your mentor gain their experience/ expertise?
My mentor’s name is Stephan, and he’s the son of a family friend. He has a lot of experience in coding and was willing to be my mentor. He is a master in HTML, CSS, C#, and Python. He spent five years at SFU learning how to write/develop websites and how to create complex codes in various languages. He also has worked in a professional environment for a full year writing production level codes. In his spare time, he developed several websites, including one that showcased his personal projects. He has also written testing codes for large banking applications. I’m glad that he is my mentor, as he has lots of knowledge and a respectable past.
What were those experiences like for your mentor?
Stefan said that there was a very high learning curve when learning how to code. He put lots of hours and time into learning code and developing projects, both professionally and in his spare time. However, all the effort spent was payed off. He says it’s very rewarding completing a challenging code. “It’s quite a nice feeling”. He also said that coding can be fun and quite engaging.
What wisdom have you gained from your mentor so far?
When we met for our talk, I shared my screen and showed him my progress. He made sure I was on the right track, learning the right things and in the proper order. He also gave me some helpful tricks and resources. He introduced me to HTML Reference, a very useful website that shows all the useful tags in HTML code. I will find this very useful as I further develop my skills. A little trick he told me was that If I opened my HTML code by right clicking and pressing “open with live server” instead of dragging it from file explorer, I could update the website automatically by saving it instead of having to reload it every time. This is a nice quality of life trick. Stefan told me to update him on any major developments, and that he has some more stuff planned for later in the project.
What have you learned so far, in terms of facilitation strategies, that might contribute to your own development as a mentor?
I have learned a lot about HTML in a short amount of time, but I have also learned what it means to be a mentor. A mentor doesn’t do the work for you: they guide you in the right direction and provide support. Learning what it means to be a mentor and the skills a mentor has is something that I shall continue to do as I continue through this project.