Creative Agency Webpage, Animated Slider ✅✅ w/ HTML, CSS, JS

Community feedback

• Account deleted

  Hae....nice work .....I had a look at your code base on github and it raised a question...have you tried using a height of auto for the drop down... ..in the sense using the attribute data-visible ="false"...then using javascript to toggle it to true...I think kevin powell has a video on that...it will make working with navigations simpler..

  Marked as helpful

  1

  ---

  

  P

  Koda👹•3,830

  @kodan96Posted 6 months ago

  hi there, @Muthomi-Brian

  I toggle my navbar with 2 lines of code. The function takes 6 lines, because I also toggle the icons and the aria-expanded attribute. Doubt that it gets easier than that. The video you saw probably doesn't use any library, in that case, it is probably the easiest solution, so you were right on that. But appreciate the recommendation. 🙌

  0
• 

  Shiv•350

  @undrthegraveyardPosted 6 months ago

  Hey buddy,

  Nice work. I need some pro-advice from someone such as yourself. I'm currently learning HTML and CSS, and would not say that I'm great at it yet. So would it be a good idea to integrate a little javascript into my workflow, or just I just keep focussing on these two only for now?

  Cheers😁

  0

  ---

  

  P

  Koda👹•3,830

  @kodan96Posted 6 months ago

  hi there, @undrthegraveyard! 👋

  • HTML and CSS are closely binded together and the basics of HTML takes a couple of hours to understand (not including aria-attributes, they're a nightmare), so it makes sense to learn them together. Generally neither of those are a big topic, you can pick them up pretty fast.

  • Javascript on the other hand is a programming language, mastering it will probably take a lot of time. Even if you have coding experience, JS (like any other language) has its own niche features, like prototype-based inheritance. Not to mention that JS is single-threaded , so it supports single task execution by default, but you can work around that with promises and asynch/await syntax, which makes JS a single-threaded asynchronous programming language at the end of the day. That also takes time to implement, and you will need that for user-experience.

  • personal experience: I've spent around two weeks with understanding HTML and CSS, building stuff exclusively with these, then I started to pick up the basic concepts of JS, while still taking time to look into more advanced CSS.

  • if you're struggling with CSS deep dive into these:

    • relative units ❗❗
    • the box model
    • different types of selectors and combinators
    • pseudo elements and classes
    • layout tools like Flexbox and Grid and their properties ❗❗
    • positioning

  Also some tips:

  • do some type of CSS Reset when you start your project
  • make sure you use box-sizing: border-box;
  • use relative units instead of pixels 99% of the time (I use pixels only for border-radius pretty much)

  Hope this helps you out 🙌

  1

  

  Shiv•350

  @undrthegraveyardPosted 6 months ago

  Hey, @kodan96 😄

  Really appreciate your advice.

  I do use a reset CSS sheet at the start of my code:

  *, *::before, *::after {
      box-sizing: border-box;
    }
    * {
      margin: 0;
    }
    body {
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }
    img, picture, video, canvas, svg {
      display: block;
      max-width: 100%;
    }
    input, button, textarea, select {
      font: inherit;
    }
    p, h1, h2, h3, h4, h5, h6 {
      overflow-wrap: break-word;
    }
    a {
      text-decoration: none;
      color: inherit;
    }
  

  Credits @JoshWComeau

  I suppose, I will for now try to build stuff only on HTML and CSS, and maybe on the side I might read about basic JS concepts.

  I also made a custom GPT to quiz me on CSS and HTML elements, to understand their application better.

  Anyway, thank you so much for sharing your insights! 😄

  1

  

  P

  Koda👹•3,830

  @kodan96Posted 6 months ago

  @undrthegraveyard

  if you have any questions feel free to ask

  1