How I research and plan a real-world website project | FEM social media dashboard, Part 1

do you ever feel like everyone else knows how to  code except for you you've watched the tutorials   you've done the homework but when it comes to  getting your own project off the ground you end   up staring at a blank page for hours you don't  know how to get started and you're not even sure   you understand what you need to build you might  feel like a failure but the fact is that even   professional web developers get stumped the trick  is understanding what to do when you do get stuck   and that's what we're gonna tackle today we're  gonna build this light dark toggle from front   of mentor and the catches i don't know how to  build it but that's okay because we can break   the problem down into smaller chunks and  research our way to a solution by the end   of this series you'll not only be able to build a  toggle yourself but you'll have a process you can   use to figure out almost any webdev problem you  can think of sound good well let's get started alright so when i'm starting a project before  i do anything before i jump right into the code   and start typing away i try to take a look at the  project and kind of figure out what requirements   are going to be part of this and what things  i would have to build let's pretend that this   project that i'm building or that you're building  this front and mentor challenge is something from   work and what's really cool about front end mentor  is that they're actually giving you almost like a   real world experience in terms of getting a design  from a designer and then having to build that out   because that's basically what i've done as a  web developer at my job or my former job rather   so let's look at the front end mentor challenge  so we're doing the social media dashboard with   theme switcher and if we click into here we  can see you know the desktop design it has   a series of cards and it's showing data from  the different social media platforms and then   on the bottom part there is some more cards  showing you know different engagement metrics   and then of course at the top right we have this  toggle for dark mode and light mode and we can see   here that there is both a light and dark mode  version of this website so what i like to do   usually is write down what the functional  requirements of this project are going to be   this is really very similar to what i would do in  the real world so i'm just going to create a new   file here call it notes.md this is going  to be functional requirements and notes   and you know obviously this is just a casual like  note-taking thing let's kind of zoom in a little   bit more here okay so functional requirements and  notes so the dashboard has a light and dark mode   toggle so we're gonna have to do a little bit  of research in terms of you know what is the   correct markup to use in html um so what html  markup to use as well as how to switch between   light and dark mode and i believe we're  using css variables so that might be another   item that we're going to list out here so css  variables or variables or custom properties which   is i think their formal name but it seems like  a lot of people are just saying css variables   like myself the light dark mode is kind of the  reason that i chose this challenge it's something   that i'm not super familiar with myself so i  thought it might be beneficial to just show you   the seedy underbelly of building websites and  all the research and googling that is involved   as well as trial and error so just trying to  keep things you know honest and open around here   so here's the brief challenges about this landing  page as close to the design as possible which is   definitely important the only javascript required  is for the color theme toggle users should be able   to view the optimal layout depending on their  device's screen size so you know desktop versus   mobile versus tablet and then hover states and  then toggle the color theme to their preference   so that's pretty straightforward one thing i did  was i actually tweeted about building this project   thinking about doing this dark light mode switcher  challenge in front of mentor so i said i haven't   built one before so there's probably some live  googling or duckduckgoing since i used ducktalk go   so let's see i got some pretty good replies um  with good suggestions from people for things   that i need to keep in mind when i'm building  this out so that's matt he makes fun of mentor   so this person's saying css custom properties are  the simplest native way to do it that i know of   declare the theme properties at the  root which is what i've heard too   and then apply a class to the body or use a  prefers color scheme media query to override   them okay so prefers color scheme media query  that's something that we're going to prefers   color scheme media query so we're gonna have to  look that up and then okay so everything else i   kind of know use the root thing okay so let's see  and then i got this other tweet from grace snow   she's actually a really active member of  front and mentor um she's very experienced   so one of the challenges i see most commonly  using poor html semantics not just for the toggle   i actually think the html is a way bigger  challenge theme so i was asking like for   the dashboard so she was saying where the headings  should be should user names be labeled with screen   reader only text will the increased decrease  of followers be communicated to assistive text   okay so let's look back at the design  real quick so where the headings should be   i'm guessing that is for you know making sure  you're using the correct h tags whenever possible   so i'm guessing here social media dashboard will  be the h1 and then i'm guessing the overview today   would be an h2 and then each card would probably  need an h3 tag so you know page views likes etc   and the other interesting thing she said was  should user names be labeled with screen reader   only text this is an accessibility thing so if  say you are visually impaired you might be using   a screen reader to navigate the internet and that  means that you need websites that you build to be   able to be navigable by screen readers so they'll  actually read out loud to you what the content is   on the website so if we look at the design  for example on the first card here it says   you know facebook and then the facebook username  twitter with the twitter handle etc for the   different platforms and if you're visual you can  see the facebook icon or the twitter icon and you   know what platform this card belongs to but if you  have a screen reader it's not going to say that so   what i'm assuming grace is saying here is that we  can add some text that's only going to be i guess   readable by the screen reader but it's not going  to visually appear on the page to say for example   facebook nathan f or twitter nathan f things  like that just to make things more accessible   you know for screen readers and do the same  thing with the bottom cards like you know page   views on facebook or likes on facebook likes on  instagram so things like that are unfortunately   oftentimes the last thing or even just forgotten  and i'm as guilty this as a lot of other people   are and accessibility is something that  i'm trying to get better at so we'll try   to keep these things in mind and let's make  some notes on that as well so excess ability   accessibility is that right excess no  i think there is two s's you know like   when you look at a word and you like look at  it for so long that it starts to look weird   um that may or may not be spelled correctly  okay so accessibility make sure headings   use correct heading tags and then screen reader  only text for you know card titles username so   just things to keep in mind there and then another  thing we actually might need to research is the   toggle itself for accessibility as well so dark  light mode toggle i guess yeah what html markup   accessible we'll go into that a little bit  later so let's go back to the tweet um let's see jesus variables someone else says and then at  the bottom this is from killian uh volkov he   makes the polypaint browser which we're  actually going to be using later in this video   so he's saying extract if he had a third system  default option so a third option to the toggle   so let's check out his blog post here  okay your dark mode toggle is broken   so let's see what he's saying here so do you need  a toggle do you really need a toggle to support   dark mode not really you can support dark mode by  using the preferred color scheme option which that   other person mentioned earlier so that that's  another note to myself that this prefers color   scheme is probably something that is accepted or a  best practice and we'll be researching that later   so because you in built into browsers it gives you  one of three values light dark and no preference   okay so here's the issue the issue or the  problem here is that most toggles have two states   you either have a light mode or dark mode and  the choice is forever stored in a cookie or local   storage which could break your dark mode if if  i'm guessing you've set in your browser or your os   you prefer either light or dark so this is  saying that the toggle actually needs to   have three states light dark and system preference  which is what the user sets on their own computer   and then there's this preferred color scheme media  query so this is mentioned again okay so what i'm   getting from this is that the toggle actually so  switching between light dark modes via javascript   and then three option toggle light dark and then  system preference and that goes into the prefers   color scheme media query so this looks pretty good  so far so you know we're just making a list here   of all the things that we're going to be doing  research on in a little bit okay so i think and   then this is an example of stack overflow giving  you these three options all right awesome so   i believe that was all for the tweet so now  we have the items that we need to research   we're just going to kind of go down the list so  the first one is the light dark mode toggle so   what i need to figure out is what html markup do  i need to use and how to make sure it's accessible   so if we go back here um so grace know actually  did a challenge on foreign mentor which i did   find in my pre-research research and it's linked  here so an accessible toggle in html css on js   and this is for a this other challenge  which is a pricing component with toggle   so you can see that here and she made some  notes here using an accessible component   from this person scott o'hara styled  form controls so let's check that out okay accessibility of style form controls  so i know a little bit about this basically   you know your form controls are like the checkbox  the radio buttons um form buttons form text boxes   things like that and what people sometimes  do when they're styling them to make them   look prettier is to instead of using the actual  radio button or something they'll just build one   using a div and css and that's not navigable by  screen readers and it's a bit confusing because   you're not using you know the traditional html  form elements for that so what i'm guessing this   website is telling you is and let's load the  actual website here okay so this is the website   zoom in a bit um the accessibility style  form controls so what i'm guessing is   is that this person scott o'hara has created  you know html and css markup that you can   use if you want to have these accessible  form elements just as a starting point so   what we want is to figure out the markup for  the toggle okay switch check box toggle button   let's see what this is okay so this does look like  a toggle however keep in mind we do need to use i   think we need to use a radio button list because  this button i believe only has the on and off   settings so i think we need this one switch radio  button group pattern to create a two option radio   button group okay so there you go this is the  toggle that's working and there's some notes here okay so here is some example  code which is pretty awesome   so we can he see here there's a field set which  sort of encapsulates the different controls   and then there is yes so for  each option there is a radio   radio button input type so this is probably what  we're going to be using now if you remember from   killian's blog post we actually need three a  three option radio button toggle so this example   just has two and i need to figure out is there  a three option toggle is that even possible so   when i am looking for some examples of ui elements  a lot of times i'll just go to codepen so codepen and we're going to look for toggle maybe three  and then just hope something pops up so let's   see what happens here okay so no no oh here we  go css multi-position radio switch okay perfect   so what i'm really looking at here is an example  for you know what i can build that i can use   as a reference okay so there's two positions  three and even four that's pretty funny cool   so we're using we'll probably do something  like this so my guess is i would make the   middle position the system default and then  maybe light on the left and dark on the right   and we'll have the default be the default let's  just check out their markup really quick too   looks like um they too are using a radio button  input which is good so that's another sign that   you know this is kind of the way to go in addition  to obviously seeing it here and i believe and then   also with grace's challenge here so this is  just good to know you know we might need to   come back to this to see how they style the three  positions because you know has this nice sort of   animated thing so you know we can kind of go  back to this when we need to so i'm going to   take that link so here we go light dark mode  toggle um three option toggle we're going to   add a link here and then the hdl markup we'll add  a copy this thing here just so we can you know go   back and make sure we're following what that's  saying so now we have the radio button toggle   markup research complete i think i have enough  references that i can work from this later on   when we're actually building so let's move on to  look at using javascript to update css variables   so i use duckduckgo update css variables  with javascript and let's see what happens   a lot of times i will just click on the first  result here but i also try to kind of filter   the results based on if i know a website is  considered you know a good source of information   and i haven't heard of designsize.com i'm  sure there's a reason it's coming up first   but i look at css tricks a lot so let's check that  out okay updating a css variable with javascript   so css variable up here so you set the variable  it's mouse dash x and then mouse dash y okay so here's some code examples how to update  it from the javascript so we're going to say let   root equals document document element and then  to that document document element here we go so   root.style.set property so this is probably what  we would use to update the css variable so this   is good to know i guess switching between like  light and dark modes be a javascript so maybe   for under css variables we'll add a list link  here let's just add some spaces between these to   make it look a little bit better so that's  probably right now just for you know just   for kicks and whatever let's see what this  first result tells us and we can compare   what this result is telling us with what the  css tricks link was telling us and just see if   they match up you know it's another sign  that this is probably the best approach   okay so style set property okay so this is again  saying you want to set it on the root pseudo class   which is what everything else we've read is saying  so that's a good thing okay so this looks pretty   familiar document document element style set  property which is you know they they created this   root let variable i guess just let's not variable  anymore it's a root style set property and they're   saying the same thing here so that tells me  that this this is a good approach to use so   the other thing i think i need to research  is you know doing some research on light   and dark modes just because i want to see  how we need to sort of format the colors   so let's say light dark mode css variable see  what comes up okay so create light to create   a dark light mode switch with css variables  dev.t.o is i think pretty good um obviously   your mileage may vary depending on the actual  author so let's see what this person is saying okay starting custom properties okay  so this is root primary color you know   setting it to different things and then  data theme dark i have not heard of that and i believe that people had mentioned this prefers color scheme  media query so maybe i'll copy this   and do light dark mode prefers color scheme maybe  delete the mode so light dark prefers color scheme   see if we can find some examples here okay   so developer.mozilla.org that's usually a  pretty good source of info prefers color   scheme css media feature is used to detect if the  user has requested a light or dark color theme and this is similar to what um  killian's blog post was saying so let's see okay so they've been a code example here  okay here's what we're looking for so in the css   there's a at media rule and it's  saying prefers color scheme dark   and it has a set of colors using the dark  scheme class and it's setting the background to   dark gray and color to white okay and then  there's another at me preferred color scheme light   and then that's using the light skin class  background white color it's like a medium gray okay i'm actually curious   to see one thing that um killian mentioned is  that you can set this in your os or your browser interesting okay so the no preference you mentioned no preference  i think but it's not really   it's only supported in safari i'm  not really supported in anything else   um ooh simulate prefers color scheme  in firefox which is what i'm using okay so i guess what i'm curious  about is like i haven't really set   the color scheme thing here but i  believe i can set it in windows um and display let's make this one a little  bit bigger i believe it was under color oh dark mode here we go so under colors  choose your color dark so if i change it   to light what happens oh everything turns  light interesting i'm actually curious to   see if that affected any of these web pages  that i was looking at okay so here we go here   let's change back to dark and see if this  changes at all oh my gosh it did so the day   and the night changed that's pretty cool changing  the color light versus dark will sort of use this   prefers color scheme value so what i think  i want to do is going back to the challenge   so right now i have my operating system set to  dark mode if i just load this website i want it to   use the preferred color scheme media query and  detect that i have dark which is kind of what   they're saying here so prefers color scene dark  like that and then if i set it to light then it   would switch to that without having to actually do  the toggle but my guess is then the toggle works   because let's say i have my thing set to dark but  if i want to load this website in the light mode   if i change it to light then it can change to  light even if my os mode is set to dark mode so   that's what i'm guessing is a good ux so you know  if i'm wrong about this feel free to flame me in   the comments so let's write a little note on that  and how that all works so light dark mode toggle   takes system preference by default  but can override with toggle   this is just kind of a note to myself okay so  then the switching between light dark modes   via js i need to add the link that i did for that  so i'll just copy this did i not do that before   oh yeah i did oh i did just the updating  this us variable but i didn't add the link   for um this thing prefers color scheme and how  that all works maybe i'll move this up here too so it's switching between light dark modes  via js and prefers color scheme media query okay cool so i think that's pretty good um for the  dark and light mode toggle stuff so the correct   heading tags i think i know enough to to just  add the correct headings and the screen reader   only text for cards and titles and usernames  so let's look up that screen reader only text okay so accessible360.com that sounds  that sounds pretty good okay screener   only text is great for providing more  context to a link whose purpose may be   obvious visually due to its location but  could be confusing without visual cues   so this person is adding some additional  text to the add to cart button saying you   know info about the product and it's adding  a class screen reader only that's interesting   okay screen reader only position absolute  interesting um another thing i tend to do when i'm   looking up stuff is so i don't know a lot about  accessibility so let's look up here accessibility   developer guide let's see if they you know they  seem like a pretty authoritative source right okay so let's check out their website welcome  to the accessibility developer guide nice okay this is a good sign the content is  based strictly on the w3c's web content   accessibility guidelines um okay  it looks pretty good so let's see   what they got here so i'm just going  to go right to the example section   and hiding elements since we're gonna add we're  probably gonna add some text that we only want   to be readable by screen readers this is probably  what we're gonna use since we want to have some   text that's not um visually visible on the page  but it is readable by screen readers cool okay   hiding elements visually we don't want to hide  all of some screen readers so we want this thing   heading on ones visually by moving them off screen  okay cool there's no official technique for this   but there is a well proven workaround so the  only way to hide an element visually while   retaining its perceptibility for screen readers  is moving them out of the viewport using absolute   positioning i think that's similar to what that  other example was here yeah so they're doing   absolute looks like they're all still using  clip path um i don't know if that is actually   supported by all browsers this seems like maybe  it's a more straightforward approach so basically   this is actually a good example so i would take  what this website is saying over this website   because i mean it seems pretty good but it just  seems like this is like kind of a blog you know   looks like they're some kind of agency who handles  accessibility and i'm sure they know their stuff   but i think this clip thing is just not supported  as universally as just you know position absolute   so this seems to be a little bit more of a  simple example so we're going to copy this   screamer only text for card titled  usernames we'll add that link there   okay so this is good this seems like a pretty cool  website so just for the heck of it let's see forms i just want to see what they what  kind of markup they recommend   let's just look at the general good form example it's a radio button this is what we're going to   be using radio buttons input  type radio okay that's good and then each group of radio buttons and  checkboxes have surrounding field set   legend structure so this is  something good to keep in mind   for the markup let's kind  of go back to that example from scott o'hara so field set and legend okay cool so it seems pretty similar so it's  another vote in terms of you know this using   the radio button list for the markup screen  readers okay in addition to the controls label   so each radio button will have its own label  screen readers also announce the legend of the   surrounding field set okay so they have an example  on codepen let's just check that out i'm just   kind of curious what the legend is for i don't  see a legend here oh wait here legend hobbies let's just kind of scoot stuff over here alright  so legend says said hobbies so where is that   okay oh so it's sort of like the title for  the set of radio buttons so my guess is   for the toggle i would do something like set  the legend field or the legend tag to say   dark light mode or theme maybe something like that  something that's kind of just descriptive of what   you know what's the purpose of this of  these radio buttons and then to make that   only visible only readable by screen readers  so that's a good that's good to keep in mind   um so i'll make a note about that because i  don't want to forget about the legend thing   let's apply that to the dark  light mode toggle um here   hcl markup i guess i'll just make another note  here use field set legend and then radio inputs okay so i think that's all the notes i needed so  i think we have everything we need to go from here   and that's how i'd turn a challenge that's out  of my comfort level into a manageable project   remember it's okay to not know everything and  there's almost nothing that a bit of hard work and   research can't fix if you found this video helpful  please leave a like so more people get a chance   to see it and if you want to be the first to find  out when the next video in this series drops don't   forget to turn on notifications in the meantime  if you've enjoyed watching the process of web   development i have another series where we build  an entire website from scratch using html and css   or if you're completely new to web development  take a look at my roadmap video where i lay   out the important steps to starting your  journey into the field and lastly a very   special thanks to my github sponsors your support  directly makes these videos possible you all rock   that's all for now thanks so much for  watching and i'll see you next time

Channel: Coder Coder

Views: 59,687

Rating: 4.9717889 out of 5

Keywords: web development, html, css, learntocode

Id: iL4irerdGdU

Length: 29min 38sec (1778 seconds)

Published: Mon Jun 07 2021