This project was created during SENAI Full Stack Developer Course and the goal was to develop a website for a fictitious online store. The main idea was to practice the concepts learned along the class, such as building a structure with HTML5, applying style with CSS3, and using a web language such as Javascript for the interactivess.
During the development I could have a overview about a Front-End role, going through every phase:
First step was to understand the requirements and to create a low fidelity prototype for the main page. After that, I was ready to build the high fidelity prototype using Figma. It’s important to say that I also learned how to use media queries to make the page resposnive (adaptable for differetn devices, such as cellphones, laptops, and tablets).
The next step was to start creating the structure and style of the website using HTML5 and CSS3, based on the previous prototypes that I created. For this stage I learned about the grid system, rows, columns and divs to organize the layout. Bootstrap was a key tool in order to make this process a little easier and faster ☺️.
📄 Until this moment I had a few things accomplished in the project, and it can be seen here:
✅ I’ve created the index(home) page and 4 more pages applying HTML5
✅ I’ve improved the design of the website’s index page by applying the CSS3
✅ I’ve improved the design on other pages of the website, applying the CSS3
I’ve got the first part of the project done 🙌 But coming up next, I’d still need to implement the Javascript to provide interactivess to the website.
That’s when I started to learn about Document Object Model or DOM, a tool that creates dynamic HTML by changing its attributtes and elements. With it I could make the “menu” button and get the newsletter form working. Next I applied JQuery and Owl-Carousel to the products move without the user press any buttons.
Now, a few more steps were completed, as you can check here:
✅ I’ve applied responsiveness and Bootstrap to the pages
✅ I’ve applied features with Javascript to the index (home) page
✅ I’ve applied features with Javascript to other pages
✅ I’ve improved page functionality using Jquery
Final part was hosting the page using Github Pages, and have a quick view on how to use the Angular framework + some basic API’s. The complete prjoject can be found here and here.