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.