I was discussing a challenge with some others on GH (https://github.com/freeCodeCamp/freeCodeCamp/issues/16692) when I came up this idea, and it was suggested that I share it here.
If you’re feeling overwhelmed by working on FCC right now, you may want to skip this for now. I get too ambitious sometimes. Please don’t be frustrated with me! :hide: I hope this idea helps.
I’d help do this if I could actually wrap my head around the programming necessary, plus Git/GH still confuses me…
I’m a fan of playing with values, so I tend to play sometimes, and my son (9 yo) thinks it was pretty funny when we played with margins and padding together. Doing it can help me understand. In fact, to get over confusion in a challenge, I sometimes play with values. It can be pretty amusing/fascinating!
As an educator, I recognize that different people learn differently so, while I really dislike Code School (for example), other people think it’s great. Anything that can increase the viability of FCC should at least be considered for inclusion - if not for the upcoming version, then for future versions - don’t you think?
So I got this bigger idea that is potentially going to take way more effort (and, thus, make you devs groan, unless you can get existing code from other sites) depending on which options you choose (if at all), because it’d be useful in many challenges/areas/sections (not sure which level would work best for FCC’s methodology) and, thus, require a unique addition to multiple pages. I’m not sure how much of these additions could be standardized to reduce programming, but I’ll bet the devs who are good at JS will know.
I understand that people can observe changes via manipulating values but that assumes that they know which values to change, are the type of person who will do that (some people won’t think of it, others will be afraid to do so because they’re afraid to break it), and so on.
So, the first option would be to add images as a visual aid (yes, reading is visual, but it’s different from seeing something move, and involves a different part of the brain). This would be the easier option, I think.
Now for the more complex option. You could add generator-type examples that allow a person to see how changing a value affects the GUI. Not sure whether you should show the code, but you should allow the relevant value(s) to be manipulated with a slider/field/buttons and show the change. Would this take more effort than generating animated images? I don’t know - I have no idea how to make an animated image.
If I’m not being clear, here’s some info on some sites I’ve found that offer this sort of thing (the Ultimate CSS Generator is possibly the most complete). Most of these offer generators which let you change attributes of various things you can do in CSS, just using sliders, and show you the code used. There are other sites that offer the same for BootStrap, HTML, etc.
*CSS Generator.org has 10 generators:Box Shadow, Text Shadow, Gradient, CSS Cursor, Border, Border Radius, Transform, RGBA & Hex Color, Filter, Multiple Columns
*CSSmatic offers 4 generators: gradient, box-shadow, noise texture and border radius generators using sliders, toggles and color pickers, so you can see both the effect and the corresponding code.
*CSS3 Generator offers 13 different generators: Border Radius, Box Shadow, Text Shadow, RGBA, @font Face, Multiple Columns, Box Resize, Box Sizing, OutlineTransition, Transform, Flexbox, Gradient.
*Enjoy CSS has a few stylers for blank, input, block and button; generators for text, background, shadows, border & radius, transition, transform, with a gallery of buttons, text fields, text effects, shapes, gradient patterns and art; various options exist for each choice.
*CSS Layout Generator is a 100% free tool used for creating HTML/CSS templates. It lets you get up and running with barebones design code ASAP. You can set the doctype, CSS reset, layout width, header and footer sizes, 0-2 sidebars on the left or right, and keep the footer at the bottom of the screen or emulate equal height columns. Click the link and it’ll show you a sample of what you chose, and there is a link to a .zip file with the HTML and (unformatted) CSS files.
*HTML Table Styler - CSS Generator is a selection rich environment for generating code to create a website template with 13 preset styles. It also has a table to div converter (link at bottom). It displays the HTML & CSS, and WYSIWYG display. The table GUI has options:
-Create a table using the div or table tag and define the font, border, background color, cell, padding, width and height (px or %), and border collapse, with or without demo text.
-Style the header’s font size, bold, text color, background color & gradient, divider’s color & size, line color & size, text-align.
-Style the body’s font size, bold, text color, border size & color, h-stripes & v-stripes, size.
-Style the footer’s font size, bold, text color, background color & gradient, line color & size, link colors.
*CSS Code Generators has Gradient, Box Shadow, Text Shadow, Color Picker, Font Styler, Table Styler, Column, Border & Outline, Border Radius, Box Transform, and Background Image with HTML, CSS and WYSIWYG display, with sliders, color pickers, etc.
*The Ultimate CSS Generator has Code Generators for:
-CSS3, HTML5, Microdata, JSON-LD, Meta Tags, Open Graph, Twitter Card, and File Name
-Background (BACKGROUND COLOR, BACKGROUND GRADIENT, BACKGROUND IMAGE), Border (BORDER, BORDER IMAGE, BORDER RADIUS, BOX RESIZE, BOX SHADOW, OUTLINE, OVERFLOW (X, Y), VISIBILITY)
-Filter (BLUR, BRIGHTNESS, CONTRAST, GRAYSCALE, HUE-ROTATE, INVERT, SATURATE, SEPIA)
-Layout (COLUMNS, DISPLAY)
-List (LIST STYLE)
-Text (LETTER SPACING, LINE HEIGHT, TAB SIZE, TEXT ALIGN, TEXT DECORATION, TEXT INDENT, TEXT SHADOW, TEXT TRANSFORM, WHITE SPACE, WORD BREAK, WORD SPACING, WORD WRAP)
-Transform (PERSPECTIVE, TRANSFORM)
and links to: Rank Gen SEO Analyzer, and Programmer Shirts & Mugs
*W3Schools Web Templates has a selection of CSS Templates.