Week 3 Report
Currently in the progress of developing a Front-end Application for my student project exam. I am now in week three, and will take you through the process.
This week i have been doing:
– Semantic HTML5
– Making sure it is accecible
– Making respsive design and styling components.
Setting up the development envoriment.
- Seperate folders for images, css, js
- 4 HTML pages, root folder
. ├── css | ├── main.css | └── normalize.css ├── design | ├── design.md | └── spesifications.md | └── styleguide.md ├── docs | └── report.md ├── sass | ├── base | ├── _mixins.scss | ├── _reset.scss | ├── _variables_.scss | └── components | ├── _buttons.scss | ├── _grid.scss | ├── _layout.scss | ├── _navigation_.scss | ├── _sections_.scss | ├── _typography_.scss | └── main.scss | ├── scripts | ├── leaflet.js | └── map.js | └── script.js | └── valdidation.js ├── about.html └── contact.html └── gallery.html └── index.html └── launches.html └── news.html └── readme.md └── styleguide.html
- Set up folder structure, and files
- Use of consistent and semantic code
- Colors and design principles
- Responsive typography
– Wrote documentation in Markdown for GitHub
– Updated Trello acroding to progress
Building compentents in the browser
I have been buildig Components in the browser using SASS to make my code more maintainable. I had to do some reading on how to set up a SASS project, but i got the syntax pretty quickly. I have mostly been using it for the use of variables.
Check out the stylesheet live on CodePen:
I have been testing the following Liberary for production.
- [https://leafletjs.com/] – Leaflet JS is Open Source Map for the about page.
- [https://p5js.org/] – For data vizualization.
I have also been setting up for use of APIs