Week 0

So much new information, so many Chrome bookmarks.

Claire Sheek
4 min readJul 13, 2020
Coding books sit on a shelf next to a tiny potted cactus.
Photo by Greg Rakozy on Unsplash

We haven’t even had our first day of class yet and I’ve already learned so much. Key learning this week: Google is going to be my new best friend.

1| ”What excites you about coding? How do you think it can change the world?”
The fact that I can think of something, a real life problem, and actually code a solution into existence is absolutely mind-blowing. With that in mind the sky’s the limit! Software development has obviously made a huge impact on our day-to-day lives and within particular industries, but I think there’s a lot that can be done still for less tech-related fields. I come from the dance industry and I can already think of several apps that could improve the lives of dancers and studio owners. I would love to see how I can give back to my roots through coding!

2| “What does doctype do at the top of your html file? Why does this need to be specified?”
doctype is how we communicate to the system which html version we’re writing in so it knows how to interpret it. Thankfully we’re up to HTML5 now and it has a simple doctype with no corresponding document type reference (DTD) - I’m sure I’ll have to know how that all works at some point, but right now my brain is full and it looks daunting!

3| “Explain how a browser determines what HTML elements match a CSS selector?”
Browsers match HTML elements to CSS selectors by searching through style sheets in accordance to order of inheritance and the cascade.

4| “What’s the difference between an HTML element and and HTML tag?”
This was the hardest question to answer.. I wrote and rewrote it so many times and decided to share my favorite answer I found instead. I think they did a good job explaining it and it helped me to understand:
“The browser parses the fetched CSS, and sorts the different rules by their selector types, e.g. element, class, ID, and so on. Based on the selectors it finds, it works out which rules should be applied to which nodes in the DOM, and attaches style to them as required (this intermediate step is called a render tree)”
It’s important to note that when reading CSS the browser follows cascading order, inheritance, and also reads from right to left.

5| “In your own words, explain the cascade of CSS”
Reading down or “cascading” from top to bottom, the last thing you read will be what you see. I think about it like painting a picture. Maybe you start out by painting the whole canvas blue, then you add a box of green that will be the grass, maybe another box for a house, and you paint the whole house yellow! Well now you’ve decided you want the roof to be white instead of yellow, so you paint it white! And you decide one corner of the sky is orange now because you want a sunset. The yellow house is still there, but you painted over the roof with white; now we see a white roof even though we originally said the whole house is yellow. We may have left the sky blue but then we painted an orange sunset, so now we see orange. The last layer is what you see.

6| “Explain, to someone you know, the 3 ways to link/use CSS in an HTML file to style a web page.”
Not sure if we were supposed to actually do this or just write down an example of how we would.. I actually explained it to a friend on the phone but, I’ll write it out just in case!
First you should know that CSS and styling are what we use to make a webpage look a certain way. There are 3 different ways to link CSS to our HTML (or to bring the web page to life with styling):

1. Inline CSS: Applies a unique style to a single element.

2. Internal CSS: Gives you the ability to apply style within a single page by using a <style></style> tag in the head section of your HTML document.

3. External CSS: Allows you to change the style across multiple pages by linking an external “style sheet” to any of your HTML documents.

I believe External CSS is the best option because it can be used to created a uniform look across an entire website and stores all of your CSS in one place, making it easier to maintain and adjust.

Until next time!

@AustinCodingAcademy

--

--