General Instructions > Part 1 > Part 2 > Submission
Part 2: Build and Test
Now that you’ve planned and researched, start writing your code! We recommend working in small pieces, making frequent commits so you can get back to a working version easily, and checking/testing as you go and again at the end of your project. Always keep an eye on your console and do your best to make it error-free. Here are some tasks that can help you work through the build and test part:
The next and final step will be to copy the link to your work and submit it.
Build your code: Task 1 of 3
Start with GitHub. If you don’t have an account on GitHub, please create one now as your project is required to be on a public GitHub repository in your personal account.
Build your file structure to start with, and don’t worry too much about having all your content in place. Just get your files in, basic, and make sure they’re working together. As a reminder, here are the requirements for Structure:
- A public GitHub repository containing your project
- An HTML document for the page
- A CSS document to style the HTML page
- A JavaScript file that retrieves data from one of several public API sources to display the data on your HTML page
- A README file that includes the instructions for running the webpage
Once you have your files built, start small with your API call. Just get one end-point to display on your page. Once the one end-point is working, you’ll be able to duplicate and revise your code to retrieve other end-points.
Make frequent commits. Committing your work often when you’re at a point of building that you know all your code is working makes it easier to step back to the most recent working version if you run into major problems. And speaking of…
Don’t forget to allow yourself time for running into errors and having to research problems that may arise along the way.
Test your site: Task 2 of 3
Testing your work should really happen at frequent intervals. Build some code, make sure it does what you want it to, build some more, check again. This is also why making frequent commits can be so important!
During building keep an eye on your console and terminal for any errors that arise and research how to resolve them as they come up. It’s easier to research one or two errors than get to the end and discover you have several errors to resolve.
When building is complete test your work and have friends test it out too! Sometimes you work so closely on your code, and have had the same idea in your mind from the beginning, you don’t take into account how someone else might interact with your page. Can they find the navigation easily? Do features work like they expect?
Do your best, and if there are some errors you just can’t resolve, do not worry or stress out too much. We know applicants will not always have perfect code – after all you came to us learn! If you had perfect code what would we teach you? Focus on making your project as close to how you want and expect to it look and perform as possible.
Double check your work: Task 3 of 3
Double check your work. Be sure the site has all the requirements (listed below) and that it looks/acts how you expect/want it to. Make sure that the link to your repository is accurate when you go to submit it, and that any and all code is merged to the main branch of your repository so there aren’t any changes you made that aren’t included in the main branch.
As a reminder, here are the project requirements:
STRUCTURE:
- A public GitHub repository containing your project
- An HTML document for the page
- A CSS document to style the HTML page
- A JavaScript file that retrieves data from one of several public API sources to display the data on your HTML page
- A README file that includes the instructions for running the webpage
CONTENT:
- Display the data for at least 2 of the end-points in the API
- Include navigation from each end-point’s page to the other end-points that are displayed
- Issue new GET requests for the linked data to display in the linked pages.
FUNCTIONALITY:
- Be sure that we can get the code to run without issues by following the instructions in the README file
- Be sure navigation between the different end-points behaves properly and is not slowed down by requesting more data than needs to be displayed
- Be sure your code is readable and well structured
- If including a user-interactive feature like a search field, be sure that you appropriately handle error cases
- Be thoughtful about what type of styling is used (example: font-sizes are not too small or large, colors are not too dark/light to be easily seen, etc.)
Remember: For building a front-end application, if you want to use an API that requires an API key, the API key should not be coded in your application logic (source code). It is bad practice and is a security risk. Your API key should be stored in an environment variable in an .env file. This would require the use of a build tool like Vite which programmatically injects the API key during the build process.
Congratulations! The hard part is done! Now, you’ll just need to copy the link to your work and submit it. Use the link below for instructions and the form to submit your work to us…
