Add Pre-Work for HTML/CSS Module

[ChrisOwen101]

Which module(s) and week(s) does this change effect? Module(s): HTML/CSS Week(s): Pre-Work

What is the work that needs to be done?

Our first lesson of Git in the Full Stack course has only ~six hours of work for the students to do.

We could make better use of their time by having them complete a HTML/CSS project to refresh their knowledge since they might not have done any for a while.

I recommend adding a simple Project for the students to complete that should take ~4 hours. We should re-use an existing online challenge (e.g. FreeCodeCamp, KhanAcademy, Other).

This should be added to a new Preparation page to this page of the Syllabus https://syllabus.codeyourfuture.io/html-css/index

Why is this work important to do?

Making sure we have an even amount of coursework through the course is important to set expectations for the course.

Additional context

[NikhilSharma03]

Suggestion:

The Challenge is to create a responsive portfolio website using HTML, CSS.

Add Different Pages including:-

• Home Page Add user's image and name

• About Page Information about the user such as interest, hobbies, technical experience

-Skill Page List all the languages and frameworks the user is familiar with

-Contact Page List all the social media links such as GitHub, LinkedIn, and so on.

The requirement is that the website should be responsive and have a decent theme with a regular color combination

[SallyMcGrath]

Some candidates:

1. Flatiron has this free intro path: https://prep.flatironschool.com/library/coding-101-intro-to-html-and-css It's pretty good so far, stepping through it. Substantial and lots of exercises - definitely promising.
2. For a smaller task, Front End Mentors has some good pieces of UI challenges. https://www.frontendmentor.io/challenges/stats-preview-card-component-8JqbgoU62 - probably a solid hour for that project. Could possibly get them to post a screenshot in a thread and then PP them? I sort of hate PP though.

[illicitonion]

Another thought here - we have a discussion about teaching Netlify deployments that week - we could potentially tie this in with an HTML pre-work project to have the trainees build a project and deploy it to Netlify. I'd argue that deploying to Netlify doesn't need in-person teaching - we can (and have) put together a guide the trainees can follow, so this could just be part of the coursework. It would be a nice tangible "Hey look, we can get auto-deployment to the internet by using this Git thing" point to emphasise why we're making them futz with GitHub :)

[SallyMcGrath]

note: for L8 we chose some Scrimba courses for this and will see how they go https://scrimba.com/topic/free

[SallyMcGrath]

We also did deployment in Fundamentals : https://fundamentals.codeyourfuture.io/lessons/lesson-3 "ship It"

[SallyMcGrath]

Note: the Scrimba courses went so well we assigned one for ITD