Demo project at Red Academy, while teaching Javascript, jQuery and SASS/CSS. Mobile-first responsive website calling NY Times API to retrieve latest news articles according to user's selected dropdown category.
https://mbborromeo.github.io/instanews-nytimes
- 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
- Understand the project requirements and design mockups
- 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)
- 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
- Add improvements, fix any bugs, add extra functionality
- Ensure your README.md file includes project description/features, technologies used, installation instructions, things still to do/improve on
- possibly pin header to top
- on mobile landscape view, make image/article take up full-width