Advanced front end web development

Really you need to do three things in this assignment:

Build a responsive UI using HTML and CSS
Implement suitable functionality using JavaScript (this must include the use of Ajax).
Demonstrate understanding of advanced tools, techniques and approaches.
My advice is to do (1) and (2) first and then re-write your code to do (3).

Heres a possible work flow:

A key requirement is Ajax. Do this first.

Have a look at week 9, do some research, make sure you understand what Ajax is.
Next think about your data.
Are you using an API?
If yes, have a look at the documentation, you may have to sign up and get a key, understand how the API works before writing your own JavaScript.
If you arent using an API create an example JSON file. Dont make this too big, four or five objects will be fine to start with. Paste your JSON code into https://jsonlint.com/ to make sure you have constructed it correctly.
Now have a go at loading your JSON data using JavaScript.
Remember you will need to use a web server.
Use the examples in Week 9 to guide you
Now think about how you can use this data to actually build an app. If you look at week 10 and the link to simple-app-architectures there are some examples you can modify for the assignment. The easiest ones to work with are passing-data-querystring and passing-data-web-storage. Get these examples to work but use your data.
Now think about the UI.

Start a new project, separate from your JavaScript work.
Build a static (HTML and CSS only) version of your website.
Make sure the site is usable across a number of different screen sizes, and especially on mobile.
Dont get too perfectionist, CSS and design will suck your time away.
Integrate you work from (3) with your work from (2) and you should have the basis for a good app.

Now think about the tools, techniques and approaches.

Here are some examples of things you could do:
Re-write your CSS using a CSS methodology
Instead of relying wholly on your own CSS, use a CSS library to style some aspects of your design
Implement techniques to optimise page speed performance
Use a mapping library to show data on a map
This list isnt exhaustive, it is up to you to choose suitable tools, techniques and approaches. My advice is to focus on one new approach at a time, and to use the technology properly e.g. if you simply change a couple of CSS selectors to use BEM, it doesnt really show understanding.
You will get a much higher mark if you use a limited range of tools, techniques and approaches and show you really understand them, rather than using a wide range of techniques superficially.

Keep experimenting with using different tools, techniques and approaches to build a better assignment piece. Make sure you give yourself enough time to do the final piece of written work.

You can leave a response, or trackback from your own site.