Simple one page website to practise HTML and CSS skills | free the Awwwesomes psd template used
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
images
js
sass
.gitignore
README.md
gulpfile.js
index.html
package-lock.json
style.css

README.md

we_create website

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

technologies used:

  • 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)

personal learnings:

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

we_create_mockup


check my other projects

Kate

#kasiaikod