[Learning Area] CSS Tutorial

16 views
Skip to first unread message

Jeremie Patonnier

unread,
Sep 1, 2015, 7:59:46 AM9/1/15
to dev-mdc, Mozilla Webmaker list
Hi everybody!

Now that HTML is in good shape for beginners, it's time to dive into CSS.

See HTML as it is here:

- https://developer.mozilla.org/en-US/Learn/HTML/Howto

CSS is a very different beast than HTML: first it cover a larger ground
than HTML; second, we already have some content for beginners on MDN about
CSS. Most of the existing content is a bit outdated and need some serious
revamping.

If you are wondering, here is what we already have for beginner on MDN:

-
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started
(and all its subpages)

Even if I already have a fairly good idea of what should be done to improve
CSS for beginner on MDN, I wish to have you're opinion first. So if you
have idea on how we should organise CSS learning content for beginners, now
is the right time to speak your mind :). In the next weeks I'll come to you
with a more structured method to setup out plan but now it's brainstorming
time so speak up :)

Best,
--
Jeremie
.............................
Web : http://jeremie.patonnier.net
Twitter : @JeremiePat <http://twitter.com/JeremiePat>

Jeremie Patonnier

unread,
Sep 1, 2015, 9:16:04 AM9/1/15
to dev-mdc, Mozilla Webmaker list
Hi!

Okay, some more food for thought.

I'm amazingly confused by those two pages, that seams to provide the same
kind of content:

- https://developer.mozilla.org/en-US/docs/Web/CSS/Tutorials
- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS

This is a bit beyond CSS, but I really think we should get rid of this
artificial difference we are making between "Guide" and "Tutorial". If
there is a difference it should be way more clearer.

I tend to think that the CSS "Getting Started" guide should belong under
"/Learn/CSS" and all the other Guide/Tutorial should belong under
"/docs/Web/Guide/CSS", ultimately, we should nuke "/docs/Web/CSS/Tutorial"
by making a redirection to "/docs/Web/Guide/CSS" (IMO same for all tutorial
pages on MDN).

I also set up an Etherpad to summarize some of my thought about what we
have and what should be done. Feel free to update change it with you're own
suggestion/ideas/opinion

- https://devengage.etherpad.mozilla.org/46

I look forward to hear you're opinion :)
Best,

Mark Rauterkus

unread,
Sep 1, 2015, 9:47:40 AM9/1/15
to Mozilla Webmaker list
Hi,

One of the pages on CSS and HTML says, "Needed: Text editor."

Tip: That's a show stopper for many. IMHO, is a chapter on text editors is
needed.

Explain a text editor. Does LibreOffice work? What about on Andoid? When
you google text editors you can find many -- and they are often littered
with ads. How can one code within the web browser? Pros and cons, for this
population, on what to use.

--
Ta.


Mark Rauterkus Mark.Ra...@gmail.com
Swimming and Water Polo Coach, Schenley High School, Pittsburgh, PA
http://CLOH.wikia.com
412 298 3432 = cell

Jeremie Patonnier

unread,
Sep 1, 2015, 10:17:45 AM9/1/15
to Mark Rauterkus, dev-mdc, Mozilla Webmaker list
Hi Mark!

2015-09-01 15:47 GMT+02:00 Mark Rauterkus <Ma...@rauterkus.com>:

> Hi,
>
> One of the pages on CSS and HTML says, "Needed: Text editor."
>
> Tip: That's a show stopper for many. IMHO, is a chapter on text editors is
> needed.
>

Yes, I totally agree. This is part of the prerequisite to start coding for
the web and it should be explain.


> Explain a text editor. Does LibreOffice work? What about on Andoid? When
> you google text editors you can find many -- and they are often littered
> with ads. How can one code within the web browser? Pros and cons, for this
> population, on what to use.
>

Fortunately, we have that kind of content already on MDN, see:

- https://developer.mozilla.org/en-US/Learn/What_software_do_I_need
-
https://developer.mozilla.org/en-US/Learn/Choose,_Install_and_set_up_a_text_editor

Maybe it needs to be refine or augmented but the basics are covered and we
can be confident on providing the right explanation :)

Jeremie Patonnier

unread,
Sep 14, 2015, 8:04:46 AM9/14/15
to dev-mdc, Mozilla Webmaker list
Hi!

A little up on this thread as the discussion seams close to zero.
If no one show interest on this by next week, I'll take over and will
decide everything on my own.

You opinion and suggestion are very important.
Best,
Jeremie
>> brainstorming time so speak up :)

Ben Boyle

unread,
Sep 14, 2015, 10:09:47 AM9/14/15
to Jeremie Patonnier, dev-mdc, Mozilla Webmaker list
I don't think people need a text editor to get started, there are plenty of
online courses (codeshool and the like) where you can code in their tool,
and then there are all the codepen/jsfiddle style services where you can
practice your own code.

Definitely possible to learn about text editors later on, and not have that
as a distraction while exploring css.

On 14 September 2015 at 22:03, Jeremie Patonnier <
> _______________________________________________
> dev-mdc mailing list
> dev...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-mdc
> MDN contributor guide: http://bit.ly/ContributorGuide
> Doc project Trello board: https://trello.com/b/HAhl54zz/status
>

Jeremie Patonnier

unread,
Sep 21, 2015, 9:06:38 AM9/21/15
to Ben Boyle, dev-mdc, Mozilla Webmaker list
Hi Ben,

2015-09-14 16:08 GMT+02:00 Ben Boyle <benjami...@gmail.com>:

> I don't think people need a text editor to get started, there are plenty
> of online courses (codeshool and the like) where you can code in their
> tool, and then there are all the codepen/jsfiddle style services where you
> can practice your own code.
>

I agree that's true when you just want to learn. But at some point you want
to code and at that moment you need a text editor. On MDN we assume that
people want to become web developers (even amateur ones). Because of that
we encourage them to quickly get into the basic tools needed to produce
actual web content: A text editor and a web browser. With that simple
requirement they can learn everything about the web and in a learning
curves it provide them with good habits from the start.


> Definitely possible to learn about text editors later on, and not have
> that as a distraction while exploring css.
>

Yes, that's true, but IMO it's pushing back a knowledge that is fundamental
to understand the whole web echo system for those who want to learn the
code. To make things clear, the audience targeted by MDN is people who want
to learn how to produce web sites and we assume some basics skills about
computers and the web (they should know how a computer is working, even
roughly, and they should already be web users). Because of that, setting up
a text editor shouldn't be a big deal. If it's the case, maybe MDN is not
the right place for them.
Reply all
Reply to author
Forward
0 new messages