Issues I can't figure out for the life of me:
If anyone can help me with this, I'd be forever in your debt. You can also send me an email by using the Contact section on the project :)
-use inline svg, if u look at a svg in a text editor, like visual studio code, u will see that it is a vector graphic writen with vector graphic rules, paste that in your html, and than u can target its properties in css
a svg:hover path { fill: #556B2F; }
-tutorial on the topic link
-overflow hidden, basically
but u have some problems with layouts in general, below 1560px the your grid system breaks down, u can fix that by playing around with fr-s, gap-s, centering the content of the grid ect.. i know grid is powerful and can do a lot of complicated stuff, but overall you could have used flex for the whole thing as it is much easier and quicker to work with
put some transitions on links
the profile img should be able to "stack", meaning it should be either positioned absolutely, or a flex item
i hope this helps u at least a little bit. best regards!
hello David McLean.
i see u have an artistic side to you, and probably background in design i would love to point out the simplest and the hardest thing about writing code and that is structure, naming and elegance in writing least amount of code possible
so first of, learn to use semantic elements in html, i see u used main, nav, some headers and footers, that is a good start, now throw in some sections, cards, articles... second learn about naming conventions like smacss, and bam
you need to approach a page structure and naming with modularity and repeatability in mind
for example u defined a custom property --custom-white then made a class .title-color {
color: var(--custom-white);, which then u used in html when u needed that color on buttons
there are a couple of things wrong with this way of doing things
first of why add a class in html to an element that already has its class of button, like this you have have increased codependency between your html and css, and that is a bad practice
also on the buttons u defined border-bottom 3 times, the correct one that would affect all the buttons all the time is commented out
and then in your form you have .form-textarea and input, textarea with same styles as buttons. you cold of have covered all of that with one selector
... and that input in a span should be a button
now for the structure of the html, you should think of it like boxes within boxes if u want something to line up, put it in a box, and then manipulate the box position, or manipulate box content with flex or grid i see u used grid for most of the main and skill section, and that is fine, grid is powerful it can do a lot of things, but flex is so much quicker and much more used, so i would suggest learning learning its behavior.
because u used quite a complicated grid setup u have a couple mistakes, main header is to small for its p element, so it stickes out (smart making it one word but, not a good practice), between 1180px and 800px, h1 and p are overlapping.
you used a main wrapper to contain everything in main, and u used it as a grid, but then u didn't use a wrapper in any of the later sections. it is common practice when u have a page layout with centered content all throughout it to use a wrapper in each section, so that u can achieve that uniform look for all of the content, a wrapper with same width of course you have main header, and nav completely separate but you want them to line up at all times, well put it in a box(a div or make the whole thing a nav).
i see u used hr as a line, but u used them outside of any element, so they span the whole page, lining up with nothing, use them in a parent, like say wrapper, but hr is a block element by default so it will still want to span the whole page, change display to inline and width to 100% and no it will be 100% of the parent, although if u used a wrapper in all the sections u could use a border-bottom to achieve same effect with less code.
i hope some of this was helpful. best regards.
can i ask why do you have two h1? you even used br in the first one to ensure aesthetics pleasing wrapping of text, and you wrapped text in second in a span and targeted it with .underline.
so why use 2 h1?
This project was very difficult for me. But I managed to finish it. I noticed some limitations that I will focus on to become more efficient. I also realized that I need to keep moving towards new technologies.
hello José Valdir, i would like to ask u to approach page development a little bit differently
firs of all, modularity, u should look at the design and see are there repeating elements, and if there are group them in one class(selector), for example the first "contact me" element on page u did as a button, the second as a link and then u have ".links-under-the-project-images a", and all of them u styled separately. all of these could have been assigned one class, and styled with one selector in css.
i see u did separate logical sections of the page like header, abilities, projects and contact section, but then i se u using "hr" in-between even dough you used border bottom on the buttons/links, I'm guessing its because u didn't know how to keep that line the same width as the content above. common practice for pages that have content in the middle, with empty space on left and right is to use another div inside each section with a class="wrapper" that has a max-width and is centered, now this wont work if the parent of sections(body) doesn't have width 100% of the screen, so set it to 100dvw. again this is good for modularity of the page as all sections will contain a wrapper that is styled with one selector, and if u need to target specific wrapper u can by selecting parent(section) .wrapper {}.
u should learn some common practices moving forward learn what naming conventions are. specificity is a important one to learn, cause i sav 15 !important declarations if u structure your page well there should not be a need for it, on that note, u don't need to use id-s for styling with css, it needlessly raises the specificity of elements, making later correction in the css a nightmare . also learn basics of html and css before going to new technologies, because its important to understand how and why things work as they do.
a direct advice u have some problems on screans >750px and in device emulator, nothing is centered, all due to
<div id="end-page-patter-ring"> <img class="pattern-rings" src="/assets/images/pattern-rings.svg" alt="pattern-rings"> </div>if u put display:none on it, the problem is fixed, meaning "it" was the problem
i do hope this will help you progress on your way to becoming a developer. Best wishes!
