What is the project?

The fourth project of the Front-End Web Development program was the Web Style Guide. The Web Style Guide’s main focus was to gain understanding of how to use Sass/SCSS. Treehouse gave me the HTML file and CSS file and it was my job to compile the document into partials through Sass. The project should have atleast four component partials and all partials should be grouped together correctly in the SCSS file. Five color variables should be changed within the document and there should be one variable for a Media Query breakpoint.

Photo of my web guide project which has a white background and light blue text

How was it put together?

The first job I had for this project was to change the CSS file into SCSS. I created a new SCSS file and transferred all the CSS data into that new SCSS file. Then I transferred the CSS data into utility, component and base partials. Once that was complete I made sure the SCSS file was correctly linked to the partials and in the correct order so the HTML file looked the same as before. I then added a variable that represented a Media Query breakpoint and changed five colors on the page into variables. Finally, I checked to make sure everything was working properly and sent it to Treehouse.

What were the challenges?

I got the project back from Treehouse and had one minor error in the SCSS file. There was still a bit of data remaining in the file (the only data that should remain are the links to the partials). The remaining data were the images and Media Query breakpoint that needed to be put into the component partial. I made the quick adjustment to the component partial and sent it back to Treehouse which was then approved.

What did I learn?

In the web development world, many projects are much, much larger than the ones I have learned through Treehouse, which is why SCSS and Sass are very important in becoming a web developer. I learned how to turn CSS data into SCSS and correctly link partials to the SCSS and compile it back into a new CSS file so the HTML file can read it. I learned about variables and how they make it easier to group certain colors and elements on a webpage. This in the future will help me progress as I will be able to tackle larger projects and organize the CSS correctly.

View Project Page!

View Project on Github!