Hello!

Welcome to Web Development!

About me:

Hi! I'm Marina, and I'm excited to get to know everyone in 154 this quarter, regardless of whether or not you're in my section. I adored this class when I took it, and I adore it even more now that I TA for it. I hope you all can get as much out of it as I have :-)

More stuff:

I have a beautiful, wonderful, lovely cat named Caravaggio. He is a little older than a year.

My favorite show is the X Files. I wish more of my friends were as obsessed with it as I am :-(

I love learning about art + art history, my favorite artists are Alphonse Osbert and Kuindzhi

I used to draw and paint a lot, but I haven't had as much time in university

How to succeed in 154:

Work with what you know

To get the most out of what you learn in this class, take what you learn and start working on your own projects. Even if an idea seems too hard to implement, you might be surprised once you start working on it.

Read the spec AND the code quality guide

There's a lot to read, I know, but sometimes issues in your code can be easily clarified by looking in the code quality guide or spec. If you're not sure about how to implement something, see if you can get some hints from there.

Engage!

If you have any questions, post on the discussion board or even better come to office hours and ask about it. Me and the other TAs will be more than happy to help you with any of your web programming related questions :-)

Useful/fun links

General/Misc

VS Code Youtube Channel - VS Code posts some really nice videos about extensions, cool javascript features, etc.
Fireship - Fireship posts videos about software development in general but they have some really nice ones about web dev too!
CSS Gradient Generator - Generates a CSS gradient and all you have to do is copy-paste
Color Palette Generator - Generates a random color palette
iconmonstr - A library of flat icons
Lottiefiles - Cool animations for your website
Undraw - An open-source svg illustration libary (and you can change the colors so it fits your website!)
Meta Tag Generator - Though we don't go into depth about meta tags, they can still elavate the look and feel of your website, and this can make it faster to write them

VS Code extensions

Lorem ipsum - VS Code extension that makes it easier to generate lorem text
Auto rename tag - Updates closing tags as you change the opening ones
Turbo console.log - Makes it way faster and easier to console.log a variable.

Node Packages

Http-server - If for whatever reason you need to host your files on a static http server, but don't want to set up the directory structure and npm init as we teach in this course, this tool makes that simpler
UglifyJS - "uglifies" your js code by removing spaces and line breaks.