8 Things Every Front-End Developer Should Know

When I was first learning front-end software engineering, there were so many things I didn't even know that I should be learning. In this video, I share some of those things as well as areas that I have seen even experienced developers lacking knowledge in.
Prepping for your frontend interviews? Use code "conner" for a discount on my course FrontendExpert:
www.frontendexpert.io/conner
LinkedIn: / connerardman
TikTok: / connerardman
Video/Coding Gear: www.amazon.com/shop/connerardman
Articles shown in the video:
developer.mozilla.org/en-US/d...
developer.mozilla.org/en-US/d...

[@menaaziz27]

1. Accessibility 2. Semantic HTML 3. CSS Layout 4. Responsive Design 5. Vanilla Development 6. Frontend Debugging 7. Frontend Testing 8. Backend Development Thank me later ✌

[@lycan2494]

thanks bro

[@gbenga9811]

I'm thanking you now 😄

[@craiggazimbi]

As always thank you for the awesome video!!

[@SaiKiranPatro]

Informative! Thanks for making such content❤

[@ohav00]

Thanks Connor. I really like your content, please keep it up :)

[@mouradboussiouf1656]

Thanks conner, high quality content

[@bhargavpandya8850]

good points! thanks..!

[@satheeshm538]

These points are really helpful for the beginners like me.Actually creating websites for desktop is easy ,then resizing it for mobile is really tough.All points are awesome.. Thank you conner... Once again awesome content.. 👍👍👍🤩

[@ConnerArdman]

Thanks!

[@rajankhunt7002]

Good video help full for us and will make more.

[@fernandezmancillamartinjon1510]

Great video, thank you so much!!! greetings from Méx!

[@ConnerArdman]

Thank you! Glad you enjoyed it 😀

[@pamudithajayasundara1259]

you are creating contents in another level corner...i have never seen these type of in depth videos anywhere. going to purchase frontendexpert....

[@ConnerArdman]

Thank you! And I hope you enjoy FrontendExpert 👊

[@Diablotux]

Amazing video! Out of curiosity where is that t-shirt from? I love the pattern, very "frontend" details 🤣

[@ConnerArdman]

Thanks! And lol I think it was from Express but I don't really remember, it's a pretty old shirt.

[@bikidas5473]

Semantic HTML is really underrated, a lot of divs bloats the DOM!

[@bm2085]

When I receive a design, the designer usually creates only the desktop version. When I ask how should it look like on mobile, they usually say, that just make it look okay... How would you create a mobile first page if you would receive the same input? (Sadly I'm not trolling!)

[@ConnerArdman]

This is a great point. Mobile first only really works if the designer is on board as well (and to some extent it is really more of a design point than a dev point). If you are finding you are wasting a lot of time on scaling down for mobile and mobile is important for your users, then that could be a good conversation to have with the design team.

[@mverma7845]

@@ConnerArdman would you suggest doing mobile version of a portfolio then scaling up for the web version?

[@ConnerArdman]

@@mverma7845 I think it can be great practice to do so! That said, the viewer demographics of a portfolio might be very different than the rest of the web (i.e. if it is primarily for recruiters, they are likely going to be doing their work from a computer).

[@mverma7845]

@@ConnerArdman that's true. But it's still a good idea to have a mobile version I would think.

[@mverma7845]

awesome video

[@zainbaloch4850]

Informative

[@adnantariq3346]

well said, young man.

[@UniversalKnowledge01]

How did you improve my CSS skills to the point they are currently? Does it just come from repetition and the fact that as long as you simply just continue to work with CSS you'll eventually get there or was it from you approaching using css and learning css in a specific way?

[@ConnerArdman]

TL;DR: Focus on learning the fundamentals then get a lot of repetitions in, focusing on one thing at a time. I think the biggest thing is being intentional with it. I see a lot of people doing so much guess and check coding with CSS, and that doesn't teach you anything. As an example, if you try every possible flex property, one is probably what you want. However, to truly learn flexbox you need to take the time to look into the fundamentals of flexbox (i.e. flex containers/items, the main and cross axes, etc.) and be able to determine which property to use based on that understanding. Like most skills, I don't think this is something you can learn purely by trying it. This is no different than the fact that you can't learn programming purely by trying it. You first need to be taught those fundamentals before you can properly experiment and grow on your own. So I'd say the best route would be to take it one major component at a time (i.e. the box model, position, z-index, flexbox, grid, etc.) and for each one watch a good tutorial on it and maybe read the MDN documentation as well. Make sure you really understand the core concepts, then try to practice it. Once you know the fundamentals really well, it becomes fairly easy with enough repetitions, but those repetitions won't matter if you don't first learn the fundamentals.

[@UniversalKnowledge01]

@@ConnerArdman Thank you for your time

[@john_doe_2231]

Can you plase make video on front end debugging ? Thank you .

[@ConnerArdman]

I might, definitely something I am considering if I can come up with enough content for it 👀

[@goodnessdavid6583]

Thanks Connor, I have learnt a lot from you in short time. I am looking forward to improving my skills as a front-end developer and I would be glad to use your advice as a foot map. EDITED: I'd it if you put the links to the website(s) in your video so we can read the articles.

[@ConnerArdman]

Thanks, glad to hear you're enjoying the videos! I added the MDN links I showed in the video to the description, there's only two of them though.

[@joshrogan3577]

Any resource recommendations for intermediate/advanced frontend debugging?

[@ConnerArdman]

You mean like how to learn it? I don’t have anything specific in mind, but I’m sure there are some great KZbin videos. Also, just click around the developer tools and make sure you know what everything does.

[@joshrogan3577]

@@ConnerArdman yeah I feel like there's 100s of features in the devtools with a few added every update. And I'm only scratching the surface of what it can do.

[@YousefMohamed-jb8bq]

Hi Connor, Great video thanks so much for the helpful video can you film a video talk about how you would start if you have zero knowledge ?

[@ConnerArdman]

Thanks! And yeah I’ve been thinking about doing that sometime soon 😀

[@YousefMohamed-jb8bq]

@@ConnerArdman If possible, could you suggest other sources other than algoexpert and frontendexpert, sources that are free or a little cheaper, knowing that I have an account on frontendexpert, but there are many of my friends who are students from middle countries and are unable to pay this amount

[@ConnerArdman]

Yeah I’d never make a video and only suggest paid resources. If I do it, I’ll mention free alternatives wherever they exist👌

[@ollebrickarp]

As a designer (and front-end developer) I would also recommend that you learn design basics. This is by far the number one issue that designers face during development. Most developers know very little, if anything about design and the end result will always suffer from this. I also see a lot of developers complicate things because of their lack of design knowledge. Elements that follow the same principles in the design often don't when developed. And most importantly - most developers don't even see their design errors. I would argue that if your job is design implementation this should be considered a bare minimum skill to have.

[@ConnerArdman]

100% agree. The best front-end developers I have worker with all have at least some understanding of UX design (and the best designers I’ve worked with also tend to have some coding experience). We can’t rely on designers to make every little design decision, and a few bad decisions can really make a product a lot worse. I’d actually go as far as saying this is probably true for almost any role. For instance, I think a PM can be much more valuable if they understand a bit of design/coding/etc.

[@kiron1826]

Vanilla development certainly seems pretty helpful but would you say it is worth the time to do personal projects using no frameworks?

[@ConnerArdman]

Probably not, because you’ll want to use popular technology in projects for your resume. Although it might make sense for smaller projects or a portfolio. For instance, if the whole site is static, then using React is probably overkill.

[@kiron1826]

@@ConnerArdman Thanks! How would you recommend learning vanilla development?

[@ConnerArdman]

I think it’s the same as any other development. If you can, courses are great, otherwise KZbin videos (preferably recent ones by trusted sources). If you already know some frameworks, try rebuilding one of your projects without the framework.

[@kenxinhxc1635]

Any tips for responsive design I'm new and having a hard time doing it

[@ConnerArdman]

Really it's just about getting a lot of practice. Make sure you know all of the available tools for responsive design provided by CSS (media queries, relative units, flexbox, grid, etc.). Then from there, it just comes down to developing an "eye" for good responsive design, which mostly just comes with time. The only real "tip" I can think of is to try out mobile first design. It's much easier to scale a mobile design up to work on larger screens than it is to scale a large design down to mobile.

[@kenxinhxc1635]

@@ConnerArdman Thank you Conner

[@keifer7813]

Damn, this was one informative video. How deep you think a FE dev should go into learning backend? What topics in particular should one focus on?

[@ConnerArdman]

Glad you found it informative! As with all good questions, I think the answer is "it depends". At a minimum, I would just learn how to set up a basic server that responds to different requests. Node.js and Express is probably the best place to start here since you'd already know JavaScript anyways. When you have a FE job, it would probably be a good idea to also gain some understanding of whatever languages/frameworks your team uses on the backend so you don't need to ask others to make small changes for you. Then over time, I'd try to learn more about broader backend system design. This would include topics like databases, networking, security, etc. Really the goal here is to learn enough to be able to be an active participant in engineering design discussions - what that means for your particular job could vary though (and none of this should be thought of as a prerequisite to being able to get a job, especially an entry level one).

[@ankushladani496]

Please start to teach how to make website responsive.

[@peterhuang1431]

I thought all company still use flexbox and not grid. But why is grid still so heavily taught?

[@ConnerArdman]

Grid isn’t nearly as common, but it is absolutely used and a tool you should know.

[@peterhuang1431]

@@ConnerArdman thank you

[@peterhuang1431]

why does learning css tutorial is so easy but when actually trying to build something new yourself, it's so hard and impossible? And when you get stuck, you dont have anyone to teach you and when you're doing something that works but not in a good way, you dont know it's not in a good way too. How did you become good at this? Is it taking a bootcamp?

[@ConnerArdman]

Like anything else, it comes down to practice. The more you do it, the better you get at it. Also, try to focus on learning the fundamentals, not just copying what they do in a tutorial. You truly understand CSS if you can write it without seeing the output after every line and without a bunch of trial and error. You only get there with a strong understanding of fundamentals.

[@peterhuang1431]

@@ConnerArdman Thank you