These resources have been gathered to help get students up-to-speed on web development.
Each of these websites can answer nearly any web development question you have. They both have very long tutorials which move quite slowly through the basic concepts. I recommend clicking around for a few minutes on each site, and then treating them as a definitive reference after you learn the basics.
I think these activities/sites will get you quickly up and running in web development.
- The LearnXinYMinutes site has some great, quick explanations for people who have experience working with some programming concepts and want to get up-to-speed with others.
- HTML
- CSS
- There's also JavaScript, but this one isn't as good as the above two...probably because it's such a much larger concept.
- If at this point you're still feeling a bit confused on the basic ideas of HTML hierarchies and CSS Selectors, read through this article. That website, InternetingIsHard, has lots of helpful articles, but they are quite verbose. If you like their style, look through for some other content!
- I think the CSS Box Model is a particularly important thing to understand. It should help you understand whether you want to change padding or margin.
- Now that you understand basic HTML and CSS, I would argue that understanding CSS flexbox will allow you to layout any design. This is a three-part process:
- This video covers the basic concepts. It's a bit dry (sorry!), but it does the job.
- Quickly look over this site, and bookmark it. It is a useful reference while designing with flexbox, not a learning tool.
- Now, work through the exercises on flexbox froggy.
- If you're still feeling a bit lost on how to incorporate this into an actual website, watch this video, which works through five examples.
- At this point, just keep making websites!
Videos covering the basics.
- APIs: A list of public APIs from which you can pull data.
- Unsplash: beautiful images
- FlatIcon: icons
- Google Fonts: fonts
- Coolors.co: color palettes
Here are some explanatory examples I made on CodePen.
- FlexBox: A basic flexbox example.
- Playing with Selectors: A quick example of using some different CSS selectors.
- Images: Some basic concepts surrounding including images on your websites.
- Footers that Stay Down: a surprisingly difficult problem. Also solvable with flexboxes!
- Transitions: Simple smooth animations using just CSS.
- Hidden Content: Showing and hiding content using JavaScript to create a menu that displays different content when the user clicks on buttons.
- Adding and Removing Dom Nodes: It is crucial to understand how JavaScript can change the DOM (the Document Object Model, or the in-memory version of the website).
These sites are helpful for learning specific tools.
(These are the same as above.)
- Learn Flexbox
- Complete Guide to Flexbox
- Flexbox Froggy
- Flexbox Tutorial: a 30-minute video that works through 5 flexbox examples
- Mozilla's Tutorial on CSS Grid: Mozilla made this to advertise their new CSS Grid inspector in their developer tools, so it's a slightly themed toward that, but it's still an excellent explanation of CSS Grid.
- CSS Grid Garden: Like flexbox froggy but for CSS Grid.
- My HTML/CSS/JavaScript basic code style guide. It doesn't handle much, but it's enough to get you started with styling your code.
- r/webdev's FAQ: "How do I become a web developer?"
- r/web_design's FAQ: "How do I learn to style websites?"
These are mostly fun, but they show off just impressive are the tools that you work with in web development.