Nice, I quite like the style you have going on so far.
Two observations for me is to maybe introduce some white space (probably padding) on the top and bottom of your sections so it doesn’t look too crowded/stifling. This should also provide some visual breaks in between all the information you’re sharing.
And the last one is that on smaller devices, your get-in-touch div still has the max-width which makes the paragraph and the social media icons centered.
It’s really challanging to build the website from the ground up. Bootstrap is the easy mode and I don’t think I’m able to do my own custom css after learning bootstrap.
@grogmate Making it responsive using media queries is a piece of cake. It allows you more flexibility (well at least that’s what my experience was). I watched this video and it was all clear to me. Derek has a lot of good videos for web developers to check out.
Portfolio looks really good. I like how you have everything laid out. It flows very nicely. I’ve gone back and forth between using bootstrap and media queries. While bootstrap is much easier media queries give you so many more options and customization mixing the two is always a good option.
While I think Bootstrap is beneficial, some developers told me they don’t like using it due to the overhead it brings. Plus I like having complete control of how elements are laid out on the page with my own css.
And us using our own css, we are taking the obviously harder road to travel which will lead to a lot more challenges, but solving those challenges is the best way to learn and will have a better understanding of CSS in the end IMO.
But after saying all this, this is strictly my OPINION I’m not trying to bash on Bootstrap, its very convenient and widely used.
Hopefully we’re more on the brave side than foolish
Looks good on mobile. Honestly Bootstrap tends to get in my way, and sites made without it look so much better/less generic. Great work!
I’m not really fond of the gradient going from red to white though; could I suggest just using a darker/brighter shade of red instead? Gradients tend to look better when the range of colours isn’t too wide.
I just have a few suggestions which you can do with as you like:
The “Hello! My name…” text is currently centered. I would try left aligned (ragged left) or justified text for better balance.
There is a gradated line between sections, and that same line is used under the “Hello” text, but it doesn’t span the whole width like the other gradated lines do. For consistency, I would place it between the grey and white sections and run the entire width to match the other lines.
Lastly, the message box in the contact section is not the same width as the other fields. I think it’d look nice if they were all the same width.
When you do not use bootstrap, it’s all media queries for everything you want to be responsive (which is most likely going to be everything on the page). With a use of a lot of divs, I try to imagine using divs like having different boxes on the page that you edit and customize one box at a time.
So basically for media queries, you specify a max-width (800px), and at this width you can completely over-ride and change the original CSS styles.
So when the page reached 800px, you can see I changed the max-width of the element from 60% to 100%. What this does is make the .intro div 100% width and will move everything below it, so as the div shrinks down it is now responsive (Don’t forget I also removed the float: left).
Also any styles you don’t specify in the media query, it will inherit the styles from the original CSS. For Example, I did not have to declare color: white again in the media query because it will just stay the same if not changed.
Lastly, I’m not sure why it didn’t work for you but ALWAYS make sure your media queries are AFTER your original CSS because CSS styles at the bottom are always the styles that run last and will be displayed.
Looks nice and tidy. I feel myself comfortable, when I read it. One notice: the last “message” box is wider than the rest of them (Win7/Chrome) But this red color is really cool.
It’s nice.
I just noticed that you align center your paragraph. I think it’ll look nicer when align left. And the width of Input and Textarea is not equal.
I actually fiddled with that a little bit, trying to get the “cols” attribute in the
< textarea > just right, because 39 was a little too small, and 40 was a little too big. I will probably go back in and change this in the css when I come back to this project in the future. Wasn’t going for perfection in the rough draft so I just said “screw it” lol
Believe it or not, I’ve changed that paragraph align back and forth between left and center and I ultimately chose center only because I slightly prefer how it looks on smaller screens.