This project one-page html-css only website is to practise my HTML and CSS skills.
- The project has been started on Canada Learning Code workshop, 17.02.2018 and developed since then.
- psd file by The Awwwesomes
- SASS partials
- Gulp task runner
- npm install, gulp-sourcemaps, gulp-eslint,gulp-uglify, gulp-cssnano, gulp-prettyerror, gulp-rename, browser-sync(check, why it is not working at my comp)
- CSS grid and flexbox
- page smooth scroll with jQuery cdn (check, if CSS property scroll-behavior has better browser support and try to implement it: link to mdn doc)
I wanted to make this one page site responsive with mobile-first approach. All the CSS styling is written for three screen widths: mobile, min-width:620px and min-width:1080px (sass mixins used). Please let me know, if you find any responsivness issue.
📌 to-do: validate, check accessibility and performance;
📌 to-fix: ~~waves svgs; should they be html img tags or background properties - what's better for posisioning~~~ as sugested by @aroerick I used transform:translateY and it worked ❓
Kate
#kasiaikod