canadalearningcode / llc-html-css-multi-page-site

Full day intro to HTML & CSS - multi-page website - (SLIDES - http://ladieslearningcode.github.io/llc-html-css-multi-page-site/slides.html), (SAMPLE PROJECT - http://ladieslearningcode.github.io/llc-html-css-multi-page-site/project/final/), (LEARNER FILES - http://bit.ly/llc-multipage)

Ladies Learning Code

Build a Multi-Page Website with HTML & CSS

A full day introductory HTML & CSS workshop.

This workshop covers HTML and CSS basics and is intended for complete beginners.

Quick Links

Preview Slides: http://ladieslearningcode.github.io/llc-html-css-multi-page-site/slides-en.html

Attributions

Created by Christina Truong for Ladies Learning Code. Email questions & comments to [email protected].

This content was created with the advisory of and in collaboration with educators, industry representatives and technologists. These individuals have helped us to ensure that lesson content represents the technology landscape and educator needs, with learners in mind. If you'd like to contribute to future lesson content development, let us know here.

We're really happy to see others leverage our content in their community - we’ve developed it to be used by others with attribution through a Creative Commons (CC BY-NC 4.0) license.

Here's an easy way to attribute content back to us - please include it wherever you use or make reference to our content.

"Please note that this is not a Canada Learning Code affiliated event, but we want to acknowledge the organization for the creation of the content being delivered under Creative Commons license"

Contributing

Our general Rule of Thumb is that it's okay to add examples if you feel it could provide more context for your community. However, we ask that instructors do not remove anything, as the content is designed with intention, whether that be meeting specific learning objectives, or maintaining our organization’s culture through the design. Any suggestions for revisions or updates can be submitted in Github via issues and pull requests. If submitting an issue, please include the slide number(s) in the title.

llc-html-css-multi-page-site's Issues

Suggestion for default text editor

I volunteered to mentor for the upcoming HTML/CSS workshop in June, and was just going over the slides to be prepared.

For suggested text editor, it says Sublime as the default, or for Mac users suggests Atom or Windows users Notepad++.

Atom works pretty well on Windows now, so it could be the default choice for everyone. Some advantages over Sublime are:

• free (with no purchase popup every so many saves)
• easier to use plugin manager
• similar keyboard shortcuts to Sublime, so those coming from Sublime will feel instantly comfortable in Atom

If you think it's a good idea to switch to Atom, I could submit a PR for changing that slide (haven't used RevealJS before but seems fairly straightforward).

seems like Brace (for html forms) closed shop

When you click on the FORMS by Brace link in slide two of framework/extras-form-submission, you get the Brace website saying they've closed up. The code went open source, and is now available here: http://formspree.io/

Suggestion: teach flexbox and CSS grid

Flexbox and CSS Grid are getting more and more support. I think new learners would benefit from exposure to flexbox and CSS grid. If this is ever going to be incorporated into this workshop, I think the preparation needs to start soon.

Suggestion: remove forms from this workshop

It seems like there isn't enough time to properly teach about forms in this workshop, and definitely not enough time to make the form do anything functional. I think this section could be removed and more time spent on markup and CSS.

Maybe add a border box fix example

Content Feedback

I think everyone I talked to was pretty happy with the content! I think it might have just been a little too long though. By 12, when we took lunch, we hadn't made it to the Lunch Break slide yet.

We were able to start pretty much on time, maybe 5/10 mins late. To get through the exercises I sort of did them with the learners near the end as we went. That way we could go over what needed to be done and then shave a little time off the time they needed to figure it out.

By the end of the day we got to the slide on positioning I think and stopped there. Somewhere in the 70s I think? I did make a note and by about 3:20 we were on slide 62.

To be fair, I spent a lot of time making sure people understood the basics before we go to into it.

Maybe setting a limit on the number of slides to be about ~70 might help.

I actually found I didn't look at the presenters notes, I forgot about them 😬.

Perhaps the portion about explaining floats might not need to be as in-depth, even though it wasn't that crazy. By the time you get there peoples eyes have jus glazed over. I spent a little amount of time explaining the floats to people just to make sure everyone got it. As it is pretty damn confusing stuff.

I think that and maybe take down the time set for some exercises and this is pretty awesome!

I think the multi page stuff is what most people taking the older workshop wanted to do with the site in the end.

Hosting the final project

I think workshop participants will find it very satisfying to be able to put their work online at the end of the class.

I just learned about Netlify Drop. I think it sounds like a great way for workshop learners to publish their work online right away. They should be able to just drag and drop their project files into the uploader at this page.

Would work for any of the static site workshops, like the single page html/css workshop.

Update homepage markup to be the same as the other pages

Will also need to revise all the example files too.

screenshots for opening projects in sublime

Monthly theme for January?

I saw the monthly theme for March was added into master, but it looks like there's multi-page site workshops in January (e.g. this one in Edmonton on January 19).

Won't people download the master branch and see theme for the wrong month?