Looking back at the last 8 weeks of camp!

Idominikbrame
4 min readFeb 15, 2021
Photo by Sigmund on Unsplash

Think back on your first day of class. How did you think websites were built? Now how do you think they’re built? What’s the difference in your thinking?

Back on my first day I had a basic understanding of how the web was built from a skeletal perspective, but now realizing how much work goes in to positioning elements, connecting event listeners and DOM manipulation, my scope of what was going on was very limited. Also, when I first started, I never planned my projects, I just dove in to them. Now more and more I think about each element and how they will align both positionally and logically with the rest of my project.

What kinds of projects do you see yourself working on in 10 months?

In ten months I see my personal projects being far more useful and user friendly. At the moment, I’m making a notes app from scratch that can be stored locally in storage. In 10 months I see this same exact project being scaled to work from the backend and using a database with API’s and more. I also plan to be working with a non-profit and developing any type of project that will benefit the specific group of people that organization is targeting. By then I’d like to have a full time position and continuing to build my skills in this craft.

Why is it generally a good idea to position CSS <link>s between <head></head> and JS <script>s just before </body>? Do you know of any exceptions?

Generally your main style page should be positioned between the head because you’d like the CSS to be loaded with the body of the page. If your stylesheet isn’t linked beforehand the browser won’t load your style with the html. There are certain exception that I know of at the moment, for instance if you’re using a CSS library like SASS that is loaded with Javascript. When it comes to Javascript, depending on what attribute you apply to the script tag. There are a few that I can think of that change the way the Javascript is loaded within the page:

Defer — Here the file gets downloaded asynchronously, but executed only when the document parsing is completed.

ASYNC —With async, the file gets downloaded asynchronously and then executed as soon as it’s downloaded.

-DigitalOcean.com

Either one of these could change the placement of your script tag to the after the </body> depending on the necessity of the project.

What’s the difference between the :nth-of-type() and :nth-child() selectors?

In layman’s term the main difference is that one is selecting the a certain child element based on order and the other is selecting a certain child element based on the order in which it presents itself with element of the same likeness. For instance with the below code will do the exact same thing because the only element within the section are <p> </p> tags.

<section> 
<p>Little</p>
<p>Piggy</p> <! — Want this one →
</section>
p:nth-child(2) { color: red; }
p:nth-of-type(2) { color: red; }

On the other hand, if the code presented looked like this:

<section> 
<h1>Words</h1>
<p>Little</p>
<p>Piggy</p> <! — Want this one →
</section>

the style code would have to look like this:

p:nth-of-type(2) { color: red; }

The reason being is that the :nth-child(2) would now select not just the second p: element but also the second child element of the <section></section> tag. All in all, they both have their pros and cons it just depends on the structure of your ode.

Visit the above website for reference!

What is CSS-selector specificity, and how does it work?

The CSS-Selector specificity lets the browser know which style it should implement in the webpage. Although CSS is cascaded, there is still a hierarchy. The hierarchy goes as follows:

Inline styles — An inline style is attached directly to the element to be styled. Example: <h1 style=”color: #ffffff;”>.

IDs — An ID is a unique identifier for the page elements, such as #navbar.

Classes, attributes and pseudo-classes — This category includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.

Elements and pseudo-elements — This category includes element names and pseudo-elements, such as h1, div, :before and :after.

What resources do you use to learn about the latest in front-end development and design?

I use Reddit and podcasts. I do need to do a better job finding positive resources to keep me on top of current trends, but definitely have my hands full learning core concepts at the time being

--

--