Responsive Web Design Projets Feedback(s) in terms of code

Hey guys! :sunny:
This is my first post here :woman_climbing:

I don’t know how to code, have never done it, never felt I’m going to do it anytime soon, but here I am, writing this post :slight_smile:

GG. WP.


Regarding projects feedback.
Firstly, I almost sure I want to chase the front-end development path.

Currently, I don’t really understand what is good and bad code really is.

I want to understand, in terms of code, code readability, where things could be improved, how it looks right now, what things should I consider next time, and where should I look? (though there’s not too much to show)

Also, I don’t know how things work in a real environment, where I want to be a front-end developer. Should I know design part or not?

I want to understand how to write quality code without touching the design part.

I’m tired of it, that is why I switched to programming.


Projects are not very responsive so to better look at them, please, check out Vercel links, they look a bit better :smiley:

  • Codepen projects (you can run the script to see if it’s passing all user stories):
  1. Tribute page - https://codepen.io/dimitryzub/pen/LYbQdPG
  2. Survey form - https://codepen.io/dimitryzub/pen/wvorqmq
  3. Product landing page - https://codepen.io/dimitryzub/pen/yLVzomG
  4. Technical documentation - https://codepen.io/dimitryzub/pen/oNYpNYG
  5. Personal portfolio - https://codepen.io/dimitryzub/pen/eYBVegO
  • Deployed 5 projects on Vercel:
  1. Tribute page - https://tribute-page-flame.vercel.app
  2. Survey form - https://survey-form-theta.vercel.app (on vercel, top text elements looks correct in comparison to codepen preview. Currently I don’t understand this behavior)
  3. Product landing page - https://product-landing-page-six.vercel.app
  4. Technical documentation - https://technical-documentation-mu.vercel.app
  5. Personal portfolio - https://portfolio-webpage-mocha.vercel.app

I also created a Github repository where I stored all of these projects and source code.

Everything below Github link is not about project feedback and could be skipped.
Thank you so much for reading this far :slight_smile:
Would really really appreciate any feedback!

:speech_balloon: If you could say something about design part besides something else, I would really appreciate it!

:speech_balloon: If you could say something about my github (don’t know what exactly) I would highly appreciate it!


Before touching programming I was doing:

  1. Photography / Videography,
  2. Dropshipping,
  3. 3D Modeling,
  4. Illustration (both traditional and vector).

It’s not really necessary but for some reason, I want to show that I’m not making up things:

Photos on free stock sites:

https://www.pexels.com/@zdmit

3D Modeling:

Food illustrations:

Cool.

That’s a lot of code to look over. I’ll look at the last one since I would assume that that is the most mature example of your code.

Scanning the code quickly, I don’'t see any big problems, but running it through a validator, I find some validation errors:

Error: End tag p seen, but there were open elements.

From line 36, column 119; to line 36, column 122

ibute Page</p></a>↩ 

Error: Unclosed element a.

From line 36, column 38; to line 36, column 105

ct-tile"> <a href="https://codepen.io/dimitryzub/pen/LYbxEOd" target="_blank"> Tribu

Error: No a element in scope but a a end tag seen.

From line 36, column 123; to line 36, column 126

e Page</p></a>↩     

Error: End tag p seen, but there were open elements.

From line 46, column 118; to line 46, column 121

urvey Form</p></a>↩ 

Error: Unclosed element a.

From line 46, column 38; to line 46, column 105

ct-tile"> <a href="https://codepen.io/dimitryzub/pen/wvorqmq" target="_blank"> Surve

Error: No a element in scope but a a end tag seen.

From line 46, column 122; to line 46, column 125

y Form</p></a>↩     

Error: End tag p seen, but there were open elements.

From line 56, column 126; to line 56, column 129

nding Page</p></a>↩ 

Error: Unclosed element a.

From line 56, column 38; to line 56, column 105

ct-tile"> <a href="https://codepen.io/dimitryzub/pen/yLVzomG" target="_blank">Produc

Error: No a element in scope but a a end tag seen.

From line 56, column 130; to line 56, column 133

g Page</p></a>↩     

Error: End tag p seen, but there were open elements.

From line 66, column 129; to line 66, column 132

umentation</p></a>↩ 

Error: Unclosed element a.

From line 66, column 38; to line 66, column 105

ct-tile"> <a href="https://codepen.io/dimitryzub/pen/oNYpNYG" target="_blank">Techni

Error: No a element in scope but a a end tag seen.

From line 66, column 133; to line 66, column 136

tation</p></a>↩     

Error: Duplicate ID profile-link.

From line 75, column 40; to line 75, column 139

t-links"> <a href="https://github.com/dimitryzub" target="_blank" rel="noopener noreferrer" id="profile-link">Github

Warning: The first occurrence of ID profile-link was here.

From line 74, column 40; to line 74, column 149

t-links"> <a href="https://www.freecodecamp.org/dimitryzub" target="_blank" rel="noopener noreferrer" id="profile-link">FreeCo

Error: Duplicate ID profile-link.

From line 76, column 40; to line 76, column 174

t-links"> <a href="https://stackoverflow.com/users/15164646/dimitry-zub?tab=profile" target="_blank" rel="noopener noreferrer" id="profile-link">StackO

Warning: The first occurrence of ID profile-link was here.

From line 74, column 40; to line 74, column 149

t-links"> <a href="https://www.freecodecamp.org/dimitryzub" target="_blank" rel="noopener noreferrer" id="profile-link">FreeCo

Error: Duplicate ID profile-link.

From line 77, column 40; to line 77, column 146

t-links"> <a href="https://www.instagram.com/dimitryzub" target="_blank" rel="noopener noreferrer" id="profile-link">Instag

Warning: The first occurrence of ID profile-link was here.

From line 74, column 40; to line 74, column 149

t-links"> <a href="https://www.freecodecamp.org/dimitryzub" target="_blank" rel="noopener noreferrer" id="profile-link">FreeCo

You have some unclosed elements and duplicate IDs - IDs must be unique.

I also notice something like this:

            <h3 class="contact-links"> <a href="https://github.com/dimitryzub" target="_blank" rel="noopener noreferrer" id="profile-link">Github</a></h3>

That space before the a element - hmmm. I’ve seen so many formatting errors cause by little things like that. That is a space that will show up in the code. Is that what you want? If you really want some space there, I would recommend doing it more explicitly with CSS. I remember one time having to help a dev who spent hours trying to figure out why two things didn’t center properly. It came down to something like this. Don’t add “random” space into the HTML that is going out to the screen.

I also think that you’re overcommenting a bit.

    <!-- Welcome Area -->
    <div id="welcome-section">

Really? Do I need that comment? The ID on the next line gives me the same information. IMHO, the only time you should comment something is if it wouldn’t be immediately obvious to another coder. And 99.44% of the time if the code is organized better and better variable names are used, it isn’t even needed then.

Also, I don’t know how things work in a real environment, where I want to be a front-end developer. Should I know design part or not?

That depends, if it’s a small shop, you may have to make some design decisions. If it’s a big place, they will have someone whose job that is. But no matter what, it’s still good to know the basics. You can pick up a lot just by paying attention to good design choice. Don’t Make Me Think is a great book. Read some blogs, search for “best web page designs”, etc. But you’re in good company - a lot of developers aren’t good at design, myself included.

As far as this design, for a portfolio page I find it a little too busy - you can refer to one of my other rants about portfolio pages and why you need to tell them whether or not to continue in the first 5 seconds. But just in general, it looks pretty good.

1 Like

Hi, Kevin! :slight_smile:

Thank you, thank you, and thank you! :pray:
Thank you for taking your time to write this!

All the best!

@dimitryzub, some feedback on your projects;
Since you want to focus on front-end

  • Review this for an understanding of the HTML boilerplate tags.
    • You have elements out of order
  • Run your HTML code through the W3C validator.
    • There are coding / syntax errors you should be aware of and address.
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on large and small screens. Some projects it’s both, some it’s just the smaller screens. And it doesn’t matter if it’s codepen or vercel.
  • Don’t use view port units for font sizes. The user should always be in control of the text size on the page (that is, they should be able to manually increase the text size). Using view port units prevents them from doing this. Your job as a developer is to make sure your page is responsive to text size increases. If you don’t know how to manually increase the text size, using Firefox, go to the ‘View->Zoom’ menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size. If font-sizes are defined with vw units the only way a user can increase the text size is to widen the browser window. What if the user has really bad eyesight and can’t make the browser window wide enough?
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
1 Like

Thank you so much, Roma! :slight_smile:
A lot of things need to be tightened up!

Really appreciate your feedback.

1 Like