I’ve Cracked The Code, Please Call Tech Support- Episode 7, The Form Awakens
The first course of my Full Stack Development training is now complete! Or will be officially come Sunday night. It has been a sprint, but I feel incredibly accomplished so far. I went from knowing nothing to programming competent, functional, responsive websites. I’m genuinely proud of that.
- Think back to 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?
On the first day of class I knew next to nothing about how websites were built. I could figure out parts and pieces, but not how to put those pieces in any kind of cohesive whole. Now I understand the planning process, the coding process, how to get started on the HTML before we style with the CSS and make it fancy with the JavaScript. Overall I feel far more comfortable with every part of the process.
2. What have you gained through this course beyond code? Beyond technical savvy?
I’ve been struggling with perfectionism my entire life. This class has, a few times, mentioned the idea of “Don’t let Perfect be the enemy of Good.” This is a mantra that I’ve started to tell myself, to let me be a bit looser with the way I code, and it has paid off tremendously. My work is better, and far more functional when I just let it work within it’s own rules, rather than trying to enforce all of my own. It’s been a very helpful growing process.
3. Where do you think you’re headed? Why? How? What are you going to do to encourage that?
I want to work for one of the large tech firms here in Austin, be it Google, or another. I plan on doing that by continuing to work hard and complete this course, then continue to build things and keep growing as a dev. Interviewing is a necessary step, and by remaining engaged in the industry I have a much better set of tools to provide.
4. What kinds of projects do you see yourself working on in 10 months?
Well, I already like building sites for people, and learning more about responsive design, so I definitely see myself doing front-end work. My idea for the Capstone for my class is going to have a gaming aspect, so I see myself diving further into game design as well, learning the in and outs of what makes them fun and effective.
5. Why is it generally a good idea to position CSS links between <head></head> and JS <script>s just before body? Do you know of any acceptions?
This is generally a good idea as a site is read by a computer from top to bottom. If it has the rules in place right at the top (like the CSS and JavaScript), it can render these more effectively. There are exceptions, JavaScript often being a big one.
JavaScript loads FAST, and if a JS rule is read by the computer, all of the other required information may not have loaded yet. So, it ignores the JavaScript. Which is frustrating. By placing the JS lower on the page, towards the bottom, this ensures that all of the needed information has been loaded first.
6. Consider HTML5 as an open web platform. What are the building blocks of HTML5?
The building blocks of HTML start with the DOM, our Document Object Model, which hold everything that we are going to work on. The smaller blocks are the elements themselves: our body, the header, the main, asides, the footer, paragraphs, a tags links, and so on. Using these pieces, you can build anything.
7. What’s the difference between the :nth-of-type() and the :nth-child() selectors?
This one can be a bit tricky to explain, and if you’re interested I highly recommend this write up by Chris Coyier on CSS-Tricks.com: https://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/.
Basically, these functions serve similar purposes, and go about them in different ways. Let’s say you have your HTML document, and you’ve got paragraphs in that document. They are just all over the place, and you would like to target particular ones with your functions to make them, say, change color.
With :nth-child(), you can look through all of the nested, child nodes of your document to find a match. Like, if you have a <section> that contains two paragraph nodes (which would be children of the section), :nth-child can be used to find them based on the number of paragraphs.
With :nth-of-type, this goes through the entire document, rather than just the child elements. This allows you to be both more and less specific with your search criteria, and overall I feel it is more effective.
8. What is CSS-selector specificity, and how does it work?
CSS selector specificity is a very handy rule to remember when styling your web pages. CSS stands for “Cascading Style Sheets”, and the cascade works by applying rules beginning with the most general, down to the most specific, with the specific winning out in the end as it is applied last.
If all rules have equal hierarchy, the last rule the computer reads wins. However, as we just discussed, there is a hierarchy to consider. For instance, if a specific class has been applied to an element, and both the element and the class have conflicting rules, the class rules will win out, as the class name is more specific than just saying the element.
9. What resources do you use to learn about the latest in front-end development and design?
There are a few different resources that I like to check in order to stay informed. YouTube has a ton of great content, including CharliMarieTV, Layout Land, Travery Media, and Arcademind are all great choices.
On top of that, a lot of my knowledge comes down to Googling. Honestly. If there is a problem that I have a tough time solving in code, I look it up, find a solution, and I try to circle back around and research if there is an easier way to fix it later, with an update or what have you. It’s a very handy way to keep up to date on particulars in the industry.
