HTML and CSS: Running with love 🧡

Hi there! My name is Manuela Inclán and I created this project based on a design provided by Zeplin. The website is responsive, pixel perfect, and built using flex and grid 🎨💻.

You can see it live here! 👉 running_with_love

I hope you like it! 😊

This exercise demonstrates that I have learned the following 📋:

General

• Use an appropriate file and folder structure for a web project, and properly link different files.
• Use version control with branches to manage a code project.

HTML

• Write perfectly indented HTML code.
• Create well-structured HTML code with correct syntax.
• Use appropriate HTML semantic tags for each piece of content.

CSS / Sass

• Write perfectly indented CSS code.
• Create well-structured Sass code with correct syntax.
• Use Sass features such as variables, nesting, and partials.
• Use CSS code that heavily utilizes class selectors, not tag or id selectors.
• Use English class selectors.
• Use the CSS box model appropriately to specify size, padding, and margins.
• Use text and background styles for different types of elements.
• Use flexbox appropriately to organize elements in flexible boxes.
• Use media queries to adjust designs to different device sizes.
• Use positioning to place fixed and absolute elements on the screen.
• Use CSS grid to place elements using a grid.
• Use CSS transitions to add dynamism to a web project.

Additionally, I focused on learning how to:

• Use animations 🎬
• Use mixins 🍹
• Use variables 💻

Tech 💻

Starring: Adalab Web Starter Kit - An amazing template that allowed me to use a local host, SASS, HTML Template Engines and gulp. For more information you may visit the Kit repository

Built with 🔨

• Visual Code Studio: as code editor
• HTML
• SASS
• GULP

Development ⌨️

To carry out this project, I followed the guidelines set by the designer in Zeplin. I sketched out a diagram with pencil and paper to organize myself effectively. This allowed me to think about the best way to divide the project into partials. I started the design with a Mobile First approach and then added the necessary mediaqueries to make the design adapt to different devices. I used SASS to style the project; I really like its nesting capabilities as it allows me to work in a more organized and efficient manner.

Want to take a look? 👁️‍🗨️

This is how my partials look like:

Want to clone my repository? 🐑🐑

Remember that this repository was done using the Adalab Web Starter Kit so I highly recommend to visit the link provided before running the proyect.

_{Node.js and Gulp are required}

After you clone the repository you must:

1. Install dependencies. You will only have to do this once.

npm install

2. Start the proyect. This must be done everytime you code and will open a local host that will update in real time

npm start

3. If as me, you happen to use GitHub Pages you may send your code to production using

npm run push-docs

_{PD: You will have to set your GitHub Page as master branch /docs folder. For Gulp installing you may run}

npm -g install gulp-cli

License

This project is licensed under the MIT License.