# Web Development Resources **URL:** \ **Category:** Web Development Bootcamp\ **Created:** [August 24, 2021, 12:54am UTC](https://group.classcentral.com/t/web-development-resources/7338 "2021-08-24T00:54:27Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![angelcorona2607488](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/angelcorona2607488/32/1544_2.png) [@angelcorona2607488](https://group.classcentral.com/u/angelcorona2607488)\ **Post date:** [August 24, 2021, 12:54am UTC](https://group.classcentral.com/t/web-development-resources/7338/1 "2021-08-24T00:54:27Z")
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. [Frontend Roadmap](https://roadmap.sh/frontend) Any link, video, book, etc. that you know and could be useful for the rest of participants is very welcome. Regards. ---
**Author:** ![josephhaas2595534](https://avatars.discourse-cdn.com/v4/letter/j/ec9cab/32.png) [@josephhaas2595534](https://group.classcentral.com/u/josephhaas2595534)\ **Post date:** [August 24, 2021, 2:19am UTC](https://group.classcentral.com/t/web-development-resources/7338/2 "2021-08-24T02:19:28Z")
[Flexbox Froggy - A game for learning CSS flexbox](https://flexboxfroggy.com/) 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 ---
**Author:** ![angelcorona2607488](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/angelcorona2607488/32/1544_2.png) [@angelcorona2607488](https://group.classcentral.com/u/angelcorona2607488)\ **Post date:** [August 24, 2021, 2:59am UTC](https://group.classcentral.com/t/web-development-resources/7338/3 "2021-08-24T02:59:26Z")
[CodePen](https://codepen.io/) 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 ---
**Author:** ![matthewrawlin2592434](https://avatars.discourse-cdn.com/v4/letter/m/a88e4f/32.png) [@matthewrawlin2592434](https://group.classcentral.com/u/matthewrawlin2592434)\ **Post date:** [August 24, 2021, 5:10am UTC](https://group.classcentral.com/t/web-development-resources/7338/4 "2021-08-24T05:10:22Z")
We can’t talk about Flexbox Froggy without mentioning Grid Garden! > **[Grid Garden](https://cssgridgarden.com/)** > > A game for learning CSS grid layout ---
**Author:** ![manoel](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/manoel/32/39_2.png) [@manoel](https://group.classcentral.com/u/manoel)\ **Post date:** [August 24, 2021, 8:18am UTC](https://group.classcentral.com/t/web-development-resources/7338/5 "2021-08-24T08:18:32Z")
Jess already brought it up during the live stream, but Mozilla’s HTML Reference is a goldmine: > **[HTML reference - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference)** > > This HTML reference describes all elements and attributes of HTML, including global attributes that apply to all elements. ---
**Author:** ![davidturner2608113](https://avatars.discourse-cdn.com/v4/letter/d/f14d63/32.png) [@davidturner2608113](https://group.classcentral.com/u/davidturner2608113)\ **Post date:** [August 24, 2021, 11:47am UTC](https://group.classcentral.com/t/web-development-resources/7338/6 "2021-08-24T11:47:04Z")
Here are two more flexbox games: [Flexbox Zombies](https://geddski.teachable.com/p/flexbox-zombies) [Flexbox Defense](http://www.flexboxdefense.com/) ---
**Author:** ![AuntyDee](https://avatars.discourse-cdn.com/v4/letter/a/e36b37/32.png) [@AuntyDee](https://group.classcentral.com/u/AuntyDee)\ **Post date:** [August 24, 2021, 8:26pm UTC](https://group.classcentral.com/t/web-development-resources/7338/7 "2021-08-24T20:26:39Z")
I’ve just been looking at W3Schools …there’s so much stuff to learn!! [https://www.w3schools.com/default.asp](https://www.w3schools.com/default.asp) ---
**Author:** ![jesslynnrose](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/jesslynnrose/32/573_2.png) [@jesslynnrose](https://group.classcentral.com/u/jesslynnrose)\ **Post date:** [August 24, 2021, 9:27pm UTC](https://group.classcentral.com/t/web-development-resources/7338/8 "2021-08-24T21:27:18Z")
Oh wow this is so cute 🥺 ---
**Author:** ![casserole27](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/casserole27/32/1279_2.png) [@casserole27](https://group.classcentral.com/u/casserole27)\ **Post date:** [August 24, 2021, 10:36pm UTC](https://group.classcentral.com/t/web-development-resources/7338/9 "2021-08-24T22:36:18Z")
Color palette tool: [https://coolors.co/](https://coolors.co/) ---
**Author:** ![davidlars](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/davidlars/32/1600_2.png) [@davidlars](https://group.classcentral.com/u/davidlars)\ **Post date:** [August 25, 2021, 6:12am UTC](https://group.classcentral.com/t/web-development-resources/7338/10 "2021-08-25T06:12:26Z")
I like [https://color.adobe.com/](https://color.adobe.com/) for experimenting with color palettes in an interactive way. I like [https://coolors.co](https://coolors.co) if I want some quick suggestions and inspiration. Also, [https://web.dev](https://web.dev) has some nice CSS learning materials and they link out to MDN ([https://developer.mozilla.org/](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 🕶 ---
**Author:** ![Kathrin](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/kathrin/32/1578_2.png) [@Kathrin](https://group.classcentral.com/u/Kathrin)\ **Post date:** [August 25, 2021, 9:44am UTC](https://group.classcentral.com/t/web-development-resources/7338/11 "2021-08-25T09:44:14Z")
As we’re on colours and styling: Some nice colour-gradient bases to play around with: [https://webgradients.com/](https://webgradients.com/) Another one for palettes: [https://colorhunt.co/](https://colorhunt.co/) And I just discovered this one for icons: [https://thenounproject.com/](https://thenounproject.com/) which seems pretty sweet. I used to use [https://fontawesome.com/](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. ---
**Author:** ![D.Osorio](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/d.osorio/32/1636_2.png) [@D.Osorio](https://group.classcentral.com/u/D.Osorio)\ **Post date:** [August 25, 2021, 11:31am UTC](https://group.classcentral.com/t/web-development-resources/7338/12 "2021-08-25T11:31:29Z")
Hello! I use [https://www.flaticon.com](https://www.flaticon.com) for the icons, has a huge library. For inspiration i like to nav instagram in sites like [Login • Instagram](https://www.instagram.com/uxuistack/) and [Login • Instagram](https://www.instagram.com/uibucket/), however I will definetly will check out [https://codepen.io/](https://codepen.io/) ---
**Author:** ![davidlars](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/davidlars/32/1600_2.png) [@davidlars](https://group.classcentral.com/u/davidlars)\ **Post date:** [August 26, 2021, 1:58pm UTC](https://group.classcentral.com/t/web-development-resources/7338/13 "2021-08-26T13:58:36Z")
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 > **[Placeholder.com: Placeholder.com – The Free Image Placeholder Service...](https://placeholder.com/)** > > Contents1 What Is Placeholder.com?2 How To Use Our Placeholders3 How To Set Image Size4 How To Set Image Formats5 How To Set Custom Text6 How To Set Background & Text Color6.1 Popular Hex Color Codes7 New! WEBP Support8 New! HTTPS Support9... Ex. if you need a 100x100 pixel image, simply use [https://via.placeholder.com/100x100](https://via.placeholder.com/100x100) Update: I just looked around a little and realized there’s much better service [https://placedog.net/500](https://placedog.net/500) or [https://placekitten.com/g/200/300](https://placekitten.com/g/200/300) I’m not going back to [placeholder.com](http://placeholder.com) (sorry, [placeholder.com](http://placeholder.com)!) ---
**Author:** ![davidturner2608113](https://avatars.discourse-cdn.com/v4/letter/d/f14d63/32.png) [@davidturner2608113](https://group.classcentral.com/u/davidturner2608113)\ **Post date:** [August 26, 2021, 2:05pm UTC](https://group.classcentral.com/t/web-development-resources/7338/14 "2021-08-26T14:05:58Z")
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](https://www.frontendmentor.io/challenges) ---
**Author:** ![davidlars](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/davidlars/32/1600_2.png) [@davidlars](https://group.classcentral.com/u/davidlars)\ **Post date:** [August 27, 2021, 11:45am UTC](https://group.classcentral.com/t/web-development-resources/7338/15 "2021-08-27T11:45:29Z")
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 > **[Tabler Icons: over 1250 vector icons for web design](https://tabler-icons.io/)** > > Free and open source icons designed with attention to detail to make your design stand out. (code here [GitHub - tabler/tabler-icons: A set of over 1250 free MIT-licensed high-quality SVG icons for you](https://github.com/tabler/tabler-icons)) 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. ---
**Author:** ![monicaszabo987451](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/monicaszabo987451/32/1547_2.png) [@monicaszabo987451](https://group.classcentral.com/u/monicaszabo987451)\ **Post date:** [August 27, 2021, 5:50pm UTC](https://group.classcentral.com/t/web-development-resources/7338/16 "2021-08-27T17:50:08Z")
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. ---
**Author:** ![davidlars](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/davidlars/32/1600_2.png) [@davidlars](https://group.classcentral.com/u/davidlars)\ **Post date:** [August 27, 2021, 5:55pm UTC](https://group.classcentral.com/t/web-development-resources/7338/17 "2021-08-27T17:55:27Z")
Right so I hyperlinked all images for it be really easy to put on [codepen.io](http://codepen.io). Passed all tests and couldn’t see that they had opinions about that! ---
**Author:** ![nielda](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/nielda/32/1265_2.png) [@nielda](https://group.classcentral.com/u/nielda)\ **Post date:** [August 27, 2021, 10:01pm UTC](https://group.classcentral.com/t/web-development-resources/7338/18 "2021-08-27T22:01:29Z")
I just finished all the 24 challenges on Flexbox and I loved it! thank you so much for suggesting that =) ---
**Author:** ![viajeradelaluz](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/viajeradelaluz/32/1629_2.png) [@viajeradelaluz](https://group.classcentral.com/u/viajeradelaluz)\ **Post date:** [August 27, 2021, 11:29pm UTC](https://group.classcentral.com/t/web-development-resources/7338/19 "2021-08-27T23:29:13Z")
Hi there! For those who are dealing with CSS Flexbox, Grid, Media Queries (and more) I found this some weeks ago: > **[Guides Archive](https://css-tricks.com/guides/)** These guides are really well explained and I did love the graphic style. 😉 ---
**Author:** ![scibsss](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/scibsss/32/1674_2.png) [@scibsss](https://group.classcentral.com/u/scibsss)\ **Post date:** [August 28, 2021, 3:37am UTC](https://group.classcentral.com/t/web-development-resources/7338/20 "2021-08-28T03:37:39Z")
[Web Design with HTML, CSS, JavaScript and jQuery Set 1st Edition](https://www.amazon.com/Jon-Duckett/e/B001IR3Q7I/ref=dp_byline_cont_book_1) by [Jon Duckett](https://www.amazon.com/Jon-Duckett/e/B001IR3Q7I/ref=dp_byline_cont_book_1) 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. > **[Web Design with HTML, CSS, JavaScript and jQuery Set: Duckett, Jon:...](https://www.amazon.com/Web-Design-HTML-JavaScript-jQuery/dp/1118907442)** > > Web Design with HTML, CSS, JavaScript and jQuery Set \[Duckett, Jon\] on Amazon.com. \*FREE\* shipping on qualifying offers. Web Design with HTML, CSS, JavaScript and jQuery Set 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. ![Screen Shot 2021-08-27 at 11.40.28 PM](https://us1.discourse-cdn.com/flex016/uploads/ccstudygroup/original/2X/9/91e909368328dae9ea8241220cf96473e165dcc6.png) [Next page](https://group.classcentral.com/t/web-development-resources/7338.md?page=2)