How can I make a button redirect better?
So, I've created my portfolio and I have buttons <a href> for my Nav I wanted them to redirect the user to different parts of the portfilo. Would I just add an ID to the class and use that in my <a href="">?
37 Replies
Yep, so a
href="#foo" will go to element with ID foo. You can also use scroll-margin-top on element foo to add extra space above it, for instance if you have a header so it doesn't get hidden.Another thing
originally I did try that but I realized when I clicked it wouldn't really redirect me to the exact part I wanted it would be a little me down the page and I'd have to scroll
For example if I click "About Me" I wanted the page to look like this
but it would look something like this
Yep, you want to add a positive
scroll-margin-top to the element with the idOk let me try this I'll get back to you
For scroll-margin-top what value should it have?
Or how does it work, I haven't really had to use this till now.
You could start with using the same value as the height of the header, you can then add a little bit extra if needed
Ok, And should it be in px? possibly rem/em
You can use any values
Also by "header" you mean the top of the section correct?
Sorry I was maybe a bit vague: the black bar, the part that is covering the "about me" text after navigating to the section
That bar is stuck bar so it moves as you scroll
That's fine, what
scroll-margin-top does is offset the scroll position when you navigate to an element. A positive margin will scroll up the page and uncovers text from under a headerWould it be fine to just experiment with scroll-margin-top and just add values that look better to me?
It's always a good idea to experiment with everything. You can't break anything beyond repair, can just undo
And another question thats unrelated to this
When it comes to JavaScript I can say it's definitely my first actual programming language since HTML/CSS are more styling languages and I wanted to go into JS but realized it seems much more difficult compared to HTML/CSS and right now I'm stuck on how I should learn and actually understand JS one thing I want to avoid is tutorial hell and I learn by actually doing and creating things rather then sitting there and taking notes and nodding my head. Currently I cannot really just start creating thing's I've tried understanding the basics of JS but I keep getting stuck and messing up to a point where I don't even know what I'm doing anymore.
(I would disagree with CSS not being a programming language https://ptb.discord.com/channels/436251713830125568/448294302053957632/1203512273843396658, but I digress).
Tutorial hell can be avoided just by using what you learn after the tutorial (I assume you're using it during, if not, you should also use it during), so it's not that tutorials should be avoided. A lot of JS boils down to
-
document.getElementById('id_name') document.querySelector('#id_name .child_class') document.querySelectorAll('ul li')
- element.classList.add('classname') element.classList.remove('classname') element.classList.toggle('classname')
- element.addEventListener('click', event => { /*handle event*/ }) mousemove mouseup mousedown (when using events, do use console.log as the function to see what data event has)
- document.createElement('div') parent_element.appendChild(element)
- let variable = 1 const constant = 1
- function function_name(parameter1) {} (parameter1) => {}
- for(let i = 0; i < 10; i++) { /*do 10 times*/ }
If you know those you can do most thingsDiscord
Discord - A New Way to Chat with Friends & Communities
Discord is the easiest way to communicate over voice, video, and text. Chat, hang out, and stay close with your friends and communities.
To me it seems not to bad but I don't get why when I sit down to actually code I just blank like I haven't learned anything even though I'll be doing tutorials that require me to code as well.
Also a question that relates to redirecting when pressing a button. Is it possible to have the transition be smoother? I dislike how it just cuts from section to section I know "transition" exists but I doubt that's what's actually used to make going from section to section smoother.
It does take a lot of learning and there is complexity when you look for it, but also simplicity. You will find what works for you, I come at JavaScript at a different angle than most because I have functional programming experience so I'm much more comfortable with lots of small functions and heavy use of array methods. As long as you avoid jQuery, I regret picking up jQuery when I started because it enforced bad learning, it is also generally disliked and is currently recommended to avoid
scroll-behavior: smooth;
It's worth going into your browser console and add a new style to an element and type in scroll to see every property related to scrolling, I constantly go into console to re-discover properties as there are just too many to remember all of themTo be honest with you, I plan on continuing the field of Front-End Development but I do plan on switching to Software engineering by the time I get into college ( A few months). I enjoy Front-End Development and I'll continue to pursue it as I've gotten to an ok spot. I've been fortunate enough to have an opportunity to head to the Snapchat HQ next month so till then I want to continue perfecting my portfolio and future projects and if that doesn't get me anywhere as in landing on their radar or obtaining some sort of internship I plan on switching to Software Engineering as I've found out I enjoy it more.
I remember and I hope it goes well for you
I hope it goes well too 😆 - Thanks to you and few others in this Discord server my portfolio looks pretty good.
Realistically you and others who have helped me have taught me most of the things I now know I wouldn't even know where I'd be if it weren't for all the help from this server.
Web development is a continuous learning process, been doing it for over 10 years and I don't go a week without learning something new (often from MarkBoots). There is always more complexity the further you go and it's not possible to know everything and relying on others is expected
100% true - When I was starting out I'd make a header and it looked amazing and worked fine then I was introduced to this server and had someone I think it may have been Hart check out the code then realized it was terribly written and I should have done a few more steps to make it better.
HTML is often overlooked as actually being complicated, it's very common for beginners to dismiss it as being simple. I call it the "Hard To Master Language" (not the hardest but non-trivial), there are so many hidden rules for proper semantic HTML that most people ignore, even popular websites from large online companies still mess it up. It's just expected when you see HTML there are problems with it, I just made a CSS only todo list and the HTML needs fixing because I didn't plan ahead and dug myself into a small hole
I've realized the most annoying this is writting HTML incorrectly and realizing it when its to late because now you have to go back and fix it and doing so can cause your CSS to mess up so you'd have to fix that.
You simply aren't told at all that your HTML is badly formatted, you just have to know everything. The first code challenge that Kevin hosted I was the only person out of 96 (I think it was 96) entries to do the card layout semantically correctly because it looks wrong when doing it (the layout of the HTML is not in the same order as it is displayed on the page)
Sounds confusing I wont even lie but experience is key
Just always expect someone to find a fault with your HTML, for your whole career 🤭
It really is unavoidable
Hey, I have another quick question do you have any websites or anything for submissions? I had one originally but it isn't working as intended and i wanted to know if you knew of any that work better specifically where someone submits a form and it goes to my gmail.
Hi again! So… From what I’ve seen and observed from your posts and working with you on some of your questions, you like to hack away at a problem until you find something that works. Especially with Js, I really really urge you to go through some of these free courses to learn fundamentals and learn things in the right order. There’s a lot of outdated code when googling since es6 has changed a lot of things about JavaScript. I would urge you to take one of these modern js courses to get the basics down instead of just tackling each goal as you think of it (examples: I need a click event how do it do that? Now I need to add a class how do I do that. I need to validate a form how do I do that etc).
Start from the beginning and learn the fundamentals and basics, you’ll save time in the long run, learn conventions and best practices and also figure out how to achieve your goals with your site. You’ll be much better off than going to stack overflow for each problem as it comes. And you’ll know how to better debug and ask questions here.
https://scrimba.com/learn/learnjavascript
I recommend scrimba as it’s interactive and has a very handy browser code editor and console. I found the instruction to be paced well and explained well. Just my two cents
Scrimba
Learn JavaScript for free - 9-hour interactive tutorial
Learn the basics of JavaScript by solving 140+ interactive coding challenges. Along the way you will build a game, a browser extension, and even a mobile app!
Sorry for the late response but I'll definetly give it a try, Thank you so much!
I just realized this is a Scrimba course, I've actually done a few courses of Scrimba I enjoyed it but like most things in code I can sit down and learn and type a little but I actually wont really learn it
Hmm, well getting your fingers on the keys is the recommended way to learn JS. I was really happy with this instructor and this course and helping us learn in little bits and building on it
Don't get me wrong, He's a good instructor but I guess me personally I enjoy learning and actually retain knowledge by spam creating projects even just copying down stuff get's me to understand it.
Everyone learns differently!! Glad it works for you, just thought you could speed things up and create a better foundation of fundamentals and best practices by learning those instead of just focusing on a micro-level. But who am I to say how someone SHOULD learn. I just hope you're doing your own studies then and learning es6 syntax, data-types, functions, events, Dom manipulation, how JS works behind the scenes, etc etc
Your ways have helped me a lot I just feel as I've gotten to a point where I should start creating some projects to practice muscle memory and problem solving.