Let’s make a place (topic) to post web development resources that we find or know on the net. I’ll start with a roadmap I just found about Frontend.
Any link, video, book, etc. that you know and could be useful for the rest of participants is very welcome.
Regards.
Flexbox Froggy - A game for learning CSS flexbox
This game will help you understand how to leverage the power of the flexbox functionality in CSS. Basically, you move a frog around to a lilly-pad commensurate of how you’d move content around in a flexbox
HTML, CSS and JavaScript Online Editor
One of its features is a search engine that allows you to look for other user’s code and projects
We can’t talk about Flexbox Froggy without mentioning Grid Garden!
Jess already brought it up during the live stream, but Mozilla’s HTML Reference is a goldmine:
Here are two more flexbox games:
Flexbox Zombies
Flexbox Defense
I’ve just been looking at W3Schools …there’s so much stuff to learn!!
https://www.w3schools.com/default.asp
Oh wow this is so cute 
Color palette tool: https://coolors.co/
I like https://color.adobe.com/ for experimenting with color palettes in an interactive way. I like https://coolors.co if I want some quick suggestions and inspiration.
Also, https://web.dev has some nice CSS learning materials and they link out to MDN (https://developer.mozilla.org/) for deep dives. MDN is THE resource for web development. Make it your start site and try using MDN search, not Google for specific web dev questions. Seriously 
As we’re on colours and styling:
Some nice colour-gradient bases to play around with: https://webgradients.com/
Another one for palettes: https://colorhunt.co/
And I just discovered this one for icons: https://thenounproject.com/ which seems pretty sweet. I used to use https://fontawesome.com/ but they’re just too set on wanting to make you pay for better icons. The nounproject is all free as far as I’m aware.
Hello! I use https://www.flaticon.com for the icons, has a huge library.
For inspiration i like to nav instagram in sites like Login • Instagram and Login • Instagram, however I will definetly will check out https://codepen.io/
If you’re completely new to web dev perhaps it’d be new to you that a bunch of sites provide placeholder images that are super helpful when you’re developing. The one I’ve used is
Ex. if you need a 100x100 pixel image, simply use https://via.placeholder.com/100x100
Update: I just looked around a little and realized there’s much better service https://placedog.net/500 or https://placekitten.com/g/200/300
I’m not going back to placeholder.com (sorry, placeholder.com!)
If you want to put your coding skills to work, but don’t know what to build Frontend Mentor is a great site. They have plenty of challenges from Newbie to Guru.
Frontend Mentor
I was looking for some icons and it bugged me that thenounproject, flaticons and others required an account and/or money to download SVG code.
I found this
(code here GitHub - tabler/tabler-icons: A set of over 1250 free MIT-licensed high-quality SVG icons for you)
MIT-licensed which means you can do whatever you want with them without attribution/payment. There may be nicer looking ones on other platforms but I thought this was really useful.
Hello again David,
I remembered that also I’m not sure if the images should be taken only from external sites -using hyperlinks in page or we can store with the entire folder when the page test happens.
Thanks again.
Right so I hyperlinked all images for it be really easy to put on codepen.io. Passed all tests and couldn’t see that they had opinions about that!
I just finished all the 24 challenges on Flexbox and I loved it! thank you so much for suggesting that =)
Hi there!
For those who are dealing with CSS Flexbox, Grid, Media Queries (and more) I found this some weeks ago:
These guides are really well explained and I did love the graphic style. 
Web Design with HTML, CSS, JavaScript and jQuery Set 1st Edition
by Jon Duckett
These books have been a savior for step-by-step coding instructions - it teaches you how to build a website from the ground up from starting with HTML to CSS with code samples on each page – tabular indexes/appendices with almost all mostly used/important HTML and CSS codes. It’s been great to use while following along with the curriculum content and matches up nicely. It also provides best practices and an entire section on website ideas - how to approach brainstorming, common ideas for content/UI organization, how to optimize accessibility, make it friendly, SEO, etc. Has been a phenomenal resource in addition to online google searches + YouTube tutorials.
Even if the book is a slightly bit dated - the concepts are all relevant/almost all of the coding is up-to-date or functional instructions. It didn’t break the bank either, I think one of the best purchases I’ve made. The Javascript book is dense in the set - but also super informative with step-by-step examples and coding script resources. Having the indexes physically available of all the codes is wonderful as well and categorized (example would be categorized by both topic and chronological use i.e. you’d start with as base starting code then move into XYZ codes for content management like
etc, then commonly if you wanted to make a list, add images, media, etc then into design with CSS codes) - it’s just nice having a quick reference for all of the major code elements and CSS properties in one spot. Makes designing from ground up much easier.
