Hello, everyone.
I am posting my portfolio here and once again soliciting any input you would like to share. Thanks to everyone who has already pointed me in the direction of the principles that have allowed me to clean up my code and create better, more responsive sites!
I look forward to your insights.
Best,
James
Hello james922,
There appears to be too much margin on the sides of the h2 and p tags where it says " Specializing in clean…" in mobile view. This text should be about 98% width.
Where is the hamburger menu in mobile view?
Your four images are not loading.
I love the colors you have selected for the page.
Thank you very much for your input.
I will definitely be working on the mobile view issue you’ve brought to my attention and I will explore the hamburger menu option a bit as well.
The photo issue is interesting. It works fine in Chrome but I’m seeing that the images aren’t working in Firefox.
I’m glad you like the color scheme. I’m pretty fond of that one as well.
Thank you again for the feedback. It is greatly appreciated!
I played with your code a bit since it was in Codepen. This is what I did.
You do not need to set margin on all of those elements, just set a width on the parent div in which they are contained.
.mainDiv {
display: grid;
height: 100vh;
/* width: auto; */
margin-top: 3%;
margin-bottom: 11%;
grid-template-rows:30% 35% 35%;
align-items: center;
}
#welcome-section {
width: 90%;
margin: 0 auto;
}
#wh1 {
display: block;
/* margin-left: 8%; */
grid-row: 1 / 2;
color: #4719a3;
overflow: hidden;
animation: 36s infinite normal titleAnimation;
}
#wh2 {
display: block;
/* margin-left: 24%; */
/* margin-right: 7%; */
grid-row: 2 / 3;
color: #ad99d6;
text-shadow: 3px 3px 4px #330099;
}
#wp {
display: block;
/* margin-left: 16%; */
/* margin-right: 21%; */
grid-row: 3 / 4;
letter-spacing: 1px;
}
I start my pages mobile first. So I design my pages starting a 320px width then I expand outwards.
This would be the first media query.
@media (min-width: 500px) {
#welcome-section {
width: 80%;
}
}
Only the #welcome-section container changes width to 80% when the body is wider than 500px.
Excellent! thank you so much for the additional feedback!
Hi James, good job on the site! The color scheme is nice and the layout is simple and easy to navigate.
Only issue i found was the images are not loading at all. When i clicked on the individual images just to see them externally, they were not found at all. They may be missing at the source which at least is an easy fix.
Now that the images were not loading, the alt text showed up instead. You may want to consider changing the color of the alt text as it can’t be read because it is the same color as the anchor links in the navbar.
Otherwise, great portfolio - clear and concise!
Hi, lulets.
Thank you so much for your feedback!
Thank you in particular for the tip on the alt color. I had not considered that and (of course?) it becomes immediately relevant. 
Thank you for the words of encouragement as well. I’ll work some of the points that have been brought to my attention here out and update.
I really appreciate you taking the time to have a look and provide me with additional outside perspective!
images still not loading yet , try to fix them up
It looks good. I can tell that you have an idea of what a good webpage should look like.
I went over your code, and one thing I suggest, is attempting to give every element a class. Instead of styling your css with a bunch of different selectors, use classes instead. You’ll notice that you can create one class that contains a specific set of styles that can be used multiple times instead of rewriting the same code. Right now, you are using IDs, which are ok; however, you can have only one ID whereas you can have multiple classes.
Consider:
<div class="section-wrapper section-1">
<h1 class="section-title">Section 1</h1>
// content
</div>
<div class="section-wrapper section-1">
<h1 class="section-title">Section 2</h1>
// content
</div>
// CSS
// section styling
.section-wrapper {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.section-title {
text-align: center;
// other
}
// section 1 specific styling
.section-1 {
background: blue;
}
// section 2 specific styling
.section-2 {
background: red;
}
As you can see from this basic example, this leads to cleaner, less redundant code. What you have so far is good, but adopting best practice now will take you far!
Another thing: don’t be afraid to be descriptive with your names. It’ll be more semantic for yourself, and others who will read your code. For example, you have several two letter IDs which might make sense to you, but probably won’t to other people.
Take an in-depth look at Flexbox and Grid. Learn one first, then the other. You can combine them both to make powerful, responsive layouts. CSS-Tricks has an amazing write-up on flex and grid that I reference often. I usually use grid for my entire page-layout and flex for formatting rows and columns.
Get familiar with the box methodology. Once you realize everything you see on a webpage is just a box you need to move around and resize, things will start to click. Often times, I’ll use a bit of the following bit of js in the console to outline every element so I can see what’s going on if I’m having trouble with something.
javascript:(function(){var all=document.getElementsByTagName("*");for(var i=0,max=all.length;i<max;i++){all[i].style.outline="1px solid #"+((1<<24)*Math.random()|0).toString(16)};})();
Ok, one last thing for real: your layout breaks on mobile. I’m sure it has to do with all those different margins you have set.
If you need any more help or feedback, hit me up. Hope I helped some!
Thank you for your reply.
I seem to have fixed the images and I updated with a new page to replace one of the older projects.
Thank you so much for your kind words and your detailed and insightful feedback!
I think that I have fixed the image issue. I will address the other points raised here and update once they have been sorted out.
I really appreciate the added perspective!
I recommend using classes in your HTML and only use IDs when you want to target something with Javascript. IDs will override classes. If you try to override an ID with a class lower in the CSS file it will not work.
<h1 class="red-word" id="override">RED TEXT?</h1>
#override {
color: green;
font-size: 1rem;
}
.red-word {
color: red;
font-size: 5rem;
}
Thank you for this insight! I’ll be doing some restructuring and post when I’ve incorporated this and some of the other suggestions here. Much appreciated!