This is the first Front End/CSS coding dojo we'll be having @ 42sp!
Challenge 00 - Hello World! is an introductory kata that should be used to showcase how to set up the environment for all other challenges to come. It already contains a fully built HTML page and according CSS styles, with a couple "mistakes" intentionally left behind. Ideally, a more experienced dev will guide the whole group through "fixing" those mistakes so that everyone learns about the relation between html and css files, selectors and styles, and how powerful HTML/CSS alone can be in creating stunning visuals.
You'll need:
- A browser to render your html files - Chrome, Firefox, Safari, you name it.
- (If using VSCode) An extension to see the changes in the CSS reflected in the html file - for instance,
Live Server.
⚠️ The goal here is not to recreate anything from scratch! If it seems too hard of a challenge or if it takes more than 15 minutes to be solved, by all means move on to the next challenges as they are designed to start off pretty easy and scale in difficulty gradually.
Every folder in this directory represents a challenge to be conquered in groups.
They all start off as a 'blank canvas' containing an HTML page with a single <div>, and its corresponding style defined in the styles.css file.
The goal is to use HTML and CSS ONLY in order to reproduce the layouts presented in each directory's expected_outcome.png file. Take a good look at it, and let your creativity and problem-solving skills flow!
⚠️ These "randori" exercises are meant to be solved in small groups of 3-4 devs, as they rotate the roles of pilot/copilot/audience to solve each problem.
I've uploaded my solution for each challenge in a separate branch solutions. Mind that the solutions were written for my own PC's screen resolution (oops!) so they might not render perfectly for different screen resolutions. However if you're having difficulty in solving a particular problem, this might be useful reference to help you get unstuck.
- 18h30 - 18h40: Welcome
- 18h40 - 19h00: Brief explanation of the World of Front End
- 19h - 19h15: First Kata, solved collectively (Challenge 00)
- 19h15 - 20h15: Randori time!
- 20h15 - 20h30: final thoughts and wrap up
While this is not an extensive list, these links might help in solving the challenges here:
- Intro to FlexBox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- CSS Selectors - https://www.w3schools.com/cssref/css_selectors.php
- Flexbox Froggy (game to learn CSS) - https://flexboxfroggy.com/
- CSS Dinner (game to practice CSS Selectors) - https://flukeout.github.io/
This whole dojo was inspired by the amazing CSS Battle website! If you enjoyed this dojo, then by all means pay them a visit and sign up, there you'll find plenty of other similar challenges, with a very crisp user interface and a huge community of people that love CSS exchanging experiences.