Mobile-first responsive website calling NY Times API to retrieve latest news articles according to user's selected dropdown category.
- Javascript
- jQuery AJAX method
- NY Times API call
- HTML5 Semantic tags
- SASS/CSS3
- Gulp
- NPM
npm install
To run on your localhost (http://localhost:3000/)
gulp
- Read & understand the Project Requirements (https://red-wdp.herokuapp.com/project/project-03/)
- Set up project in NPM and ensure a package.json file is created
- Set up Git source management including .gitignore and README.md files
- Install Gulp so SASS can compile
- Develop draft CSS layout using static images/content as a placeholder
- Convert CSS to SASS syntax for better style management
- Implement mobile-first Responsive Web Design techniques using CSS/SASS Media Queries, and pay attention to breakpoints decided in Mockup Design provided in project brief/requirements
- Implement jQuery AJAX call to NY Times API to pull actual content
- Use Javascript/jQuery to dynamically create HTML elements by using control flow (conditionals and for-loops)
- Cater for edge-cases, and test these in the browser console (if an article doesn't have an image, don't display this article)
- Edit your SASS styles to suit dynamically created elements if necessary
- Test your website on multiple browsers and devices, and fix if need be
- Continually save and commit your work in Git (all work on a single commit should be related to one feature/improvement/fix)
- Once you've achieved the mandatory functional requirements, clean up your unecessary code, unclear comments, or un-needed console.logs
- W3C Validate your HTML and CSS syntax, and fix errors if necessary
- Use HTML5 semantic tags to imply meaning and add more importance for SEO and Accessibility
- Check the Project Requirements again to see if you have covered all the mandatory tasks
- Save/commit your work again, and put it aside as a version you can submit
- If you have time, attempt some Stretch Goals from the Project Requirements
- Ensure your README.md file includes project description/features, technologies used, installation instructions, things still to do/improve on
- Submit your work before the deadline
Note: Remember you can always go back and revisit things in your own time, and you will also have a chance to re-submit before the end of the program. Professional Web/Software companies always release a newer version or an update, so it is a normal part of the process to not get it 100% perfect the first go, and to break things up into stages/releases focusing on mandatory functionality as a priority.