Mª Elena Arocena López: @marocena26
In this repository you can find the files generated for the Front selection process for Create's.
The main objective is to develop a website according to a given design. This web application must have a responsive design that allows it to adapt to different devices.
NOTE: Direct link to the project by clicking on the following link
With a layout design as the starter point, the exercise consists on developing a web-site using the following elements:
- Sass
- Flexbox and CSS Grid
- Media queries
- Interactions with the user
The following requirements have to be respected:
- The layout consists of logo + menu + body with an aside on the right + footer.
- The font used is Arial, but if you want you can use one of Google Fonts.
- Logo.
- The
:hover
state they should have when you hover the mouse over them. If you want you can animate the transition as you like. - Desktop version (resolutions higher than 1024px).
- Tablet version (between 500px and 1024px).
- Mobile version (resolutions lower than 500px).
- Use the BEM methodology.
The following tools have been used when solving the project:
- HTML (with partials for an easier lecture and project organization)
- CSS/Sass
- Partials
- Variables, mixins and functions
- Flexbox
- CSS Grid
- Box model (size, padding and margin)
- Media queries
- Position
- Transition
- GIT version control
NOTE: You need to have Node JS installed to run this project.
- Go to github.com/your-user/name-of-project, clone it and do whatever you want, you can rename the repo, change the code, redeploy it to GitHub Pages...
- Finally and for everything to work properly, you must disable GitHub Pages and re-enable it so that GitHub generates the new URL correctly.
- Open it in your code editor.
- Open a terminal and install the local dependencies by executing in the command terminal. Here are the ones I used to start my project:
npm install
The project has to be started every time we start programming, to do this we will execute the command:
npm start
After running npm start
we can start editing all the files inside the src/ folder and program comfortably 💫