Working On My First Projects (would love some feedback)
Tags: beginners, codenewbie, webdev, portfolio
Published: 2021-03-04 20:24:13

Hello! Recently I completed the Responsive Web Design Certification on freeCodeCamp and on this post I want to show you the projects I built, as well as some of my thoughts and things I learned in the process.

**Alert:** Please bear with me, I'm sorry if at one point I don't use the proper terminology.

### #1 Project: Tribute Page

For this one I chose Grace Hopper.

![Tribute Page by Maru](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cp7e3uimargy6styoe8p.png)
[CodePen link](https://codepen.io/marugy99/full/abmrXxB)

**Thoughts:**

- I had a very vague idea of the design I wanted, so I had to play around with the fonts and colors for a while until I was happy with the result.

- To accomplish the dark background I wanted for the "Early life" section I learned that I could add `margin: 0` to the `body`, so the background color could cover the whole section.

- Initially I had added `width: 100vw` to the Early Life section, thinking it would help me have the (full width) dark background I wanted, but instead, this added a horizontal scrollbar, which was so annoying! Of course this took me a hot minute to identify and several hours reading forums. Solution: just removing the `width` property, it wasn't necessary.

### #2 Project: Survey Form

The topic I chose was "Work Burnout"

![Survey Form by Maru](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hu86bhnwacbiw6b8hgd2.png)
[CodePen link](https://codepen.io/marugy99/full/poNvJVr)

**Toughts:**

- I think the most challenging part this time was to style the form controls. This was a whole new world for me.

- I learned about `box-sizing` and its importance when styling block elements.

- I learned that for vertical alignment (`align-items`) the parent container should have a defined `height` property and in order for the margin-auto technique to work it needs a defined `width` property, but it can't be 100% (duh).

### #3 Project: Product Landing Page

For this one I did take the time to pick the colors and even design a very simple logo, this saved me A LOT of time.

![Product Landing Page by Maru](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2nwbpbeay7knhurb0xrk.png)
[CodePen link](https://codepen.io/marugy99/full/rNWeqPx)

**Thoughts:**

- I learned that less is more. Sometimes I come up with some very complicated (and unnecessary) ways to display the layout I want, and then it turns out that with just a few lines of code I can still get the desired result.

- I learned how to add CSS icons, specifically Font Awesome's icons.

- I learned about grouping selectors and its importance.

- The one issue I was not able to figure out was how to make the `iframe` responsive, but overall, I feel very happy with the final result.

### #4 Project: Technical Documentation Page

I had a lot of fun with this one. The topic I chose was CSS Flexbox.

![Documentation Page by Maru](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fyvba63zjmp4s218v4df.png)
![Documentation Page by Maru](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ctffbzgi2s0om4vyhxi4.png)
[CodePen link](https://codepen.io/marugy99/full/zYoZYXG)

- The first challenge I had was to create the stationary sidebar, I didn't want to use `position: fixed` so I learned more about `position: sticky`.

- I also learned about overflow and how using the `auto` property helped me accomplish the layout I wanted.

- I tried to use `position: absolute` to place the "Made by Maru" at the bottom of the sidebar, which worked at first. However, since this removes the element from the regular flow, it was overlapping with the menu when I resized the window vertically so I decided to leave it on its original position.

### #5 Project: Personal Portfolio

![Personal Portfolio by Maru](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d794bm6tlkas3og3fwrz.png)
[CodePen link](https://codepen.io/marugy99/full/OJbQaqa)

**Thoughts:**

- This one is actually the second version of the original project I submitted for freeCodeCamp.

- For the progress bars I used some CSS I found online, it's not the best way to do it but for now it gets the job done.

- I struggled a lot with media queries on this project, I wanted the mobile version to look good but I think I still have to do some research about this.

- Overall, despite the things that I want to improve, I really liked it!

- In the process of working with these projects I discovered Figma and I've been using it ever since.

If you made it this far, thank you so much for reading! I would love to receive some feedback too 🤓