Let's do 100 Front End Interview Questions (Part 1, HTML)

what's up guys so in this video we're going to go through the front-end interview handbook which is a super amazing resource when you're applying for front-end jobs all right and whether you're new to front-end or whether you have an interview tomorrow i think you're going to get a lot out of this video because i've been a front end full stack developer for four years and we're just gonna go this guy through this guy together i'm gonna kind of walk you through it and you i think you're just gonna pick up a lot of potential interview questions that you can kind of be ready for in the future so with that said let's just get right into it right now and this is actually going to be potentially a multi-part video because this guide is really long so we're going to start with the html section then if the first video does okay if it gets like a reasonable amount of views and likes then i will make part two css and then we'll do the javascript questions so here we go we're here on github here's all the info shout out to yangshun for putting this together and he's probably helped thousands like 30 000 stars right here it's probably helped thousands of people get jobs with this thing and the no answers that well that's kind of my style so let's scroll down let's get into it and start reading through so the point of this guide first of all is that front-end job interviews have less emphasis on algorithms and have more questions on intricate knowledge and expertise out about the domain what does that mean well it means more that you can actually build stuff than memorize a bunch of random kind of logical questions so anyone who tells you you need a lot of algorithms for a front-end job that's true to an extent at the biggest tech companies google facebook uber but anywhere larger it's going to be more pragmatic more practical so you know if you had to choose between reading this guide and just building stuff versus mastering algorithms your time is going to be a lot better spent in the former and a lot of people forget that and they just get too caught up in the pure study mode where at the end of the day you know a lot of these interviews are just gonna ask you to build something so definitely be ready for that if you're going into a front-end interview with that said though it's also gonna be fair game for them to ask you some trivia style questions and that's why we're here so this video like i said html questions let's get right into it we're wasting too much time already and i just clicked on the html questions link so let's start out with the first one i'm going to try to keep things short and keep things moving so doctype you're going to see this at the top of your html files long story short what this does is it indicates to the browser that this file is html5 and should be read and displayed as such so usually the browser can detect this on its own but this is just kind of a thing that says hey this is for sure html5 should follow the html5 rules in terms of how it's being rendered so very important there and it's also going to give you some errors in the console if you're right breaking html rules for example div can't be inside of a button so basically it gives you tighter controls as well moving down the page here we have two questions on multilingual languages and sites we are going to skip those because that's more of a niche topic depends what company you're interviewing for but long story short if you are interested in this look up this term i 18n let's keep it moving what are the data attributes good for so this is a way you can store actual data within the html on your page and the data attributes they're not going to be displayed on the page but they're more like something that can store data and then you can read and write it later so they're kind of like variables in javascript as you can see here though using them is generally not encouraged now why is that well html is what we call presentational it's mostly stuff we're literally seeing on the page it's the structure of our page and we have an entirely different level for just data and we call it the data layer and that's usually handled by javascript and in programming this is what we call the separation of concerns so we rely on our css to handle how things look html is how things should be structured javascript is our data and how logic works on our page so the thing is we can kind of mix these together because you know html actually it lets us write css on our elements it lets us store variables in the data attributes but that doesn't mean we necessarily want to do it now there are exceptions for example using testing frameworks for the data attributes there are certain cases where you'd want to use it within templating languages however for the most part you're going to want to stay away from these whenever possible though you should know what they are in case you run into them right next question what are the building blocks of html5 now there's a bunch here and the first thing you should know is html5 it's just the most modern version of html and it's been around for quite quite a while at this point so it's not exactly new but what you should know are the big changes it added so you know to be honest with you the main thing i'm familiar with in regards to html5 is the semantic elements and you can kind of check that out if you search semantic html these were added to basically make the way we write html more descriptive but they're called semantic because they actually don't change anything we see on the page so while old websites had things like div id nav div class header now we actually have html elements uh that work the same way as a div but they're more descriptive so at the end of the day this is no different to the end user but it's better for things like screen readers which is an accessibility thing for uh yeah certain types of people who are browsing and it's also for developers where they can see immediately oh this is a header so i can actually just style that header without adding a class and and so forth moving on difference between cookie session storage local storage these are all ways we could just store data in the user's browser so i can write some code that's going to run in your browser that is going to store some data for later you're almost certainly familiar with cookies already which is just a way to identify users and for example an advertising cookie let's say you click on a facebook ad that will store a cookie in your browser which will then track the subsequent actions you take so if you purchase something then it will link it back to your cookie so then it can attribute that sale to the ad click and that's the way kind of advertisers measure their effectiveness of their ads through cookies so cookies are basically just a small string of text and the main thing or rather difference between these other two is the size also you know there are some other considerations but the main thing is you know this is only five kilobytes which is about a thousand times smaller than five megabytes okay so if you need to store any legitimate volume of data rather than just a short snippet of text you need to use one of these now what you need to know is none of these are really secure so you never never want to store passwords or really anything here because there's there's ways malicious actors can read these variables because they're just accessible to any code that runs on the browser so let's say you have a cookie stored and you go to a different site that actually has a script that reads your cookies and sends that data back to you know their server they can kind of steal your local storage session storage and cookie data so as a developer you never want to put secure data in here okay that tangent aside uh the difference between these two is just how long they persist so session is only indicative of how long has this person actually been in this session or on this page for example without closing it uh well you know we can store some state uh session state uh based on just this um this login and session storage would hold something like a session id which just indicates you know that the user should remain logged in within this point in time so that's done what is the difference between script async and script defer these are just different ways we can load javascript on our page okay and the main difference between these three are just when the script is run or loaded the first one script it's a blocking load so that's the reason we put the scripts at the end of our html file because if we put this at the top and it was taking a long time to load maybe the server has a slow internet maybe it's just really big then none of the rest of our page is going to load until that script's finished so most of the time we're going to put our scripts at the end of the file but we can achieve the same outcome regardless of where we put our script if we use script defer and you can see here there's not much difference than putting a normal script at the end of body for example finally we have async okay so async is just going to be fetched in parallel to the html parsing this can improve performance but if you have some critical script that you need on your page to load you definitely don't want to use async so long story short you can use this to increase performance and the script is uh not critical for the performance of the page and it's not dependent on other scripts on the page okay okay why is it a good idea to position links between head for css and scripts just before the end of the body we just talked about why you want to put scripts at the end because of performance we don't want to create what's known as render blocking that is our page visuals being delayed until they load uh but the reason we put css on the head is kind of the opposite reason where we do want our styles before anything appears on our on our page because otherwise we'd have what's known as pop-in we'd see the unstyled page and then it would be updated as soon as the css loads which we which we don't want because it's just a bad user experience it looks very amateurish and uh very unprofessional when that happens so that's why we put link in the head so we get our css back it's usually going to be a compressed or optimized file so it so it works fast and then it will allow for a quick first meaningful paint which is that already styled render what is progressive rendering well it is related to what we just talked about with css where when do you actually load different resources on the page so for example our css at the very top of our page that's critical because it's the first thing the user sees but maybe we have some css that is down the page or we have some big images that are lower on the page that can wait a bit longer so what we want to do is prioritize the most important things to be loaded first and then other things can maybe happen asynchronously that is after the initial page load and that will speed up our performance so a couple examples here are lazy loading of images right and that's kind of what i just described if the image is lower down on the page we can kind of wait to load it all right then we can also prioritize visible content that is just what we talked about with these css at the top that you definitely have to see on that initial page load and you can even load parts of the html later if they're heavyweight let's say and these are all things you can do to optimize the speed of your websites and you can also do the same with scripts scripted for async is a good way to do that source set attribute in the image tag what is this for well this is very useful if you have a lot of images you can display different image sizes depending on the device with just a spaced out list like this and this is a very intelligent attribute and it's great because you can set let's say three different images as we see here for three different screen widths so on mobile you don't need as big of an image because it's displayed on a smaller screen makes sense right so the smaller image is always going to load faster and you know there's no reason to load the bigger one so what the html does is it intelligently detects what size the window is and then it will load the right image accordingly okay then you know it will also intelligently look for a larger image if it's retina display that is more pixels in a smaller space and um yeah and then if you have a super wide monitor ultra wide then it will get naturally the biggest image okay and we are already to the end so this went pretty fast honestly so what i will add to this last image comment is as a front-end developer you should always be compressing and resizing and reformatting your images so let's just go through those three really fast this is not in the guide but it's super important whether in an interview or outside of one because it's pretty much a rookie mistake i see a lot of people making so what i mean by that is a lot of the images you download let's say it's an image from a pro photographer of you that's going to be an absolutely huge image okay so you open it in a browser and you do that zoom in thing that's the true size and usually it's way way zoomed in so what you want to do is you want to make this as small as possible but no smaller what does that mean so consider the largest possible screen it might be displayed on that is maybe like an ultra wide monitor and you want to really think about how many pixels wide that image is going to be depending where you're displaying it on the page so if it's a big hero image at the top it's going to be naturally bigger than if it's a small little thumbnail so think about this think about the largest size and then measure the pixels of that image and the way you can do that is let me just show you if i can find an image here this is definitely a tangent right now but it's an important one so we have an image here so i can right click inspect right then i can actually see if i go here look i hover over and this is with chrome dev tools i can see this image in mobile size is being displayed at 309 by 240. then am i uh if i just go to responsive and i can of course make this as big as i want so now it's 400 by 311 so i really have to consider what is the max biggest size ever of that image and then resize it down to that because if it's any bigger i'm just wasting my pixels because less pixels means it loads faster so that's number one number two is compressing your images okay and you want to just search image compressor on google and then you go to tiny png and then you can just upload it and you'll a lot of the time you'll save 50 or more on your image size with minimal loss and quality but you do want to sanity check whether your image looks worse the compressed version because it can actually happen so that's number two just compress and then number three is you want to convert to a jpeg or a webp format and there's also even more performant formats that are just smaller size so all of these things are just getting our images to be a smaller size which means faster loading but we also don't want things to not be performant so yeah this is a big thing because you know almost every site is going to be using images which is why we spent the time to go over this so yeah basically just convert your images to jpeg or webp and then you just do you display them in the same way image source and then you just put the new extension it'll load exactly in the same way and um yeah you can just do this all in the browser all right now last question have you used different html templating languages before you don't have to say yes but you should know what templating languages are and when they are used so they're actually used in most frameworks that are non-javascript so for example flask will use the jinja framework flask is one of the popular python web development frameworks and the way its html pages get created is with the jinja templating language so initially jinja looks like it looks like html but it has these percentage bracket variables let me just show you that we can use to dynamically insert content so here we go so you'll see something like this that is basically a way for code to run in that html so the thing is the templating language is not real html but it generates html when the client requests something so for example this isn't a great example let's just open here uh yeah a ginger template simply a text file that can generate any text-based format so most of the time you're gonna be generating html files with something like this and you can write these template strings inside your code which allow you to do things like loops variables if statements so it's kind of a hybrid between html and actual programming and the good news is it's not so hard to learn ginger is this one templating language though you have a different one for ruby on rails you have a different one for elixir these are just other programming languages and frameworks and then uh you also have liquid which is used in things like shopify to create themes dynamically now all you have to know about these templating languages are they are just files used by the server to create html dynamically now what does that mean well dynamically just means the data can always be different so if i have like a my instagram home page and i'm creating that page with uh with a template file like liquid i can go there now then this well basically everything is going to be dynamic because you have a different profile picture than me you have different pictures than me so you would put a variable for my image in jinja you put a variable for my username in jinja and that way i can use the same file for every different person's profile and the variables will just be updated depending whose profile i'm requesting all right so i know that was maybe a bit complicated at the end there but if you understand how data gets fetched and rendered on the page the templating languages are basically just filling in the blanks where the variable should be okay so that is number one finished uh now you should be an html interview god and like i said if this video gets enough views and likes we will do the css section and then the javascript section so let me know what you think let me know if you have any other good html interview questions in the comments and yeah hope you learned a thing or two from that catch you later [Music] you

Channel: Aaron Jack

Views: 21,061

Keywords: programming, web development, javascript, react, learn programming, learn to code, coding, software development, become a software developer, software developer, freelancing, freelance developer, coding tutorials

Id: kpczyO9XP_0

Length: 18min 55sec (1135 seconds)

Published: Mon Jul 26 2021