Creative Agency Webpage, Animated Slider ✅✅ w/ HTML, CSS, JS
Design comparison
Solution retrospective
Made with:
- HTML 🦴
- CSS 🎨
- JS 🤖
- mobile-first workflow 📲📲
- animated with gsap 📕
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 helpful1@kodan96Posted 5 months agohi 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 - @undrthegraveyardPosted 5 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@kodan96Posted 5 months agohi 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@undrthegraveyardPosted 5 months agoHey, @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 -
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord