Hello FCC community. I am a bit slow, and have only completed the Tribute Page and Portfolio Page and looking back, comparing mine to other submissions, mine look very basic and 90s. My question is how does one go about experimenting with different themes to make your own page? I have been going over the Bootstrap documentation and using classes that seem like they would work in my webpages, but I can’t seem to create anything “cool” so to speak.
Any advice in making more creative pages? Any would help a lot. Thank you!
Long ago I would browse blogs / sites that I liked and save the pages offline. I’d open the main HTML file and start removing bits and pieces that I didn’t think I’d need until I had the simplest bits of code that created the effect that I thought was cool to begin with. I learned a lot along the way. Not all sites are very compatible with this type of tinkering though and some wont be easy to break down.
@IsaacAbrahamson I have found some slick templates out there, but as soon as I start trying to use it for my site, I feel as if it’s not really mine since I largely copied from the template.
@cjsheets Learning by analogy is something I also really enjoy, but like I said, I don’t feel as if I’m actually learning when I simply copy and change a few things around. I haven’t stripped down templates to the barebones, so I’ll start doing that to more templates. Thanks also! I see you have a similarly themed user icon. Linux!
And nfatah, Thank you! Material was going to be my next library after mastering Bootstrap, but seems I’ll start using it now!
Just check sites you like, if you’re on chrome, just right click and click on inspect and see the code. They use simple stuff sometimes too. Lighter colours are most times better backgrounds, especially grays. Colors like #f9f9f9, #f8f8f8, #f0f0f0, #eee, #cfcfcf etc etc.
Also, just a simple change of font type can make your site look a whole lot better. Look at a lot of code examples and you will catch along.
I’m not suggesting you use or edit templates, I’m suggesting you try various things out. The only way to create awesome looking sites is if you try to implement awesome looking sites. If you find a sick template, try to create a site that looks like it without using their code. Then you made it yourself, and you can be proud about it! Now, you can compare your code to theirs and see what they possibly did that you can improve upon. Its good that you don’t feel like its really yours! Keep trying, and you can implement a sick site that is yours!
As an example. I like the way GitHub Pages design looks (https://pages.github.com/). Now, instead of using a template or copy the source directly from chrome, I will do this:
I like the jumbotron that takes up 60% of screen height on desktop with a picture on the bottom middle.
I like the color scheme.
I like the animated info panels that come up when I go down the site.
Now, I will try to create my own site that looks like it. My steps would be as follows:
I will use bootstrap, because I can easily make things centered, responsive, and I can have a nice row system at the bottom.
I will use WOW.js to create the cool animations
I will start work on the jumbotron at the top, by making a div that takes up 60% of height, has a dark background color, and has a centered, responsive, and transparent picture at the bottom.
I will create a container after the jumbotron with a light gray background.
In this container I will make a class that has a white background, medium-gray border, and some padding to keep elements away from the sides a bit. Some margin on top for spacing would be good too.
I will create a row system at the bottom with icons from fontawesome.
I will open up the site I am inspired by in Chrome dev tools, to see how they did the layout, what css props they used, and the exact colors.
I will go from there and customize for my own tastes and likings.
That’s just an example of how you could go about creating a cool site that you made 100% by yourself, and can be proud of!
learn easily how you can create your own theme on chrome if you interested <a href=https://techcliffe.com/create-your-own-themes-in-chrome/"> visit here
Not sure if it’s still relevant to you, but I’ll suggest something else: no amount of code (and code inspecting) will help with this, as it’s a different field (and skillset) altogether! What you are looking for is graphic design; the rules of composition, color theory, some typography basics. It is not necessary for a developer job as there would usually be a designer for this part, but if it’s something you’re interested in, I’d highly recommend giving it a try! Then you don’t have to rely on copying what others do, you can analyze what they do and why it works, and then apply the principles to your work – without directly imitating anything.
If you don’t want to go down this route but still want to learn a little bit, I’d at least check out some tutorials on picking pretty colour combinations and some basics of typography for webdesigners!
