So I have found a solution for CSS-only Pinterest style layout. I want to use CSS only because jQuery Masonry or whatever just seems less respectable.
I am a complete beginner who has bever coded anything, and I think it'll be easier to just stick to CSS for now and get good in it.
So I want to create a personal website, and I don't mind using JS elsewhere but for the layout I think I want to do it 'from scratch' without cheating with Masonry, and there is a tutorial for this with only a couple problems [cross browser issues and can't order the grids]. http://cssdeck.com/labs/css-only-pinterest-style-columns-layout
This is my question- how do I implement this into a full website?
I know the basic process of writing a website, but I really don't know where to start with making a website using this code. Can someone please give me a step-by-step on how to make a homepage that links to other pages in the website with this?
And how to customise the boxes so that they act as links to other sections of the website?
I want to do it like windows 8 style, where the homepage is made of tiles, you click on a square and it takes you to another section of the website.
HERE is an example of what I am trying to make- http://builtbybuffalo.com/
So in a sense I am asking for a step by step for beginners on how to code the website I just linked to.
Or where to find that info.
Cheers!
Related
Currently on our website, we are using Twitter Bootstrap just the way it came. It's a nice theme and allowed us to make a site that looked decently professional very quickly, but the three of us working on the website agree that we'd prefer a Google-styled theme, like the kind used in Google Inbox or their new tool Google Classroom.
Initially, I didn't want to switch because of the amount of work that would be involved in going from Bootstrap to Google's Material Design. After a little searching I found a website called TODC Bootstrap which looks promising - it's Bootstrap, but with a Google theme.
I was wondering if anyone knew how I would go about switching from one to the other and what's involved. Is it as easy as swapping some CSS stylesheets, or are some of the classnames and such different so I have to modify my HTML a bit?
Hi for the last month I have started to learn CSS.Fist thing I did is read everything i could find on www.w3school.com , after that I started reading CSS Mastery 2nd edition.I have build a couple of my own websites with succes but I'm still not happy with what I know , I even practiced with the new CSS3 elements.
I've seen alot of cool stuff build using css especialy on http://www.cssplay.co.uk/ but the only problem is the source code is not displayed and I don't know how the bloody things are.A good example is this:
http://www.cssplay.co.uk/menu/tilt.html
And these is only one of the things that I've seen on this website and would like o learn how to build them.
So anyone know any other similar sites that ofer a good explanation on the more advanced stuff about css(not beginer stuff like building some drop down menus , rollover or hover efects )?Any advice is much apreciated thank you!
As already mentioned, tools like Firebug/Chrome Inspector are definite must haves.
I gained the most experience from real world problems with various different browsers. You make a site, it doesn't look so good in a particular browser. So you search on the internet. Find a solution and memorize it. I think that CSS in itself is a fairly simple tool, I class 'advanced' CSS as mastering the various techniques required to make sites work cross browser and in browsers like IE6/IE7+.
Also, Never give up with CSS, if you find a problem try and find an answer. Most of the time, there will be a simple solution.
In general, make sure your CSS is as simple as can be. I generally find that most complicated CSS can be replaced with relatively simple code, and find people get carried away and forget simple techniques to achieve similar solutions. One such problem, would be putting a button on the right hand side of a div, like below:
-----------------------------------------------
| Button |
-----------------------------------------------
You may see that some people will float the button right, adding more complexity than necessary. What ever happened to text-align:right? :-)
Finally, make sure you find a couple of blogs you like, for example http://csstricks.com and read them, taking note of new techniques. Try and master a '2 column layout', understand the difference between block/inline-block/inline, margin collapsing, tables, html forms, IE6/7 hasLayout, the list goes on. Most of which you will cover if you try and make a website template from scratch. Maybe start with an existing site and see if you can achieve the same layout.
I'm not sure with CSS how to learn it's pitfalls without encountering them mistakenly.
It looks like the stylesheet for the maze is located at: http://www.cssplay.co.uk/menu/candr/tilt.css. You can use that against the source code to figure it out.
One of my favorite is A List Apart. Great articles, not only about CSS like I linked, but about web design and more.
Also HTML Dog has some nice CSS entries.
Then, you can find great CSS resources on the w3 site.
I have a question about how to layout the webpages and relate each image together so it can flow together.I have multiple many image that some will be layered partially over each other and some are just side-by-side with some space in between them. as well some pictures will be hyperlinks and some will be hyperlinks wih image changes on hover. as well some will be backgrounds to a links of links. I haven't build a real website before. i Just create applications and I am trying to help my friend with this project
They designed it in PhotoShop, as well they have given me each piece as separate images:
(source: missadventures.ca)
This is a bigger question that can be answered here, and you're going to need some more general knowledge on building sites.
First, decide whether you want to hand-code the site or use a WYSIWYG editor. If you want to use a WYSIWYG, Adobe Dreamweaver is easy to use and very good.
Now onto the code part. Regardless of your previous choice, you should have a basic understanding of HTML and CSS just for debugging. These two books helped me immensely when I was starting out:
Designing with Web Standards
Eric Meyer on CSS
Along with StackOverflow, you can also use the following sites as learning tools and a reference:
http://www.alistapart.com
http://www.thinkvitamin.com
http://www.devguru.com
Finally, make sure to install the Firebug debugging tool for Firefox
Good luck!
I'm terribly new to web development. I'm trying to make a pretty simple site with a friend. My friend has taken the time to design the layout for our site, and we have things looking how we want in a static HTML page.
What I'd like to do now is move over to a Content Management System like Drupal but keep the same design that we have all ready laid out.
Since I'm completely new to this field, I'm looking for some best-practices advice as to how to make this leap.
It's apparent to me that I could probably edit some existing Drupal Theme to make it give me the layout that I want, but is that the path I should go down?
Thanks!
Update: Also, is it more than just replacing my style.css with their style.css?
Update 2: The end goal is for people to be able to log in and create news entries, very similar to a blog that will then appear on the front page. There will be other items on the left- and right- but they don't need to be directly accessed by anyone, really. They'll stay pretty static.
The Zen theme is sort of a meta-theme that's designed to be fully standards compliant and make pretty much every aspect of theming readily customizable, with lots of informative commenting. It's the best place to start if you want to develop your own theme. Even if you find a theme that looks a lot like the one you want to create, it's probably still better to start with zen because it's extremely well laid out and instructive. That being said, I've never built a theme from scratch, but it sure looks like a lot of work.
Update
In general the best approach will likely end up being to use your designer's HTML and CSS as a reference, and to edit the Zen-based templates and CSS files to recreate that appearance. It's a bit magical.
You will end up breaking the styles used in your designer's layout into chunks that are part of various template files. The mostly-static stuff on the side columns will become what Drupal calls "blocks"; you'll likely use the top part of the page to refine the HTML for the header section of the main page template; and you'll use the central part to add any necessary tags to the content section of the main page template.
I tend to make liberal use of the Firebug extension for Firefox, or the developer tools built into Chrome. These tools let you quickly locate a given CSS element that you want to change, and edit it to see how the change will look. At first though it's probably better to just read through the whole CSS file to get a feel for how it works. Again, Zen's CSS is very easy to digest.
Pour your heart and soul into the Drupal Theming Guide for the next few days. Theming, like most things, is best done if followed by a gratuitous amount of time in the documentation.
Start with either Zen or Framework themes. They provide good starting points for working with the CSS to adapt to your design.
This helps too:
http://drupal.org/theme-guide
Whatever you do, don't take Garland theme as how a good drupal theme is done. I went down that path when I first started Drupal...
How can I achieve a cool looking photo gallery page? I don't know Flash, but can learn, and thought about a random collage that 'pulls out' a photo that you hover over.
It's for a photographer, so no thumbnails, grids, etc.
If you're looking for a tool that's pretty flexible and will support itself later on as you can just train the user to work with it check out JAlbum.
To work on integrating this yourself you can check out AJAX ASP Photo Gallery or something like this one.
If you're looking for a flash/flex based solution that they can just "plug-in" as a stand-alone product which incorporates some of the features you've described StudioCloud has a nice one that has a monthly fee...
I have had good results using the Galleria plugin for jQuery: http://devkick.com/lab/galleria/.
It will require an html page as a source, but this is relatively easy to produce automatically from a database or directory structure using ASP.NET
If the data does not need to be updated too often you could even produce the HTML by hand in a pinch. It wouldnt be difficult though it isnt easy to maintain.
I agree with Mat - JAlbum is excellent - but I'd also like to add that it's even better with the BananAlbum skin.
There are dozens of off the shelf apps available. Gallery, Wordpress (after configuration), and a few ASP.Net based ones. Flash is certainly not required.
That said, in order to learn a bit about Pylons, I wrote my own basic photo blog. If you can do basic CRUD development, it shouldn't be too hard.
Regarding your collage idea, you can accomplish that with JavaScript as well. See this article for similar effects stuff.
A little random, but the Silverlight deep zoom functionality is pretty cool around this area (although whether it's worth learning for this is another matter):
Example here: http://memorabilia.hardrock.com/