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