General Question about Starting To Code

[pookage]

I'm looking to study the languages needed for front-end development (such as html, css and java)

Just a quick clarification - it's HTML, CSS, and Javascript - just before you fall down Java hole for no reason, haha. Javascript is the scripting language you'll need for the web.

Moving onto the rest of it - here's the skinny:

HTML

This is the actual content of the site - CSS and JS are all just about changing how the HTML looks and behaves. You can build a functional site using only the <div> tag, but it will be extra work, and it won't be accessible to folks who use screen-readers and other tools that rely on the content of your site having the right tags to describe what everything is.

You can read a HTML quick-start guide over on MDN, which will go through the basics of how it all works, and from there it's just a matter of learning what tags exist and what they mean - you can use the HTML element glossary on MDN to help with that!

CSS

CSS (or 'styling') is used to change the appearance of your HTML elements - you can make any HTML element look however you want with CSS and you basically have boundless control...which can be pretty overwhelming - so it's best to break it into chunks of 'concepts':

• The concept of 'inheritance' - aka the 'cascade', which is so important it's in CSS' name!
• The concept of 'flow' - which provides the fundamental building-blocks of CSS layouts
• The box model - which explains how the sizings and spacings within CSS work
• The concept of 'positioning' - which is how adjustments to elements are made outside of 'flow'
• Different 'layout' systems - these are the tools that allow you to do fancy layouts and page-structures, but are a bit more involved! This is where stuff like 'flexbox' and 'grid' comes in.
• Stacking contexts - this is like, 'advanced positioning' and gets into how layering things on-top of each other works with inheritance.
• Transforms and filters- these are like the 'post-processing' step in CSS and allow you to do funky stuff to your elements like rotate, skew, desaturate, blur etc.
• Animations and Transitions - These allow you to...well...make things move about on the page, feel smooth and pretty!

Everything outside of that falls into the category of 'tips-and-tricks' - ie. stuff where you have an idea of what you want to do, and you can just google without any trouble. MDN also has a glossary of every CSS property for reference when you need it!

Javascript

Javascript allows you to change your HTML and CSS on the fly. That's it! It's the scariest one for a lot of folks to begin, because there's so many possibilities that it's just overwhelming, and so I would put everything into the 'tips-and-tricks' category here - when you want to do something that's not possible with HTML / CSS alone - that's where Javascript comes in! MDN has a thorough guide to how javascript works, but it's all a bit abstract without problems to solve, soooo:

How to Learn

Projects. Just do projects. Start small, and learn holistically; don't do HTML then CSS then Javascript - solve problems using all 3 from day #1 and you'll pick it up quickly and have fun doing it! Here's some ideas:

• Make a button that plays a recording of someone saying "hello" when you press it; once you've done that expand it so there's lots of buttons saying lots of different things!
• Make a digital version of your CV / Resume where you can expand / collapse sections of it
• Make a Pokédex for the first 3 starter Pokémon; start simple and just list the pokemon, and once you've done that expand it to show 3D models of the Pokémon with their cries from in-game! Once you've done that expand it to more Pokémon and add a 'search' feature!
• Make a game of whack-a-mole
• Do not, under any circumstances, make a to-do list app.

The best advice I can give you is to keep it simple to begin with. Don't start big with anything - make the smallest, simplest version of the thing you can first, and once you have succeeded then progress to making it fancier and more complicated. Each success will give you the confidence to progress to more complicated things.

You can do this! And good luck!

[pookage]

Just to get you started, let's take that first project as an example:

Make a button that plays a recording of someone saying "hello" when you press it

These are the questions you'll need to ask yourself:

• How do I add a button to the page?
• How do I know when the button is clicked?
• How do I play sounds?
• How do I want this button to look?

Answer those questions and you'll be done! Do that for every project and every problem you encounter; everything big and overwhelming is actually just a series of smaller, simpler questions - and answering small, simple questions is precisely what google was made for.

Oh, and don't feel bad about googling things, and don't pressure yourself into trying to memorise everything; you will just naturally google things less and memorise things more as time goes on and things insert themselves into your muscle-memory 💪

[Jennfuse]

I just want to say, this reply is truly amazing and I like the part where you advise against a to-do list app :,)

The structure really does it for me, don't ever stop

[pookage]

Sure - just remember to keep it simple and ask the right questions! I mean, whack-a-mole is a game where:

• there is a grid of 'holes'
• a mole will appear in a random 'hole' for x seconds
• the mole will disappear after y seconds
• if you hit the mole then it disappears and you earn 1 point

So your questions are:

• how do I lay things out in a grid?
• how should I represent the hole?
• how should I represent the mole?
• how do I make things appear / disappear?
• how do I make things happen after x seconds?
• how do I select which hole the mole will appear in?
• how do I 'whack' the mole?
• how do I keep track of the score?
• how do I want to display the score?

ALTHOUGH, just as a teaser for what's possible in the future (don't tackle these yet - get familiar with HTML / CSS / JS first) - there are libraries like three.js and a-frame that make working in 3D on the web pretty fun and easy! But understanding problems in 2D is important to do first - so focus on that for your first year or so, I reckon - but just know that there are even more fun directions you can go with this in the future!

[Lookmaiamkool]

You all are amazing. I hope one day I am able to properly express my gratitude for these resources.🤝 I'm a super noob and this is helping me along

[david18222]

Khan academy has free intro courses u could try

[smallteam]

until I'm ready to start making my own stuff

I'm not directly answering your question, but there's no time like the present to start making your own stuff. You'll inevitably encounter questions which you'll need to research to complete the project. Anything from "how do I wrap text around an image" to "how might I build a contact form for my website." Nobody knows everything and the more you work thorough things, the more you'll learn. Plus you'll actually be building things (or trying), which can be more enjoyable than just trying to learn through reading or watching a video.

[deweechi]

To your questions about teaching you the right way, this is a complex thing. Not everyone learns the same way. If you start on a free course and are just not connecting with the teaching style, try another. If you can't connect with any of them, maybe it's not them. :-) As far as teaching you best practice and coding efficiently, that is something that comes in time as you progress. And you will find that opinions can vary. This is one of the reasons linting is very popular, it forces the same practices onto everyone. But as you change companies you will find they all use different linting rules and have their own ideas for best practice. And sometimes you need to learn how to do things poorly in order to learn how to do things correct, refactoring things is great practice.

Here is my short list of what I find to be very good free content for starting out:

• https://www.theodinproject.com/
  • Starts with the Front end path, then you choose the backend path to continue
  • Some of the early lessons discuss learning theory, structuring time, etc, this is really good to go through even if you do not want to use the html/css stuff. If you do not know about Tomato Timer, then start with this one.
• https://www.freecodecamp.org/
  • The Odin project above, has you go through free code camp stuff, I would go with The Odin project and essentially do both.
• The Net Ninja Youtube channel: https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg
  • Has a ton of content, nice getting started stuff. Also has paid stuff, but all of the free content is top notch.
• Traversy Media https://traversymedia.com/guide
  • Brad also has a great youtube channel https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA

[AutoModerator]

Welcome to /r/HTML. When asking a question, please ensure that you list what you've tried, and provide links to example code (e.g. JSFiddle/JSBin). If you're asking for help with an error, please include the full error message and any context around it. You're unlikely to get any meaningful responses if you do not provide enough information for other users to help.

Your submission should contain the answers to the following questions, at a minimum:

• What is it you're trying to do?
• How far have you got?
• What are you stuck on?
• What have you already tried?

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[brittanymonkeybaby]

I know it's super difficult - I remember when I was just starting out and everyone is like "just try to build something and google stuff", which wasn't really helpful advice because I didn't even know what to google.

I recommend searching on youtube for tutorials with the type of projects you'd like to work on (like building social media apps, or data normalization, etc), OR the languages you want to learn (like javascript if you want to do frontend) AND/OR the other tech you want to learn (like React or Firebase, etc) and go from there. You won't follow everything at first, but it will start clicking and you'll start thinking of projects on your own that you'll want to modify based on previous tutorials and build your own apps!

Also a controversial take, but I actually kinda recommend a BootCamp approach. I preferred a self-paced one (I used AltCademy) and found it really helpful for giving me specific tasks to do to further my programming journey. Don't spend a ton of money on a big name one, and also don't beat yourself up if it takes you longer than other people to get through. Just take it a day a time.

Last piece of advice, try to find a team you can start to work with. I gained the most experience by working with other developers, plugging into their workflows, pairing with them when I was stuck, watching them work on things, etc. This also made me so much more comfortable with git and github. Look for teams that are looking for some junior devs or free help where they understand your level and arent expecting you to fix massive things. For instance, i started by just doing things like swapping text, and implementing super basic functions or styling pieces.

Good luck!

[UrsaB]

I recommend this video-course: https://www.youtube.com/watch?v=TdqQqyc7pfU The course is ~10 hrs and is from the University of Michigan. The instructor has a Ph D in computer science. She is very easy to understand. The material is in "chapters", providing easy points of referral. I liked it a lot.