/Frontend/Basics/Languages

JavaScript (JS)

JavaScript is an essential language in web development, widely used for its versatility and supported by a large community. Learning it involves practical experience and looking up specific tasks until you become familiar. Many developers, including myself, grasped JavaScript in a few days by working on projects with no prior knowledge.

Clarification

You'll see javascript being used in just about any and evey website since it was originally built to add website functionality. But keep in mind, nowadays javascript is a LOT more expansive and used in a lot of backends because of it's ease of use. Meaning eventually you'll also learn it's related topics such as Node, NPM (Node Package Manager), Typescript, etc. for full stack development with JS. Don't be worried though, after using the language some, everything get's pretty easy.

Part 1 - The Language

Since HTML and CSS aren't actual programming languages, JS is going to be a little different. It has actual functions, variables, loops, etc. and since it's built to work with websites in the browser it also has some features that normal languages don't have. So you should first get at least a little familiar with programming language concepts/fundamentals if you don't know them already - Vid below.

• Main Concepts to Know: Variables, Data types, Arrays (aka lists), Conditions & Statements (if, else if), Functions, Loops

📚 Prelim: 100+ Computer Science Concepts Explained - Fireship 🔥

• Keep in mind this video has A LOT of information on more than just frontend, it also covers computer science as a whole and some backend towards the end. This is just so you can understand how most concepts work if you don't already
• Also here's a more written guide on coding fundamentals if you want a non-video format instead: here

Now with those general concepts in mind, let's go more into the syntax of javascript specifically & using it as a normal language (It's fine if not all of this information is completely retained as you can come back to it or look it up later as you're writing code)

🏃‍♂️ Fast: 100+ JavaScript Concepts you Need to Know - Fireship 🔥

• Throughout the video pay attention to syntax because he's writing working code so you know what it looks like
• Also the "this" section can be pretty confusing so try not to get too worried (you'll see what I'm talking about)
• He goes beyond basic concepts also and talks about Typescript, Node, and NPM. You don't have to worry about that too much right now

🐢 Slower: JavaScript Tutorial for Beginners - 🧱 Mosh

• Now I don't think this entire long video is necessary as like I said JS is mostly learned just by using it, but if you want more detail that you can follow along with, that's a good slower paced video

Part 2 - The DOM

So like said in the Part 1 Intro section, Javascript does have some special features that other languages don't have since it can be used for manipulating web pages. That's a completely separate side of Javascript that's very important to know for building websites especially when using just HTML, CSS, and JS. This is mostly referred to as DOM Manipulation (when JS is used to change an HTML document or it's styles)

• This section doesn't have any fast/slower separation, it's all pretty important and not too long.

❓ The DOM in 4 minutes - Aaron Jack ⚡

👉 Learn DOM Manipulation In 18 Minutes - Web Dev Simplified

• You can follow along with Web Dev Simplified as his code and site are side-by-side (Highly Suggested)

Big Challenge ❗❗

Personal Portfolio / Rèsumè Website

• Using all 3: HTML, CSS, and JavaScript, pull out your VSCode and build yourself a personal portfolio website
• These websites are sometimes described as an online rèsumè to showcase your skills and such in a nicer manner than just a boring PDF. It should include:
  
  
  • A landing Hero/splash screen
  • A more detailed "About Me" section
  • A "Projects" section (If you don't have anything to display in here off the top of your head, why not showoff your 2 other mini projects you made in the HTML and CSS sections?)
  • A "Skills" section (hard and/or soft skills)
  • And a "Contact" section with Email, Instagram, Github, Etc. (Up to you) - This can also be reserved as a footer for your page(s)
• Use Javascript to make each section fade in/animate in place when the user scrolls into view of each element (or upon arrival of each page) to add some fanciness and moving parts

• Get creative with how you present certain sections like you projects can be shown off via a grid of cards for example
• Make sure to add images and unique graphics here and there as they're usually what makes a portfolio site pop out from the others.
• Each section can either be in a single page with each section taking up at least the entire screen in height, or you can get creative with separating the sections into different pages and adding navigation
• You don't technically have to put serious info in this page if you'd rather make a jokey portfolio, but these are good to have and you'll see them everywhere because people usually use them to showoff for employers
• If you are taking this seriously to put on the web for others to see, make sure it has a nice background color with a legible text color as well and nice fonts/ element spacing.

If you want some help or want to see some good examples of other peoples portfolios that are capable of being made with what you know, here are some:

• Greg Chen - Product Designer - This one's really nice without an extravigant splash page although it jumps straight into his works (projects) below with interesting animations for details that link to the source of each project. It also only has 2 pages yet is still really nice and informative (My personal favorite out of this bunch)
• Dalya Baron - Astrophysics Grad Student - This site's Pretty simple with unique wording for each section and a LOT of info about her, also different pages for each section
• Lauren Hom - Designer - The Hero/Splash for this page is really nice with a pretty common yet still aethetically pleasing navigation bar at the top
• Muriel Vega - Culture Writer - Pretty minimal and has different pages for each section too

Note: notice how all of these portfolios are a little different in some way. Don't worry about conforming to a website standard - since it's YOUR portfolio you can get as unique as you want with design and placement of certain things.

Hint: Scroll Animations

I wanted to make sure you incorperate Javascript to this website and what better of a way than to add some nice animations right?! That part is pretty tricky though without some help of other resources & knowledge. Because of that, you can use this epic fireship video that goes through scroll animations and how to implement them pretty easily. You can also use these fancy scroll animations in other websites you might make since they're great for presentation.

Recap 🔄 & Cooldown 😌

Well hey, guess what everyone... You now have 3 of your very own web development based projects showcasing the progress you've made as you learned AND one of them is a portfolio which you can show off to your friends and put in your actual rèsumè for employers to check out.

• Contact me if you need help deploying your website, as of right now I haven't made a guide on how to do this with github

Now that you've spent all that time practicing and learning the 3 most foundational languages for frontend web development (and backend if we're just talking about JS), I think it's time to chill with yet another Fireship video, but this time it'll be one of his meme videos as opposed to his more serious ... in 100 Seconds videos (:

JavaScript for the Haters - Fireship 🔥