Sunnyside Agency

Sunnyside Agency is a common front-end responsive project that many developers worked on. I did it during my Junior Developer Bootcamp at Becode.org.

Though you can find many tuts to help, I chosed to use the knowledges I developed during this training.

Result

click Here to see the result.

Goals

The point is to manipulate semantic HTML5 and pure CSS (with BEM & SCSS syntax compiled with Sass tool) to create a responsive landing page.
I added a little script (Vanilla JS) to handle the toggling mobile burger menu.

Languages and tools

• Vite

• Git & Github

  • Working in local + remote
  • Branches
  • Commits
  • gitignore

• HTML

  • Semantic
  • attributes
  • indentation

• CSS

  • Use of Figma template
  • SCSS with BEM syntax
  • Sass compiler
  • normalize/reset
  • selectors (nested elements, children, pseud-elements, pseudo-classes)
  • svg icons
  • Flex-box (+ Grid) model

• JavaScript

  • Toggle function (for mobile burger nav)
  • Animate on Scroll library

Note

I used the Vite front-end build tool. Not that it's that relevant in this case but I wish to make its use a good habit.