First of all, I’ve been told that there’d be no problem if I linked my project from my own site. I hope there’s truly not at all Well, a subdomain of my site, anyways (I don’t know yet the proper slang for everything I am learning lately, as you will notice, haha
I know that the CSS file’s a freakin’ mess, I still have to get good at organizing it… any recommendations on that?
HTML file was fully validated thru W3C HTML checker, which I am quite proud of. I tried applying as many semantic mark-up as possible instead of just using divs for everything.
I may have tried to overachieve a bit adding a sidebar and whatnot, but I really wanted to see if I could get media queries working so that the sidebar went down when looked at in a smaller screen device, which I believe I’ve been able to do properly.
I’ve tried to bring as many concepts as possible into the game from those I’ve been learning in my Code Journey — which I’ve taken seriously for the last 7 days or so. Hope I’ve made it successfully.
Now, please, machine-gun me with all the improvements that could be made on this project.
When you say “link their code”, you mean to provide the proper links to GitHub or to post it as source code using back ticks?
About the alt descriptions, it’s hard to decide when pics are for decorative purpose, hehe
About the navbar, you’re totally right that a fixed bar would make it easier to navigate between sections, but when I make it fixed, the main pic disappears a bit beneath it, and what I am struggling the most about is the fact that I don’t know what “proper design” is when using “this or that code”… I mean, it’s even hard to explain what I want to explain, but, for example, let’s say that I don’t know if it’s better to use relative or absolute units when positioning things, or if I should choose one or the other thinking of the responsiveness (or if I should just leave responsiveness for media queries once I am done with the main (desktop) design… I am so full of doubts! Haha!
And yes, I made the navbar disappear at some point because my goal was to create one of those burger menus, but I got a little confuse when trying to do so, so — since it’s just a one page thingy, I decided that mobile users could just scroll up and down… I will improve it tomorrow, thought. Besides, I realized that at 320px width, the media query needed a loooooot of work, so I kinda gave up for today. It’s been some very intense 6 hours for doing that and I am just exhausted. Will keep trying tomorrow!
Thanks you, thank you, thank you Comments as yours motivated truly a lot!
There are coding errors you should be aware of and address.
You give the user a form to talk about your subject, give them a place to enter their name and an email addr but the form has no submit. That’s a bad UX.
I will do all proper corrections, then Now, once I have done 'em all — along placing the test suite properly — can I just send the link again?
Now, about the form. Certainly, I forgot the submit button Bad Deadpool Now, once I have it, is there a way which I should have supposed learned about by now and that I am totally forgetting in order to make that form properly work? Last nite, doing my research, it all seemed to point at the use of PHP files, which I believe not to know a thing yet Anywyas, I will keep researching
The form doesn’t actually have to work. The second project is a form and the submit button will not actually work. I was just observing that you had a form for the user to enter information but no way for them to actually “send” that info.
I was not unfamiliar with web design (if you can really call it so at all) because of wordpress(.org), but I’d never tried to code my own stuff from scratch before.
You will actually realize that as soon as you take a look at my crappy organizational skills to what CSS is concerned
The part that’s taken me longer so far has been getting familiar with the Command Line (although it felt like coming back to my childhood, when I used MS-DOS to play ‘Indiana jones and the Fate of Atlantis’ and stuff like that ) and, moreover, with what Git was, how to use it and how connect it with GitHub and then to my server (and that part’s been the one that’s made the proudest, haha).
Anyways, I guess that, in order to share my code, I should simply share this link here, right?
It seems so. And then, to let you have a look at my ‘so much fun’ CSS, it’d be this one:
And that’s that. I haven’t been able to do any improvements at all this morning, but I plan to do some of them this evening. Hopefully, I can have a proper result to upload before the day ends
I was really curious how you arranged that side bar. I haven’s used much floats myself, at least not with a proper understanding, so I’ll play around with your code. I too struggle with organization of CSS, especially in the current project (landing-page), so yours looks pretty good to me (but what do I know, I’m a beginner myself ). I have a codepen account so I use that to share my code on here, what resources did you use to learn git? I really need to learn that coz currently I just upload files there using gui .
Well, as you may’ve already seen, thought of two semantic blocks, main and aside, and just floated them respectively, one to the left and the other to the right. I don’t know if there’s any kind of special magic to it, but it definitively worked out for my layout
As the beginner that I am myself, I’ve realized a few things in my short Code Journey so far:
Precisely, be intentional about your code, rather than playing around with it. This is, use properties as you start understanding them properly — not fully, but at least properly — rather than just throwing a bunch of them to see which one ‘does the trick’ you’re hoping for. It’s exhausting trying to make something work by playing around with properties rather than sitting back to think which ones will actually work in a given context or onto a expected result before you actually write those properties.
Reading somebody else’s code also helps me a lot to figure it out what the heck is goin’ on. Actually, it was the one thing that made me realize that most of times, a few ‘intentional lines’, so to speak, do more for your design than a bunch of lines. I guess this is what the DRY principle speaks directly about.
Cascade (as in 'Cascade StylesSeets") is sorta big deal.
display:block;
margin: 0 auto;
will work while
margin: 0 auto;
display: block
will not to what centering block elements is concerned. So it’s good to have a brain cell just dedicated to analyze the order in which one is setting up every property.
Have a good proper understanding of inline elements vs. block elements will also help you out of more than one frustrating situation, I believe.
Now, one of my main conclusions was that many results to what CSS is concerned is about thinking of all the proper dimensiones of “every box” you’re layin’ out (may that be that CSS Box Model I’ve read about, perhaps?). Thinking of such dimensions (and deciding among them in either absolute or relative terms) feels like quite a big issue… and actually that is what drives me mostly crazy when facing the design initially. This is, all of my insecurities — most of them, at least — come from thoughts as these ones: “OK, so I see this all awesomely in my 13” Mac Book Air screen, but… how about a 15” Mac Book Pro? How about my mom’s 15” Windows-based personal computer? And what about her small 13” Lenovo Yoga? Will relative measures screw up my design? Should I be using absolute measurements instead? As said, it drives me crazy! Because I’ve somehow understood that relative measurements help you somehow with responsive design… not that you don’t need to do your media queries at some point, but the fact that if you use relative measurements properly… it should be easy to see your work adapted in between different devices.
Finally, it is really useful to to me to think — and even draw upon paper — what I want to see reflected on the canvas rather than just imagining it in my head. Mixing what with the ‘be intentional’ principle, I try not to write any code at all whatsoever till I think I’ve got it all figured it out. I mean, I ain’t sayin’ that I don’t miserably fail sometimes and then I go like: “Dude! This should have worked! Why is it not!!
And that’s pretty much it. I don’t know if any of what I just wrote can help you in any way, but I truly hope it does somehow
The Odin Project, mainly, and all the related resources that they provide the user with. Since I am newbie here, I can paste more than 2 links per post, but I solidly recommend and encourage you to create an account there and read everything they tell you to read; there are some amazing resources in there. Actually, I sorta knew FCC before, but it is their ‘Front-End Essentials’ lesson which drove me back here to get familiar with HTML and CSS. I guess that, soon, it will drive me back here to get to know about JS scripting
Don’t hesitate to let me know if I can be of any further help Sharing and teaching is definitively the best way to learn
I actually tried it out on a smaller project that I will upload it some time soon – as soon as I have a bit of time to give it another look and to have a better comprehension of it
Thanks for the resources
Now, my question would be: Is it better to just work with flexbox as default mode, so to speak, so that floats and clears don’t ever get in my way no more?
Cheers!
Edit: About CSS grid I don’t have no idea so far Hehe.
CSS is — or so I think — pretty neatly organized now, including alphabetization of all properties and comments to ease the search of specific elements.
Media query for the 320px breakpoint has been included and all media queries debugged and commented.
All alt attributes have been included.
Fallbacks for gradients and color variables have been included.
All <br> tags have been erased.
I’ve properly included the <script> before the closing of the <body> tag so that I can see it and run it now. “10 out of 10” it says
Ready to move on to the next one
Thank y’all!
Cheers!
PS: I am not adding the links again for they can be found in this same thread – both to the live page and to the CSS and HTML files on Github Hope you like it!
Edit: Btw, @Roma, when can I take the script out of my file? Or is it just for me to know that I complete the exercise properly so that once I have checked it out I can just take it off?
Good tips, @ibaifernandez. I try to use only the properties that I understand, though sometimes it is experimental - as a result of trial and error, which is completely appropriate for the knowledge level I have now, that’s how I learn. With time I hope to be able to fully predict what will certain property do to my layout before I actually apply it. Also before starting coding, I draw my intended layout on the paper, it helps me make sure how many divs I will actually need.
I’ve heard about The Odin Project, but never really researched about it, thanks, I will look into it