hilwynn / sass-flight-form

Build a Travel Booking Form

In today's assignment we are going to learn how to use SASS and take our frontend skills to a new level. Your task is to build a copy of the Norweigan flight booking form 👇.

🚨 The main part of this assignment is just to build the first tab; the flight search box, with a focus on CSS!!! 🚨

Once you've completed the first tab layout and feel comfortable with SASS, then you can move on to stretch goals (more tabs, more interactivity). Concentrate on the design first, and interactivity later - the CSS is the main part here, so you don't need to implement a date picker, for example (unless you want to!). It's up to you to choose how far you want to go with copying functionality.

How to complete this assignment

In the code folder of this assignment is a copy of the Technigo react starter project. You will need to begin by adding SASS to the project.

If you're running React-scripts 2.0 or higher, which the starter code for this assignment is, then use: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-sass-stylesheet

If your React project is running a lower version than 2.0 – update to more easily use SASS.

Once you have everything installed, start by drawing the structure with pen and paper to get your initial solution clear in your head before you start coding.

Hand in the assignment

To complete this assignment, you need to fork this repository, add your code in the "code" folder, and then submit a pull request on GitHub (from your repository into the Technigo one) for review.

📚 Reading List

• Learn SASS

---

🆘 How to get help

Learning how to think as a web developer is learning how to be an expert in problem solving. So whenever you get stuck start with step 1 and continue until problem solved.

1. Google! In English, type in the error message if there is one, search within the language you're using (ie CSS, JavaScript etc).
2. Ask your code buddies in your team.
3. Ask your fellow students in Slack.
4. Ask the teacher. Please note: we are part of a sharing community - share the answer with your fellows.

---

💥 Success!

After completing this assignment your should be comfortable in using SASS to style your web projects, and you should be comfortable adding SASS to an existing project.

---

🏃 Stretch Goals

Done with the main assignment? Pick some more elements from the Norweigan search form to add to your page - perhaps another tab, or a date picker, or a popover, it's up to you!