An open API service indexing awesome lists of open source software.

https://github.com/marceariel99/greenvesting-web

Webpage to showcase what I've learned about HTML and CSS
https://github.com/marceariel99/greenvesting-web

bootstrap css css3 frontend html html5

Last synced: 2 months ago
JSON representation

Webpage to showcase what I've learned about HTML and CSS

Awesome Lists containing this project

README

          

Greenvesting

This project was developed as part of my frontend learning path. This was my first approach to HTML and CSS.

### Languages and tools


HTML 
CSS 
Bootstrap 
SASS 

## Links of interest

- [GitHub pages deployment](https://marceariel99.github.io/greenvesting-web/)
- [Server deployment](https://greenvesting.netlify.app/)

## What I've learned

- HTML5 file structure, common tags, pages linking and SEO optimization
- CSS3 common properties, box modeling, types of selectors, pseudo-classes, flexbox, grid, responsive design and animations
- Bootstrap integration with CSS3, common components and responsive navbar integration
- SASS nesting, partials, variables and mixins
- File size and type optimization for web

### Some insight into development

- As this is my first project using HTML and CSS I started the development using vanilla HTML5 and CSS3. Then I worked my way around integrating Bootstrap and SASS.
- I took a desktop-first approach to make the site responsive as it was the most straightforward way when starting. However, I'm considering using a mobile-first approach for my next project.

## Why Greenvesting?

When I was starting the project I thought that it would be nice to do the webpage about something exciting to me. Environmentalism and investing are two concepts that I find interesting, and are often seen as incompatible. I think they are not, so I created this fake investing crowdfunding company that accepts small and big investments to be directed to green energy projects.

![Banner](https://user-images.githubusercontent.com/60658991/199740685-35deef4b-6fb2-4cca-b36b-d535ec91f081.png)