Hello and congratulations on making it onto the School of Code 🙂🎉 You should be super proud of yourselves. You’ve learned so much in the pre-course and this task is all about keeping those skills sharp before you join. This is not an easy task but we know you can do it.
Your mission is to take a website and copy it’s home page. This will keep your core HTML and CSS skills sharp. The way you plan and build the web page will keep your command line, git and planning skills sharp. Once you’ve completed the project you will study some best practice guides and review your code - identifying and fixing at least five issues.
Half of the value is in the planning and how you work - it is not just about just replicating a page. Don’t forget this.
- Create repository in Github.
- Create a “New Project” linked to that repository.
- We want you to copy the home page of AirBnB (mobile site, not desktop) - https://www.airbnb.co.uk/.
- Take the web page we’ve given you, step through it and break down the design.
- Look for sections.
- Look for repetition.
- Look for components.
- ** Remember you can take a full page screenshot and annotate it. Give things really well considered names.
- Don’t worry about anything interactive (menus that pop open etc, we’ve not covered JavaScript yet)
- Take that understanding (design breakdown) - now create tasks on your project so you can tackle the build bit by bit. Less than 10 tasks tells us you need to break down the design/work into smaller parts.
- We would like you to practice using git branches even though you’re working alone. For each task make a feature branch off the main branch. Carefully consider your branch names and make sure they’re short and match the task name. Do your work in that feature branch then once you’re happy it is complete merge your feature branch back into main, then push the updated main branch up to Github. Then you can mark that project task as closed.
- Repeat until you’ve completed the entire project.
- Once all the tasks for your project are complete we want you to quickly read a couple of best practice guides:
- CSS: https://github.com/andredesousa/css-best-practices
- HTML: https://github.com/hail2u/html-best-practices
- Feel free to have a look for more guides or best practice lists.
- Now use that knowledge. Look through your code carefully and find at least five issues with your code. Create a new project task (label it as a “fix” or “bug”) for each issue you want to fix.
- Repeat the branching/building/merging step for each fix task until you’ve done them all.
- Send us a link to your repo.
- Don’t forget to use Chrome Debugger https://developer.chrome.com/docs/devtools/overview/
- Using debugger allows you to inspect the site we’ve asked you to copy (take lots of inspiration and see how they’ve done things).
- You can also use the debugger to view your project in mobile view as you build it
- Icons, fonts and images are going to harder to replicate. We’d suggest you do some further learning and also use the debugger to download the ones that AirBnB uses.
- A web page that looks like the web page we’ve asked you to copy.
- We want this to look as close as possible to the real deal.
- Don’t worry about anything interactive (menus that pop open etc, this is beyond the scope of this piece of work)
- A project board that shows really good planning.
- Small tasks.
- Short but descriptive titles for each.
- Descriptions for each task.
- Each task changed from “open” to “closed” when the feature branch has been merged into main and the main branch has been pushed up to Github.
- A clean commit history.
- Short and uniform commit messages.
- Commit messages should be descriptive.
- Provide the link to your project on the Application Portal in your Onboarding tasks (available once your enrolment tasks have been completed)
This may seem like a big ask but none of what this task requires is outside of what you’ve learned or are capable of learning. You’ve learned how to think about a page, break it down and label the different parts. You’ve learned the basics of CSS including how to structure page layouts. You’ve learned the basics of HTML and how to scaffold the structure of the page. You’ve learned a lot about Git and how to work incrementally.
It is supposed to be hard - nothing worth doing isn’t hard. The learning is in the struggle - you’ve got this! 🙂❤️