The Perfect Project For Your Portfolio

🚨 IMPORTANT:

Use code US21F29A for 20% off a paid account (Only applicable in India)

Creating good portfolio projects is hard since it is impossible to know what the employer is looking for. Luckily for you I have the perfect project for your portfolio. A custom select dropdown. This is something that is not too difficult to make, but it shows that you have incredible attention to detail which is one of the most important aspects when landing a junior developer job.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
02:17 - File Setup
03:51 - Select Class Setup
06:46 - Custom Select Element Setup
16:36 - CSS
26:38 - Custom Select Functionality
42:46 - Code Linting Demo

#CustomSelectDropdown #WDS #JavaScript

[morphman]

Before even watching beyond the intro, as a senior dev, I can tell you that this is true. THE bread and butter of ANY form, which is about 80% of web work nowadays, is a decent dropdown select.
No matter how you go about it, trying to create a new one from scratch using VUE or React, or trying to improve on the standard Select element, you will go really far in any interview if you can show you can handle dropdowns correctly.

That, dates and flexbox will be your top tools in your portfolio. Interviewers LOVE seeing those three things done properly! Master them, and the rest is just fluff to pad out the resume with.

[MyDpop]

Thanks Kyle this is a very educational tutorial. How about a *Part 2* ? What is still missing:

- multiple select
- adding <optgroup>
- placing the dropdown on the bottom of a site, the option list should open above.

[raphaelleveque]

Really really intersting. So we don't need to extend HTMLElement (customElements API) or to define a <template> element to define a re-usable web component!

[dgo]

As a training for junior developer ok, also as demo how the embold works ok. But as contract developer I've no time to develop my own select. There is an huge amount of libraries: jquery UI, bootstrap, vuejs, ExtJS etc. Their components are developed and tested by huge community, are compatible with multiple browsers and make fast development possible

[LexMadafaka]

In reality we use frameworks. Noone will build an app and/or website from scratch. That is not efficient... this is 2021. Keep up with the new technologies. Pure JS is cool, but in it's own, not enough.

[avneet]

WOW, this was incredibly incredibly good. Amazing job, Kyle !

[carlosjuarez]

It was a really nice display of vanillajs skills, good job man! I would quit any job that requires me to do such thing in a real world scenario tho 🤔😅

[zpdvyhe]

Hey, can you make a video on how to make UI libraries like Material UI and publish it in NPM ?

[JEsterCW]

*My favourite part of this video is his guitar in the background, beautiful!*

[Victor_Marius]

I am disappointed that you didn't use event delegation, but that search capability is pretty cool!

[Swistakaqq]

Nice tutorial but you forgot about "aria-" stuff, accessability is important when dealing with custom ui elements.

[simon.tomtom.design]

Wow, I'm working on a website and I was just about to try and style a select by myself when your video landed in my inbox. I could almost use it line by line. The one thing I realized was missing (since I have a form on a long page and you don't) is the need to override default key behaviour in the browser. I simple add of e.preventDefault(); in the Switch cases did it all!

[TheCrazySharkOrTheManicShark]

This may be a dumb question, but why put the work in to create an entirely new custom element rather than just styling the <select> element that already exists?

Handsome, pro web dev, play electric guitar? *Perfect man doesn't exi...*

[prpunk]

I love how the overflow-y automatically cut the bullet points out 😂, and me screaming use list-style!!

[SumitRai]

Hmm, what about accessibility ? Also why not Custom Element ?

[MadSandman]

This video is amazing, thank you very much Kyle. However, it would have been even more amazing if you would have added aria properties to your custom dropdown. In the state that you left it in, it isn't really accessible for assistive technology users.

[CodingNuggets]

Hey Kyle! Always love your content. I think learning how to create a custom drop-down is a good skill to have. I did this for my CSS library I created and also usually do the same for client projects to give them some uniqueness. See you soon!

[buddycake]

Screen readers don't read the dropdown. It turns out to be not accessible. Anyway it was a good tutorial.

[krtirtho]

One Simple Advice: use typescript for this kind of Object Oriented Programming