DEV Community

loading...
Cover image for Working On My First Projects (would love some feedback)

Working On My First Projects (would love some feedback)

Maru
Aspiring to become a Web Developer and documenting my journey πŸ€“
・3 min read

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
CodePen link

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
CodePen link

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
CodePen link

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
Documentation Page by Maru
CodePen link

  • 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
CodePen link

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 πŸ€“

Discussion (46)

Collapse
flexonze profile image
FΓ©lix

These are great! Honestly. But, since you want some feedback, here are some of my thoughts on each project:

#1 Tribute page

  • I like it!
  • I feel like it could use an accent color (It wouldn't have to be flashy) since only black and white looks a little bit too sober in my opinion.
  • I think the sections could use a bit more padding-bottom to equilibrate with the padding on top.

#2 Survey form

  • This one is very cute πŸ˜„
  • Nothing negative to say about it. It's simple, very responsive, colors are nice. Great job!

#3 Product landing page

  • I really enjoy the colors
  • Small detail: The button could change color when hovering with the mouse and the cursor could change to a pointer. Something like:
.button:hover {
    background-color: #EFA23C95;
    cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

#4 Technical Documentation Page

  • This is my favorite one. It looks very professional. I am impressed πŸ˜…

#5 Personal Portfolio

  • Again, this is very nice.
  • Simple, yet effective.
  • Great colors.

General thoughts
I like the fact that you took the time to reflect on what you've learned while making theses. I also like the fact that you went out of your way to make this post to ask for feedbacks. I think these are great ways to improve. Keep it up! πŸ‘

Collapse
marulucenat profile image
Maru Author

Wow, thank you so much for taking the time to write a comment about each one of the projects, I really appreciate it.

Also, thank you for the feedback, I definitely need to work on making them more interactive, that's why I'm very excited to learn JavaScript and be more creative.

PD: The documentation page is also my favorite one πŸ˜…

Collapse
icecoffee profile image
atulit023

Color theme in the second project is just astounding.

Collapse
muditwt profile image
Mudit Mishra

Hi Maru, you have done some awesome work. Especially your projects 3 and 4 are really well designed. I am also doing FCC responsive web design course (currently on module 3) hoping to make cool projects like yours.

Collapse
atulcodex profile image
Atul Prajapati

You can bro!

Collapse
muditwt profile image
Mudit Mishra

😁

Collapse
marulucenat profile image
Maru Author

Hi! Thanks a lot, good luck with your certification. Once you build your projects I would love to check them too πŸ€“

Collapse
muditwt profile image
Mudit Mishra

Thanks. Yeah sure, as I am inspired by you I will post about it here😊

Collapse
devlorenzo profile image
DevLorenzo

Cool! Sonos todos muy bien hacidos!
Se puedo permitirme pienso que deberia hacer sitios mas interactivos. Por ejemplo el portfolio podria tener mas :hover effect quando el user pasa su mouse sobre los elementos (como el logo - cambio de color, Maru - la linea que se mueve, los dos botones que ce animan, con una inversion de colores por ejemplo...)

Collapse
marulucenat profile image
Maru Author

Estoy de acuerdo! Es algo que debo aΓ±adir para que sea mΓ‘s interactivo.

Gracias por su comentario :)

Collapse
devlorenzo profile image
DevLorenzo

AsΓ­ que te aconsejo que no lo pongas en codepen sino que lo hace "hostar" (no sabe come ce dice en espanol).

Collapse
devlorenzo profile image
DevLorenzo • Edited

Another thing to notice reviewing the various links.
El segundo, "survey form", no te pone de ninguna parte quando selectiona el link. Pienso che serie mejor que simplemente pone un mensaje "Es un test, los datos no son registrados" o que hace una pequena animation y que anula el href con un prevent default. Si quiere he escrito un articolo sobre esto.

Error image

Collapse
marulucenat profile image
Maru Author

Gracias por la observaciΓ³n, es cierto. No sabΓ­a cΓ³mo arreglar eso asΓ­ que verΓ© el artΓ­culo πŸ€“

Saludos!

Collapse
devlorenzo profile image
DevLorenzo

No dudes en preguntar si tienes algunas preguntas.

Collapse
gioelefrapolli profile image
Gioele Frapolli

To start off I would say that for an aspiring web developer you did a great job overall on all 5 projects you showed here.
They all have a pleasant look, great colors, they're easy to navigate and they seem to adapt well on mobile πŸ‘.



More in depth:

#1. Tribute page
I like the B/W choice here, it gives that feel of history (very personal opinion though), it is very well summarized and moreover there's a link to a more in depth article at the bottom for those who want to learn more about the topic.
I would have personally fixed the navigation bar at the top, like you did for your 3rd project, and maybe increased the font by a couple pixels.

#2. Survey page
Like others that left a feedback I don't have much to say about this project, it is very well put together, nice colors, easy to understand and heck it even has required fields checks. It is good looking on mobile too πŸ“±.
If I really must point something out is that I did a quick test for accessibility and it showed for example some of the colors you have chosen as foreground did not pass the WCAG (Web Content Accessibility Guidelines) for the color ratio with the background they have. I did't go in depth on it but I guess it was the gray color of the placeholder text for the input fields that is too light, which usually it is like that by default so I'm not sure.
And please, please, please, take it as an advice for the future not a critique or something you did bad, I just think it is important to be aware of accessibility and to adopt it at the beginning of each and every new project.

#3. Product landing page
Again wow, I would buy for sure a product with a landing page like this one.
It goes Straight to the point, it is easy to understand and summarize the key values of the product.
Here I would have personally collapsed the navigation bar as an hamburger menu on mobile.

#4. Technical documentation page
I love the initial page that's supposed to give a quick hint on what the documentation is about. Like all your projects it is nicely done and well put together.
Within this project I would collapse the buttons into images, like twitter, or again create some sort of hamburger menu on mobile because you can see the text struggling to stay within the menu boundaries, especially with small screens. Might also add smooth scrolling effect when clicking the "Getting started" button, I think it would be a nice added bonus.
Also I would have some lines between each topic to visually have a break between them, for example like this one:


#5. Personal portfolio page
I will just say that it is well balanced. Not much text, only the essential information is shown for each section of the page and some external links to other personal profiles are provided for those who are interested.
Again I would implement some collapsed menu for the mobile but here I want to say that's just a personal preference because even on small screens it fits very well and it is pleasant to see.
If you plan to use this as your portfolio, I would suggest you to implement a contact form instead of directly displaying your information on the page. I think it is a better solution that adds a privacy layer, even if a little one, between you and anyone who contacts you for the first time. I saw you're still intensively learning javascript so there's time for this last tip and I'm sure you already took it in account.



⚠️ Of course I can't stress this enough, my feedback is purely made of tips and/or improvements that might be useful to you and by all means are not meant to diminish your work and/or to correct it in any way using either the "I'm right, you're wrong" or the "I'm more experienced so I'm right" mindset.

Keep up the great work you're doing and don't stop learning, it is a wonderful thing.

Collapse
marulucenat profile image
Maru Author

I can't tell you how much I appreciate the fact that you took the time to write recommendations about each one.

About the second project, thank you for pointing out the issue with the color ratio, it is something that does concern me, in the future I really want to make sure my websites are accessible for everyone.

I really wish at that time I knew how to make a hamburger menu because I totally agree it would have looked better (I'm learning how to do it now).

I assure you I will take all of your recommendations into account as I continue to learn more and slowly add improvements to the projects 😊

Collapse
milg15 profile image
Maria Isabel Lopez

Oh I love it <3 They are all so cute <3 Sigue practicando!! Mis primeros proyectos fueron tambiΓ©n con free code camp y aprendΓ­ un montΓ³n! Mi tip por ahora es inspirate mucho en otros sitios por ahora en interacciones, dise'o y ve que cosas te atraen mas. Esperoe estes increible y suerte en tu journey!

Collapse
marulucenat profile image
Maru Author

Muchas gracias! Me parece un muy buen consejo 😊 definitivamente es algo que haré. Saludos!

Collapse
dreamcreatordev profile image
ryanB • Edited

I like your projects, I completed the fcc web section but not the last couple projects. Your projects compared to my very minimal gray colored flat but "passing" projects really show how each project can vary by whomever makes them. These look very polished on the front end.

Collapse
shonhomez93 profile image
Shon

How long have u been coding Maru?

Collapse
marulucenat profile image
Maru Author

I've been studying on my own for almost a year, I wandered a lot (going from one course to another) because I couldn't decide on a "path". However, this was my first time actually building projects, each one took me a week approximately

Collapse
shonhomez93 profile image
Shon

They say the best way to learn is too build. I am 2 months in and i have built a few projects to practice as well

Thread Thread
marulucenat profile image
Maru Author

Totally! It also helps you determine your path, if you enjoy what you're building it means you're on the right track :)

I would love to check your projects too

Thread Thread
shonhomez93 profile image
Shon

I want to put them on codepen but they are not responsive yet. Do u have code sandbox?

Collapse
tankerguy1917 profile image
tankerguy1917

I think it looks good. The colors and other aesthetics are very nice and inviting, if that makes any sense. Also, the layout of everything is pretty good, not distracting, and not boring at the same time. Lastly, its better than anything I can do.

Collapse
marulucenat profile image
Maru Author

Thank you for taking a look at them! I'm sure you can do a good job too, just try it! At first, I was very scared but you learn a lot in the process.

Collapse
cigwe416 profile image
cigwe416

this is great. Keep it up

Collapse
marulucenat profile image
Maru Author

Thank you! πŸ€“

Collapse
onkar444 profile image
Onkar Raut

That's some cool stuff with programming πŸ”₯πŸ”₯

Collapse
hasnaindev profile image
Muhammad Hasnain

Cool.

Collapse
tilkinsc profile image
Cody Tilkins

I feel you spent a proper amount of time deciding colors. I bring you a tip on choosing black - prepressure.com/design/basics/rich...

Collapse
tilkinsc profile image
Cody Tilkins • Edited

Also brown isn't a real color - it's dark orange depending on the surrounding light intensity.

Collapse
marulucenat profile image
Maru Author

Thank you for the tips!

Collapse
nthdat profile image
nthdat

Wow! That's a lot of projects you've got there.
I really like the first one, the Tribute Page as Grace Hopper inspires me to code.
And I really enjoy your color combinations, they're just artistic.
Couldn't have done it better myself.
Good job!

Collapse
marulucenat profile image
Maru Author

Thanks a lot! And yes, Grace Hopper is a big inspiration for me as well πŸ’ͺ

Collapse
aalphaindia profile image
Pawan Pawar

Good content!!

Collapse
yunusbenaggoune profile image
YunusBenaggoune

Great β™₯️

Collapse
jpchreim profile image
Jean Pierre Chreim

You did a great job!! Loved the color combination and how things are simple at rich at the same time. Keep it up πŸ’ͺ

Collapse
atulcodex profile image
Atul Prajapati

Your projects are extra beautiful, No dought! Keep it up ;)

Collapse
marulucenat profile image
Maru Author

Thank you! I appreciate it πŸ€“

Collapse
marcknova profile image
Marck

La verdad es que cada uno tiene un buen diseΓ±o, Buen trabajo.

Collapse
marulucenat profile image
Maru Author

Muchas gracias πŸ™Œ

Collapse
dineshrout779 profile image
Dinesh Rout

You are creative. I remember last year I was making these projects. I merely copied the code so many times.

Collapse
leviarista profile image
LevΓ­ Arista

Bonitos diseΓ±os!!
Sigue adelante Maru 😊

Collapse
marulucenat profile image
Maru Author

Gracias! πŸ˜„

Collapse
rogjerrr profile image
DenVarenie

Awesome work!