Go to  https://bubble.ioand create a new account on their website.

Watch this video to learn how to create your first "Hello World!" app in Bubble:

Copy the URL of your editor and paste it into the box below. It will look similar to this:
https://bubble.io/page?id=test-application-25847&tab=tabs-1&name=index

Copy the URL from your web app on the window where you are previewing it and paste it into the box below.
The link will look similar to this:

https://test-application-25847.bubbleapps.io/version-test?debug_mode=true

Join the Refcode Slack workspace using this link:
https://join.slack.com/t/refcode/shared_invite/zt-6q9vg5hj-mH1em3mLYRmyL51nCbuT2g

You may remain a member of this community for life. We hope you'll connect with friends, ask technical questions, and support each other using this chat group.

Have your portrait taken in front of the Refcode banner.

Download your portrait fromhttps://internal.refcode.organd then follow these instructions to update your Slack profile photo with it.
https://slack.com/help/articles/115005506003-Upload-a-profile-photo#:~:text=Tap%20your%20profile%20picture%20at,upload%20one%20from%20your%20device.

Everyone goes by different names in different contexts. The instructor goes by "Brenton Strine in a professional context. At home, he goes by "Dada." And friends he knew in elementary school call him "Brent."
Many immigrants have different versions of their names due to adjusting to make it easier for Americans to pronounce, or mismatch between the expected order of surname, given name, and family name.

In a professional context, it's very important to always use thesame name. If you use different names, then you may have a hard time building professional network, and you may miss job opportunities due to confusion around who you are.

Refcode is the beginning of your professional journey, so please choose the name that you'll use in a professional context, and stick to it from now on.

Input the name you will go by in the box below.

Ensure that your profile is the same between Slack and internal.refcode.org.

Please input the code word you received in class to prove you attended week 1!

OverviewBuild the components of the reference page exactly, to the pixel.

Details

• The boxes are 100px square, with 20px margins.
  
• Boxes have a 1px wide dashed border colored #000000
  
• The blue box has color #14d4fa
  
• The green box has color #aafa14
  
• The orange box has color #fabd14
  
• The boxes are in a row, and "wrap" when the page size changes
  

Tips

• Start by building your first box, then copy and paste it.
  
• Once you have the 3 colored boxes, copy and paste all three.
  

Reference Page
https://hamburger-expander.bubbleapps.io/version-test/pixel-perfect-1

Solution Video
Dynamic Box Creation 🎨 - Watch Video


Solution Bubble Editor
https://bubble.io/page?id=hamburger-expander&tab=tabs-1&name=pixel-perfect-1&type=page

Link
Paste the link to your exercise (in Preview mode) in the box below.

OverviewIn this exercise, you will build a page that allows you to expand a hamburger by clicking on it.

Details

1. Show the collapsed burger at the center of the page.
   
2. When the user clicks on the burger, they see an expanded burger.
   
3. When the user clicks on the expanded burger, they see the collapsed burger again.
   
4. Use a fixed aspect ratio to ensure the images are not stretched.
   

Image Assets (for download)

• Collapsed Burger(suggested display: 100px wide)
  
• Expanded Burger(suggested display: 290px wide)
  

Reference
https://hamburger-expander.bubbleapps.io/version-test/hamburger-expander

Solution
Building a Hamburger Expander 🍔 - Watch Video


Solution Bubble Editor
https://bubble.io/page?id=hamburger-expander&tab=tabs-1&name=hamburger-expander&type=page&subtab=Plan

Link
Paste the link to your completed exercise (preview mode) in the box below

Build a two-column layout, with each column taking up an equal portion of the screen.
Reference page
https://hamburger-expander.bubbleapps.io/version-test/layout-1

Solution
Solution - Columns - Watch Video

OverviewLet's create two hungry monsters - one likes to eat healthy and the other does not like vegetables.

Details

• The setup involves a layout with three columns: one for emojis, another featuring a purple monster, and a third with an orange monster.
  
• An option includes the states of the mouth which is linked to a state on the index.
  
• Monsters default to closed mouths and cycle through mouth states by adjusting the middle image height.
  
• Monsters react with different mouth states depending on the food item clicked.
  

Tips

• To get the emoji keyboard: Windows + Period (Mac: Control + Command + Space).
  

Image Assets (for download)
Orange Monster Top
Orange Monster Middle
Orange Monster Bottom
Purple Monster Top
Purple Monster Middle
Purple Monster Bottom



Reference
https://hamburger-expander.bubbleapps.io/version-test/open-wide

Solution Bubble Editor
https://bubble.io/page?id=hamburger-expander&tab=tabs-1&name=open-wide&type=page&subtab=Plan

Link
Paste the link to your completed exercise (preview mode) in the box below

OverviewBuild social media tags with their logo and name

Details
Create 5 badges with different social media icons. It should contain 5 distinct social media icons and use the following paddings -top: 4px, bottom: 4px, left: 10px, right: 10px.

Colors for icons
Facebook - #1877F2
Instagram - #E4405F
Linkedin - #0A66C2
X - #000000
Dribble - #EA4C89




Reference Page
https://tiny-refcode-bubble-bootcamp-fall-2024.bubbleapps.io/version-test/pixel-social-icons

Solution Video
Search Icons Exercise 🎨 - Watch Video


Solution Bubble Editor
https://bubble.io/page?id=tiny-refcode-bubble-bootcamp-fall-2024&tab=tabs-1&name=pixel-social-icons&type=page

Link
Paste the link to your completed exercise (preview mode) in the box below

Build a grid displaying numbers and has spacing around it


Reference Page
https://tiny-refcode-bubble-bootcamp-fall-2024.bubbleapps.io/version-test/layout-grid

Details
The grid needs to be 3 columns and any number of rows. The grid needs to display data from the database. Set a datatype calledNumberand a field calledvalueand create some data in your database which will be used for your grid.

Tip
Get a quick overview of databases to help you in your exercise
Understanding Databases in Bubble - Watch Video


Solution
Solution - Grid - Watch Video


Solution Bubble Editor
https://bubble.io/page?id=tiny-refcode-bubble-bootcamp-fall-2024&tab=tabs-1&name=layout-grid&type=page

Link
Paste the link to your completed exercise (preview mode) in the box below

OverviewCreate an app that searches through countries.

Details

• This app will consist of a search box (top) and a repeating group (bottom).
  
• You'll need to create a data type called "Countries" and create several countries in the database with the name and flag emoji.
  
• When you type a country's name in the search box, it will search through the repeating group and display the corresponding results.
  

Reference Page
https://tiny-refcode-bubble-bootcamp-fall-2024.bubbleapps.io/version-test/pixel-search-countries

Solution Video
Building a Country Search Feature - Watch Video


Solution Bubble Editor
https://bubble.io/page?id=tiny-refcode-bubble-bootcamp-fall-2024&tab=tabs-1&name=pixel-search-countries&type=page

Link
Paste the link to your completed exercise (preview mode) in the box below

OverviewYou'll create a card where I can see a title and some iconswhen hovered.

Details

• You'll create a main group with an image as its background.
  
• Inside that main group, you'll add another group with a darker background color that contains the title and icons.
  

Tips

• You can make a group's background color more transparent by lowering the percentage value next to the color code from 100%.
  

Reference
https://tiny-refcode-bubble-bootcamp-fall-2024.bubbleapps.io/version-test/pixel-preview-mobbin

Bubble Editor Solution
https://bubble.io/page?id=tiny-refcode-bubble-bootcamp-fall-2024&tab=tabs-1&name=pixel-preview-mobbin&type=page

Link
Paste the link to your completed exercise (preview mode) in the box below

OverviewLet's create a signup page



Reference Page
https://tiny-refcode-bubble-bootcamp-fall-2024.bubbleapps.io/version-test/layout-auth

Solution Bubble Editor
https://bubble.io/page?id=tiny-refcode-bubble-bootcamp-fall-2024&tab=tabs-1&name=layout-auth&type=page

Paste the link to your completed exercise (preview mode) in the box below

OverviewCreate layout for your portfolio



Reference Page
https://tiny-refcode-bubble-bootcamp-fall-2024.bubbleapps.io/version-test/portfolio

Solution Bubble Editor
https://bubble.io/page?id=tiny-refcode-bubble-bootcamp-fall-2024&tab=Design&name=portfolio&type=page

Link:
Paste the link to your completed exercise (preview mode) in the box below

OverviewAdd a page to add projects to your portfolio



Reference
https://tiny-refcode-bubble-bootcamp-fall-2024.bubbleapps.io/version-test/portfolio-add

Solution Bubble Editor
https://bubble.io/page?id=tiny-refcode-bubble-bootcamp-fall-2024&tab=Design&name=portfolio-add&type=page&wf_item=bTNGU

Link
Paste the link to your completed exercise (preview mode) in the box below

OverviewAdd a sign-up/login page to your portfolio and update navigation to signup and login. See demo portfolio for navigation functionality.



Reference
https://tiny-refcode-bubble-bootcamp-fall-2024.bubbleapps.io/version-test/portfolio-sign-up
Solution Bubble Editor
https://bubble.io/page?id=tiny-refcode-bubble-bootcamp-fall-2024&tab=Design&name=portfolio-sign-up&type=page&wf_item=bTNJs1

Link
Paste the link to your completed exercise (preview mode) in the box below

Create a dashboard layout


Reference Page
https://bubble.io/page?id=tiny-refcode-bubble-bootcamp-fall-2024&tab=Design&name=layout-sidebar&type=page&wf_item=bTNJs1

Paste the link to the "preview mode" of your Portfolio website in the box below.