Its 7:45 in the AM, EST. In 3 hours, my first Sprint Challenge will happen, and I’m a little nervous. If I make it through the Challenge, then I’ll have successfully completed my first week at Lambda School.

So, a Sprint Challenge is a timed project that we have to complete in order to validate that we’ve understood the concepts that were taught during the week. Its 3 hours long and we’re not allowed to communicate with other students or our instructors, team leads, and so on for help. We are allowed to reference our notes, projects, Lambda material and even the whole internet and any other resources we have available (like books – remember those? I do, my wife’s a librarian.).

Ok, so regarding the week… I’m slow. I haven’t checked strongly against the other people in my team (I think cohort means the entire group of 100+ of us, so I’ll refer to the smaller group I’m in as my team) but I’m fairly certain that I’m the slowest of the bunch. I haven’t completed any of the daily projects on the day that they were assigned. They tend to take me 2 days. I think others (or maybe even everyone else) are completing them in a matter of hours and submitting them. I also don’t remember terminology for everything that we’ve learned. I get concepts, but the specific words used to define these concepts have eluded me every time I’ve had a 1-on-1 Zoom session with Reed, our team lead. I think that’s just because this is all new to me, and I hope I’m not just too thick to remember basic terminology.

I’ve learned a lot though. I know some semantic HTML, some CSS (including Flexbox, which I really like) and I know enough to know that I don’t know git very well. Here are some thoughts about the week:

I went over my Day 1 experience in this post, so we’ll move on to the following day:

• Lambda School: Full Stack – Week 1, Day 1

Day 2

The 2nd day of class introduced us to the Box Model and to CSS. The box model is a concept that describes how elements on a web page are individually laid out. In a nutshell, every element (block of text, picture, etc.) on a web page is hung like a picture frame. The actual content is called “content” and is essentially in the middle of a box. This is the text we read or the images that we look at. Surrounding that is a field of white space called padding. This very much resembles the white backing a picture is placed on when its framed. A lot of the time, some of that background material can be seen around the edges of the picture, surrounding it. Padding can be manipulated – its color can be changed and it can be thickened or thinned, essentially giving the content more or less space to itself inside of the “box”.

A border frames the padding and is essentially the picture frame of the image. In real life, these can be simple lines of plastic, metal or wood or they can be ornate and rival, contrast or accentuate the picture that they’re holding in containment. On a computer, something similar is possible – margins can be styled to take on many different appearances, from solid lines to dashed or dotted lines, double-lines and more. Their thickness and color can be modified, and there are probably other ways to manipulate their appearance that I haven’t learned yet.

Finally, we have the margin. Margins are similar to the lines on the left and right side of notebook paper. We’re not supposed to write in that space, normally. It’s used to visually push away from the edges of the paper so we can really focus our attention on what’s in-between. Its like white space. Margins, on a web page, are invisible. They have no color, only space. They act as buffers against other elements on a page – kind of like personal space. Like padding, their size can be increased or decreased, but we don’t actually see margins, we only see the border (if visible) and content inside of them, and the other elements (or space) around them. Its like air – we know its present, and we can discern its effects, but we don’t actually see it.

We spent some time on Day 2 manipulating the box model around text. We saw how a basic html element, like a <div> could have its appearance altered by changing properties of the box, like changing its background color (and the text color of the content, but that’s technically not part of the “box”) and manipulating the content area’s space by specific pixel sizes. We adjusted the height and width of padding and the margin and manipulated the border’s width, style and color.

There were programming challenges we had to complete, like creating 4 boxes using html and changing their appearance and seeing how they interacted with each other. We then moved on to basic CSS.

CSS

With some basic html under our belts, we began to explore how to manipulate the appearance and behavior of page elements using CSS, or Cascading Style Sheets. We looked at the display: property, which comes with a suite of options that can be used to style elements on a web page. Some of the more simple options we tried were none, inline, block and inline-block.

We also learned what a CSS Reset is. Its basically a set of CSS style properties that remove the default styling from a web browser. This is done because different browsers (Chrome, Safari, Edge, IE, Firefox, etc.) render web pages a little differently because they’re set up to automatically apply styles to web pages in ways specific to the given browser. A CSS reset clears away this browser-supplied styling so that web pages rely only on the styling that was provided with the page. This helps to ensure that pages look and behave the same across different browsers.

There are different CSS resets available online. The one that we used in our projects is an open-source reset from Eric Meyer. I think most resets are open-source and publicly available. Some companies have specific, proprietary resets that they use in-house.

An alternative to CSS resets that’s widely used is called Normalize. Normalize corrects cross-browser issues to make them behave similarly and allows a programmer to add his/her own styles. During Day 2, we looked at a web page, then applied Meyer’s reset to it and noted the differences, and the normalized it and contrasted the changes with both the base render and the reset. We’ve since been using Meyer’s reset in all of our projects this week. Its freely-available on the web to all who want to use it, as are others.

Project

At the end of each day, we have a project that needs to be worked on. It should be completed after the morning lecture (and lunch) and submitted by the end of the day using git, but we can keep working on it afterward if desired (which I’ve been doing, because I’m slow and haven’t completed any project in the given time frame yet).

The 2nd day’s project was to build a web page using a design file that was given to us. The design file was a jpg of a web page. We were given html and a CSS page with reset code at the top of it. We were tasked to use inline-block layout techniques and the box model (content, padding, margin, border) to layout the page, and any CSS that we wanted – except we couldn’t use modules like Flexbox, which we’d explore on Day 3.

If we were able to complete the project quickly, there were additional stretch goals that we could attempt:

• Give the navigation a background color and have it fixed to the top of the page so it scrolls with the user
• Introduce a new font family from Google fonts
• Build a new page based off of a navigation item – lay it out using the box model and display: inline-block, like we did with the first page
• Change all the image tags into background images
• Research CSS animations and implement ideas when hovering over buttons or navigation items

I didn’t do any of the stretch goals. I didn’t actually successfully complete the first project. I did enough that I was able to demonstrate understanding of the material, but inline-block is tedious to work with and I’m slow. Apparently, part of the reason we were forced to use it was to contrast with the upcoming Flexbox CSS that we’d learn on Day 3. It was also to help us learn how CSS runs “under the hood”.

I can’t go into detail, but every day of the week there were video tutorials that we watched, articles were linked in the training kit for us to read and we had our 2-hour live Zoom lecture at the beginning of class. During the day, we were able to use Slack to speak with other students in our team or the general cohort for help – this included team leads, student leads and available teachers. I didn’t do a lot of this, but I read through a bit of what others were posting, which was helpful.

Sometime in the afternoon, our TL checked in with us via Zoom to see how we were doing, and at the end of the day, we had a Zoom meeting with our team and went over the day’s experience. Over the past few days, this led to extended Zoom sessions to clarify topics with our TL. Some students Zoomed with each other, to work together and even to do pair programming. Its a very supportive environment.

I’ve had some technical issues over the week. The camera on my desktop has been crashing the computer, causing the infamous Blue Screen of Death (BSOD). Its happened 4 times over the past 3 days. Over the weekend, I’m going to try to find an alternative to using it. I couldn’t find updated drivers for the camera, and when I “updated” the video card drivers, it actually reverted to an older version.

Ok… I’m going to shower and review material to prep for today’s Sprint Challenge. Oh, and I joined Twitter earlier this week – mainly to see Lambda stuff and occasionally post about this blog. I replied to someone’s tweet about being 43 and feeling like he was too old to apply to Lambda, and Austin Allred, the CEO and founder of Lambda, liked my tweet! It was my first like! ;)