In-Depth Blog Post #6

Hello and welcome back for another update on my In-Depth project. Since my last blog post I have been focused primarily on writing CSS to style my website to match the mock-up. Admittedly it has been quite difficult to transition from thinking primarily about web design and HTML to the difficult syntax and often frustratingly arbitrary rules of CSS. As a result, the homepage of my website now looks like this:

And the code to create used to create it looks like this:

As you can probably tell the current state of my homepage does not look much like the mock-up most of this is due to the various seemingly unexplainable errors in my code that I had to gripe with. However, some of these I was unable to remedy with help from the internet and Colin who has kindly been able to answer some of my questions. Of course, the solution to the unexplained problems was to contact my mentor which I did. Unfortunately, Sam is currently on tour with his band and was not able to meet with me on Zoom since my last blog post. In this email:

He suggested that I email him the questions that I had so that he could answer them before this blog post was due. Unfortunately, after this email:

And a follow up I still have not received a response.

As previously discussed, my plan to present my In-Depth night this year is to create a website that displays what I have learned. This website will use WordPress as the content management system, and will either be hosted by WordPress as well, or I will attempt to host it myself on the server in my basement. The website will be available for about three weeks after the In-Depth night so those that were not able to attend can still view the work that I created. During the In-Depth night itself, my plan is just to have a table with my laptop, a mouse, and an external computer monitor to display my website. I will likely split my screen to show both the code of my website and the website itself and will talk viewers through some of what they are looking at. I am very excited for In-Depth night this year but unfortunately, I am very concerned about being able to complete the website on time because of the current situation with my mentor and my current, slower, pace attributed to the extracurricular commitments overshadowing this project.

In-Depth Blog Post #5

Hello and greetings from the big apple. I am currently on vacation in New York City but nonetheless have been able to make progress on my In-Depth project. In this blog post, I will outline that progress and answer some prompts provided by my teacher. To start, what have I been up to in these past two weeks? If you recall where I left off two weeks ago, my mentor Sam asked me to create a wireframe mock-up of the final website I plan on creating for this project. Thus, I fired up Adobe In-Design and got to work. This is what I was able to produce in a couple of hours:

 

If you would like to see the working file for this mock-up you can find it and other files I reference at this link: Blog Post 5

 

As you can see, a majority of this mock-up is empty image frames and Lorum Ipsum text. This is mostly because the purpose of this assignment was to get an idea of how the website will look so I can begin coding it, the actual content is yet to come. Only a day after creating this mock-up I was able to squeeze in a meeting with my mentor before I had to fly away. This meeting was recorded, but I currently do not have access to the file as it is on my computer at home. In this meeting,  we discussed the mock-up I had created, which, for the most part, was more than adequate for this project. Then, we moved on to talking about the back end of this website. First up were content management systems. A content management system is a piece of software that allows users to manage their website without having to code in everything themselves as well as giving them access to other features like plugins and themes. The most popular content management system is WordPress which is coincidentally the content management system that the blog that you are currently reading is built on. Because of its cost-effectiveness and popularity, Sam and I decided that it would be best to use WordPress as our content management system for this website, the only caveat being that I will need to learn some basic PHP (another coding language) to import my code into WordPress. Next, we discussed hosting. Every website needs a server that it can exist on so that users can access it. Now I have a server at home, however, self-hosting a website can be both complicated and insecure. Sam and I discussed many other options including purchasing a host for a month and using a free instance of Microsoft Azure or Amazon AWS. In the end, no resolution was reached as the option I go with is largely dependent on the time I have after coding my website which is yet to be determined. We ended the meeting with a brief discussion on domain names, the purchasable URLs that direct users to your site. Sam kindly pointed me to Cheaphost.com where I was able to find draedonlongley.com for $12.98 a month and ore obscure domains like .xyz for even cheaper. We agreed that moving forward my only task would be to continue to code the website each week and report with questions during out meetings. With that being said, this is what I have been able to complete since that meeting:

The HTML file for this code can be found in the folder and run in your browser.

So far, this project has been largely guided by my questions and my goals. However, Sam has been incredibly effective at taking the chance to expand on topics that I wasn’t originally curious about when I ask questions. For example, in our last meeting when discussing hosting, he brought up a way to be able to view changes to my website in real-time as running on the WordPress engine. Something that I hadn’t asked about but was both interesting and will prove to be essential to my progress. During our sessions, I always have a chance to go forward and apply what I have learned in my code. For example, after discussing the flexbox model I used Flexbox froggy to learn about the model and then created a webpage where I could play around with the idea. The biggest opportunity I have right now to accelerate my learning is to research new things to add to my code on my own, for example, in the webpage I have worked on most recently there is code for a “hamburger menu” which I discovered in an article after doing some research on how to integrate this kind of menu. Outside of the obvious question and answer period which most of our mentoring sessions revolve around we also take time to catch up. For example, I have learned that Sam is in a band that recently travelled to Calgary and that he has a particular attachment to New York City, where I am right now. One thing going particularly well now that I could not say last year was our communication outside of meetings. Sam is great at replying to emails promptly and our meetings have been able to occur with an expected degree of frequency considering that both of us are currently battling busy schedules.

Theme Park Project

Our Map

More about our park can be discovered in the brochure.

Our Brochure

Click here to access our brochure.

My Contributions

For the theme park project, my group did on the novel Never Let Me Go, I was primarily responsible for creating the cast interactions. I was able to write a description for Madame, Kath, Ruth and Tommy. I included both an outline of their general behaviour and how they would interact with park patrons. Then, based on descriptions of the book and supplements from the casting of the movie adaptation, I browsed stock images and used Artbreeder to create convincing mockups of how these characters should look. Of course, I then added these descriptions and images to the presentation and brochure. Speaking of the presentation and brochure, I was responsible for choosing and organizing the templates for both. I was also responsible for choosing the name of our theme park, Never Let Me Globe. After I had completed the characters and descriptions I moved on to the park where I designed Norfolk, the care centre, the eating area, and the stage.

In-Depth Blog Post #4

I will admit that in the last month I have not been able to make much progress on my In-Depth project. As mentioned in the last post my two tasks were to create a site map and learn how to use flexbox to arrange elements on my site in CSS. To learn flexbox my mentor sent me this article https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and to practice I played this game https://flexboxfroggy.com/. The best way I can describe a flexbox is a container that has elements nested inside of it. This container can be a row, or a column and elements can start appearing from either the bottom, top, left, or right of the box. Using other CSS attributes one can arrange the elements inside the box such as having them grow to fit the container or aligning them to the centre. Here is the link to the site map I created for the final product of this project: In-Depth Site Map.docx

Here each of the main pages are marked in blue and each of their sections are marked in green. Unfortunately, I was unable to meet with my mentor for this blog post, but luckily, I was able to send Sam my site map and we talked about the next step. Before my next blog post, I am supposed to create a wireframe design of each of my pages and do a full mock-up of one of the pages. The goal of this is to have a clear idea of how my final site will look and the skills I need to acquire to code it.

So far, the biggest challenge that I have had with my mentor is scheduling, most weeks we are able to have a meeting, but they often come at inconvenient times, and at previously mentioned, we did not communicate effectively and were thus unable to meet prior to me writing this blog post. On the other hand, the thing that is perhaps working best is my ability to ask my mentor questions and his responses to them. Most of our meetings consist of me asking questions about the work that I had done in the prior week, and this has proved an incredibly effective way to learn. I have been learning exactly what I’ve set out to and at a pace that works perfectly for me. One thing that I wish was working better was myself. Often, I find it difficult to find the motivation to code because I have other extracurricular work which often takes priority. I am concerned about being able to meet my ambitious goals when it comes to this project. Luckily, the closer I get to the completion of this project the more concrete the next steps become which will make it easier to take them.

In-Depth Blog Post #4

I will admit that in the last month I have not been able to make much progress on my In-Depth project. As mentioned in the last post my two tasks were to create a site map and learn how to use flexbox to arrange elements on my site in CSS. To learn flex box my mentor sent me this article https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and to practice I played this game https://flexboxfroggy.com/. The best way I can describe flex box is a container that has elements nested inside of it. This container can be a row, or a column and elements can start appearing from the either the bottom, top, left, or right of the box. Using other CSS attributes one can arrange the elements inside the box such as having them grow to fit the container or aligning them to the centre. Pictured below is the site map I created for the final product of this project:

 

 

 

 

 

 

 

 

 

 

 

 

Here each of the main pages are marked in blue and each of their sections are marked in green. Unfortunately, I was unable to meet with my mentor for this blog post, but luckily, I was able to send Sam my site map and we talked about the next step. Before my next blog post I am supposed to create a wireframe design of each of my pages and do a full mock-up of one of the pages. The goal of this is to have a clear idea of how my final site will look and the skills I need to acquire to code it.

So far, the biggest challenge that I have had with my mentor is scheduling, most weeks we are able to have a meeting, but they often come at inconvenient times, and at previously mentioned, we did not communicate effectively and were thus unable to meet prior to me writing this blog post. On the other hand, the thing that is perhaps working best is my ability to ask my mentor questions and his responses to them. Most of our meetings consist of me asking questions about the work that I had done in the prior week, and this has proved an incredibly effective way to learn. I have been learning exactly what I’ve set out to and at a pace which works perfectly for me. One thing that I wish was working better was myself. Often, I find it difficult to find the motivation to code because I have other extracurricular work which often takes priority. I am concerned about being able to meet my ambitious goals when it comes to this project. Luckily, the closer I get to the completion of this project the more concrete the next steps become which will make it easier to take them.

In-Depth Blog Post #3

This blog post marks 6 weeks into my In-Depth project this year. In the past two weeks I have learned how to apply CSS styling to my HTML5 code. CSS has been a challenge to be sure, with most of the difficulty stemming from understanding the box model which I explained in my previous post. Nonetheless, I was able to apply simple styles to my website with the help of a video tutorial from FreeCodeCamp.org’s YouTube channel. If you’re curious about the contents of that tutorial, please reference my previous blog post. Before my meeting with my mentor Sam, I had run into three problems with my website that I was unsure of how to fix. The 1st was a white border that appeared under my navigation menu, the 2nd was no margins under the play button, and finally the icons in the bottom had been squished to one side with strange-looking bullet points. In the meeting I aimed to address these three questions. For the first, I was able to get a straightforward answer, unbeknownst to me at the time I had applied white border styling under the navigation menu and forgotten about it. It was the second issue, however, which stumped both me and Sam. After much trial, error, and deliberation Sam concluded that the issue was that the margins of the button were not being properly recognized because it was being treated as a block-level element within its parent class. Unsurprisingly then, the solution was to change the play button to an inline-block element and change the alignment of all elements in the parent class. The third issue was remedied with a very simple solution as well. The bullet points were a result of CSS default styling which I quickly removed, and the images could be sized appropriately by changing the object-fit parameter, in this case to contain, and assigning a maximum height to the images. Sam’s guidance on troubleshooting code was incredibly useful. He had one main piece of advice, which is to pick an approach when it comes to CSS and stick with it, for example, always changing the margin of the child object when you wish to create a larger border rather than the padding of the parent. By sticking to one approach, one can quickly diagnose problems rather than having to unravel their own code. To end the meeting Sam gave me two tasks, the first was to create a site map for the website I will be creating to demonstrate the skills I learned over the course of this project, so I can begin learning the skills necessary to create it, and to learn about a new method to remove the headache of positioning objects in CSS called Flexbox. A long with finishing the FreeCodeCamp.org tutorial this is what I will be updating you on in the next blog post.

So far communicating with my mentor has gone very well. What has worked particularly well is the structure of our meetings. At the beginning of the meeting, I express my objectives for the session, and most of our time is spent on these. Sam answers my questions and elaborates on subjects when I ask him to. In the final quarter or so of our meetings I ask Sam for some “homework” for the next two weeks, this week it was understanding Flexbox and creating a site map, and to end he sends me some resources which I can use to learn the topic. Generally, we make very few assumptions in our meetings. Because of the nature of my project, Sam can look at my code any time I ask a question to address the problem directly and view any changes I make in real-time by looking at the site using screen-share. So far, I have not been held entirely accountable for the work I do between sessions, but as the work I have been assigned get’s more specific I assume that will change. On the other hand, Sam has been fantastic at answering ay questions I have and allowing me to guide the project, but in case not everything can be covered in a meeting, I am free to send him an email when a problem arises. Sometimes in our meetings it can be difficult for me to follow what Sam is saying, because of this I can drift off and pay less attention. Unfortunately, I am not listening all the time during some long explanations. Fortunately, this is not an issue on both sides, as I’ve already mentioned multiple times Sam is a keen listener and has all the experience necessary to address my questions and concerns.

To view my project, download the “LCDream Website” folder from this link: Blog Post 3

And run the index.html file in your browser of choice, here you can also watch a recording of my most recent meeting.

In-Depth Blog Post 2

Welcome to the second blog post relating to the In-Depth project. Today I will be covering my progress so far. In the days since the first meeting I had with my mentor, I coded a simple website following this video from FreeCodeCamp.org: https://www.youtube.com/watch?v=kMT54MPz9oE&t=1739s

Through this video, I was able to code a basic website which can be found in the HTML5 file attached. In this project I implemented these basic HTML5 tags:

<ul> this tag describes unordered lists

<head> this tag encompasses metadata for the entirety of the website

<header> this tag is a website header

<footer> this tag is a website footer

<hr> this is a line

<br> this tag is for spacing

<li> this tag is for list items

<span> this tag is for inline elements (more on that later)

<div> is for block-level elements

<a> this tag is for links

<h1,h2,h3> these tags are for headings

<button> this tag is the pre-set styling for a button

After presenting the HTML5 code to my mentor we began to discuss CSS. My mentor Sam Coll has been working in web development for the entirety of his professional career and began explaining CSS with a high degree of fluency. Here I can summarize what I learned about CSS. CSS or Cascading Style Sheets is a coding language devoted exclusively to styling HTML5 elements. CSS works by targeting HTML5 elements themselves or “classes” and “ids” of HTML5 elements which can be set. A “class” is an attribute that can be added to various HTML5 elements so every element of the “class” can be styled when targeted in CSS. An “id”, on the other hand, is a way to target a specific element on the page. “Ids” are designed to be used only once whereas “classes” are designed to be reused. The “cascading” part of CSS refers to how the hierarchy of targeting HTML5 tags, “classes”, and “ids”. Targeting HTML5 “classes” are lowest on this hierarchy and can be overwritten by targeting any “classes” assigned to this type of tag. “Ids” supersede anything targeted by code styling a “class”. Finally, we briefly discussed the box model. Everything in CSS and HTML5 is styled using the box model. Around each block-level element is three boxes, first, there is the box that houses the element itself, then a box of padding around it and then finally a margin around that padding. By using CSS, we can change the height and width of each of these boxes but by default, each block-level HTML5 element takes up the entirety of the screen. Once we scale each of these boxes down to a size where two different box level elements can exist on the same line then they will be displayed as such.

 

So far, the workflow I have developed with my mentor is very effective. He introduces overarching concepts then I do the work on my own. Finally, we review my code and discuss the next concept in the timeline. This is especially helpful because my mentor has little to no experience teaching but has been around HTML5 and CSS for a very long time. This allows him to provide feedback into my code and lecture on large ideas without pushing him to teach my individual concepts which I can learn on my own. I am very excited to get started with CSS and continue my project.

 

Here is a link to my HTML file: https://sd43bcca-my.sharepoint.com/:f:/g/personal/125-dlongley_sd43_bc_ca/EjsOo4KVJnZEuNYydgWwKGwBUL9TimP3UlAkuHz5bXUieg?e=MsWmdy

 

2022 In-Depth Blog Post #1

Welcome to the first blog post to kick off another year of the In-Depth project. In this blog post, I will be outlining my project, the skill I chose, and give a brief introduction to my mentor. For this year’s project, I chose to learn front-end web development in HTML5 and CSS. The end goal of my project is to code a simple blog that showcases the skills I learned through the In-Depth project this year. Additionally, I’d like to use the skills I have acquired to create a small landing page where I can host links to the accounts of my various music projects. Not only will I be learning how to code in HTML5 and CSS I will also be learning about web design principles and modern web design elements. I chose to learn front-end web development for my project this year for my In-Depth project because I have been unsatisfied with the lack of personalization in free website hosting options. I have also wanted to learn how to code for a very long time but have always been intimidated by the tools present in more abstract languages such as JavaScript or Python. As my mentor reinforced, HTML5 and CSS are much more like tools than a typical coding language. HTML5 has functions that are easy to use because it is for a specific use case, laying out text and images. On the other hand, the more intimidating coding languages I mentioned are significantly more versatile but much based much more on math rather than text. Finally, let’s move on to my mentor. Sam Coll is a web developer for the company Precision Nutrition. Sam’s work has been focused on the website https://www.precisionnutrition.com but he has also done work on hobby projects such as his band’s website. I was fortunate enough to have a brief meeting with Sam earlier this week in which we discussed the basics of HTML5 such as tags and blocks. At the bottom of this blog post is a link where you can find a recording of this meeting. Sam and I meet again in the second week of February and until then I am going to start learning some of the fundamentals of HTML5 through a variety of coding boot camps such as the Visual Studio Code HTML5 and CSS boot camp. I am also going to start learning how to use Visual Studio and Code pen to write my code. I am very excited to start learning how to code in HTML5 and CSS and have had a great experience with my mentor so far. I will be back with another post in two weeks where I will detail the progress I have made thus far and the next meeting with my mentor.

 

https://drive.google.com/file/d/14Tr5T04y7R8cK2ruBVja0AR-SD6Vym9A/view?usp=sharing

Developing the Leaders Around You: Three Nuggets of Wisdom

The first important point that stood out to me in Developing the Leaders Around You comes from the first session. Here John C. Maxwell states the law of explosive growth taken from his previous book The 21 Irrefutable Laws of Leadership. The law of explosive growth is as follows: “To add Growth, Lead Followers… To multiply, Lead Leaders.” (Maxwell 2). This simple statement describes how an organization’s potential can grow when those who are being mentored are taught to teach. Someone incredible at following instructions can never match someone capable of taking ideas and introducing them to others. In T.A.L.O.N.S. we follow the law of explosive growth all the time. The premise of the mentor-mentee relationship between grade ten and nine students is a perfect example. Grade ten students lead, instruct, and delegate tasks with an emphasis on providing opportunities to contribute. This way, grade nine students can do the same next year. Over the course of a year, we transform grade nine students from followers into leaders doubling the number that we started with. As reproducers, grade ten students need to make this succession a top priority and work to equip those they lead for success. After all, a program with this structure falls apart when grade nine students are left to their own devices when grade ten comes. The law of explosive growth describes a simple but highly effective method. Turning producers into reproducers allows for any organization to multiply not just its production output, but its output of highly successful and well-equipped members.

Second of the points that stood out to me from Developing the Leaders Around You comes from the beginning of section three. The first step of “The Five-Step Process for Turning Producers into Reproducers” (Maxwell 15) is a simple statement: I Model. Here Maxwell relays the effects of modelling on developing leaders with standout observations such as “people do what people see” (15) and my personal favourite “it is easier to teach than to do what is right” (15). These points explain the route of many leadership problems. No matter what you say, when developing the leaders around you they will follow your actions first and foremost. People break speed limits, cut in lines, and litter all because they see other people doing the same and not facing consequences. In leadership the effects of this are obvious. It is difficult to trust someone who does not practice what they preach. If a developing leader does not trust their mentor, they are less likely to follow instructions and won’t get everything out of their experiences. Additionally, “we remember 90% of what we hear, see, say, and do” (Maxwell 15). If we don’t see leadership being modelled, we are less likely to remember it. In T.A.L.O.N.S. we can clearly see the effects of this principle. Grade nine students who work with a mentor who does nothing but give instructions will not only be less motivated to follow them but is also more likely to do the same in their second year. The power of modelling is underestimated far too often. As leaders and as mentors we must demonstrate the behaviour and practices we wish to see or risk the next generation of unprepared leaders.

The final nugget of wisdom I would like to discuss comes from session 4. Here Maxwell lists five points of what potential leaders need that were originally written by his friend Tim Elmore. The point I would like to focus on is number 3, Road Maps. “All good mentors furnish direction for life. These “compasses” or “roadmaps” provide options on how to best get to their destinations.” (Elmore 23). Simply put potential leaders require a defined path to their success provided by their mentors to reach their full potential. In T.A.L.O.N.S. I feel that this idea is often overlooked. Often, groups are stunned by the enormity of tasks, don’t develop a concrete plan, and end up grappling with unforeseen challenges. This results in mentees that are lost and confused. Speaking from personal experience, when I was working on the online performances leadership project, I often felt that I didn’t understand the direction that the group was travelling in, rather I was simply following instructions as new issues came up. As a result, this became my least favourite part of leadership in my grade nine year. To prevent this from occurring in the future, we must spend more time developing an attainable roadmap to not only accomplish the task at hand but also ensure that those we mentor leave with new and applicable knowledge.

 

Works Cited

Maxwell, John C. Developing the Leaders around You Workbook : How to Help Others Reach Their Full Potential. Nashville, T. Nelson, 2003.