Skip to content

Instantly share code, notes, and snippets.

@nwalberts

nwalberts/bt2-half.md

Created August 18, 2023 17:10
Show Gist options
  • Save nwalberts/cea75ba73ab53ad216579533fb30a15f to your computer and use it in GitHub Desktop.
Save nwalberts/cea75ba73ab53ad216579533fb30a15f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bt2-half.md

Now approaching the weekend break, it's time to think about and plan what to tackle while working solo for you to be the most successful.

Getting Started

et get breakable-toy-deliverable-2-half

In this assignment, we ask that you make a plan before leaving for the weekend to organize your approach while you work independently until Monday.

What to Submit

Read through the suggestions below of things you can work on if you get stuck this weekend. Using the planning.md please submit ideas of what you plan to work on, and fallback plans if you get stuck on a feature. There will be times that arise on the job where you can't get immediate help, it's important to have plans for what you can do in the meantime! Try to be as descriptive in brainstorming your planning - if you're going to look at webpages for inspiration, which ones?

  • Please tell us what features from breakable toy deliverable part 2 you have finished (plus any new ones that have been added)
  • What unforeseen roadblocks and challenges have you faced?
  • Have you been working effectively and with good time? If not, what can you do better next week?
  • What are your priorities next week?
  • What challenges do you expect to face next week?

Organization Tips

  • It's not always wise to focus on the most interesting or most complicated features first. APIs integrations in particular can lead you down a rabbit hole.
  • Get the core CRUD of your app out of the way now. It will be easier to integrate later unless your app heavily relies on a particular API.
  • Timebox: stuck on a feature? Set a timer for 15mins, if you are still stuck, its time to switch to something else
  • Take notes: particularly so that you can come in on Monday with questions and asks for guidance

Styling

Styling your app is great to work on solo in that it typically doesn't require assistance debugging, rather trial and error with some research until it looks how you want it. Even without many features built yet, here are some styling things you can explore:

  • color scheme: (60-30-10 color ratio) - the biggest mistake we usually see is TOO MUCH color. Unless you have a more niche aesthetic planned, the most common color on your website should be white, with a primary color and secondary color used for things like your navbar, buttons or other accents
  • Custom Font: while not necessary, using an interesting font, perhaps provided via Google Fonts, adds a personal touch particularly to header elements or your logo text
  • icons: fontawesome, in addition to other icon websites can provide small but high value improvements to your UI
  • style your top navigation bar: accordian/burger menus, navigation assitance or even a search bar
  • style your user forms: most forms are too wide. ensure that your form fields are only as wide as they may need to be based on the input. Adding padding to ensure elements aren't crowded, and consider centering the form
  • refer back to the styling articles for additional tips

Landing Page / About

A landing page and/or an About section are a nice additions to your application for visitors to learn about the app, some of the features, even the creator. These pages could be made using static templates like handlebars, since they are primarily rendering bodies of text, or you could create React components.

To get started, you can visit webpages for companies and apps you use for inspiration. With lot's of text, we need to be creative in presentation to capture the attention of visitors without overloading.

Landing Page

  • uninformed users should be able to understand what your application is about right away
  • keep any text concise
  • at least one image is highly suggested

We like the landing page of https://www.blueapron.com/ in particular.

About Page

  • keep your about page concise
  • explain that this is your portfolio building project
  • list standout technologies
  • list future dream feature
  • provide links to your linkedin and github profiles (use Github and LinkedIn icons as links)

Explore API

If there is an API you're planning to use and you haven't explored it already, here are some things to get you started:

  • sign-up and apply for the API key
  • read the documentation to find how to make requests
  • refer back to the Interacting with a Third Party API exercise
  • make sure to use Git branching and create a new branch before trying to integrate the API
  • start with simple requests, such as mimicking the documentation example
  • consider what data you want from the API response, what data to filter out, and what data is missing that your users or another API may need to provide so that your app delivers on its promises
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment