Today I'm telling you more about my process to build this website
I probably still have a lot to learn but if you are a beginner, I think this could be interesting.There is a part 2 with more details on images, optimization...
play_arrow Before thinking about creating a website.
3 months ago I've decided I wanted to learn again HTML and CSS. The reason behind this decision was that I like interaction and UX Design, and for these design fields, knowing about coding languages is required.
I had some memories about these 2 languages as well as C/C++ that I've learned a bit at unversity. I can't say I was a complete beginner which could explain it may take you a bit longer to get used to these languages.
So the first step for me was to find some courses about web design (what is the trend, how to place elements to have a good usability, how to deal with multiple devices...). I've used:
Coursera which offers free video courses, with some assignments to do if you want, and can get feedback on it. I've followed courses about User Experience (UX) and User Interface (UI) there.
Then I went deeper into HTML first, my idea was to go through all the tags to know well all the possibilities that this language offers and list them on .html files to be sure I would have them somewhere in a classification of my own. I've done that using:
W3schools as they list every tags within groups and show examples on their own editor.
After getting used to HTML, you need to know more about CSS. So I've started by doing the same as for HTML: listing the properties on my own way still with the help of W3schools website. Then I felt I needed to practise and for that 2 other websites helped me a lot:
Gymnasium offers video courses called Coding for Designers and Responsive Web Design which combine HTML, CSS and UX and pushes you to practise.
KhanAcademy, probably the best at this step with its course Intro to HTML/CSS, is like a game, they show through the editor how to do things, and you actually have to do them after.
play_arrow Before starting to code.
When I thought I knew enough to start on my own and I wanted to create a website I went through the existing solutions.
There are thousands of templates on internet, wordpress and other CMS but also frameworks like Bootstrap. They all make creating websites easier. If your choice is to start from a blank page like I did, I recommend you to have a look at frameworks. Checking Bootstrap made me understand well the concept of grids (used for responsive design) The next step is Organization. Whatever method you chose, you need to plan things and organize it. When you have a clear idea of the kind of content you want to display, create mockups: by hands, with drawing software or mockup software and a kind of site map (hierarchy of the pages). This will help you create the code files and the folders. I insist on the folders, I've lost plenty of time renaming folders, moving files, changing the codes... If I had remembered the name of my folders would be in the URL of the website, I would have been faster. With the different devices on the market today, you'll have to create responsive content (responsive grids, media queries...). The "rule" is to design "mobile first", which means that you'll start designing and coding a version for small screen that can be adapted to bigger screens. I think this is a good way to proceed as it will force you to reduce your content to the essential.
play_arrow The coding phase
When you have everything clear you can start creating the HTML. I'm using Sublime Text 2 editor, I used to work with Notepad++ but discovered the amount of plugins you can have on ST2 and decided to switch. The listing elements files I made at the start of the process were really helpful to start. As I was so impatient, I direclty dive into CSS, without planning enough. Again I would recommend to plan a lot, write on the mockups the different elements and properties you'll use.
So first of all, get used to structure you files, use comments to cluster properties, use relevant class and id names or you'll end up with a mess. Go step by step and use your browser to test the changes all the time, at different sizes, and on different browsers.
If you decide to use ST2, you can add the LiveStyle pluggin, that will enable live updating between the browser and your editor, no need to actualize the window constently!
If you are stuck, there is probably someone else that got stuck like you one day and asked for help on internet! Google your problem, use the "border" property to understand easily what is going on between your different elements and check how their properties work on a library like W3schools. You can also find inspiration by using the DevTool of your browser (right click-inspect) on any website, CSS generators and patterns:
CodePen.io is an open-source platform where everyone can share their creations, get feedback on it. You can find many style of menus, buttons, interactions... Coveloping.com and Css3gen.com help you personnalize buttons, boxes, grids, animation and provide you the CSS corresponding code: a fast way to create box shadow, a scale up animation and more... Bradfrost.github.io and Cssscript are also full of "pre-made" ressources that will help you create and understand next-level elements.
When you'll get to something that corresponds quite well to your mockups (and will probably have changed many things, added elements...), you should validate your HTML and CSS through W3C validator. If you've already bought a domain, you can test easily, all along the process, your website on different devices. If not it will be a bit trickier: some paying websites offer the possibility to emulate multiple devices and see how your website would look like. If you don't want to pay you can also find some ways to transfer all your folders to devices and test it. Anyway the first thing to do is to check if the properties you've used are working on every browsers with CanIUse.
play_arrow And then?
- Patterns I've used
- MixItUp (JQ to filter posts like in the blog)
- Menu Icon on mobile version
- W3schools (library with example of tags for HTML, CSS, JS... )
- WebPlatform (articles on UX, UI, webdesign, HTML, CSS)
- Code Academy
- CMS and Frameworks
- Inspiration and Ressources
- Coveloping (CSS tools, generator ... NOT free anymore ...)
- CSS3Gen (CSS generator)
- Codrops (Tutorials, ressources, inspiration)
- Testing, Development Tools
- Google Analytics (check your website performance)
- JSBin (online editor)
- W3C Validator
- Google fonts
- Font Pair (which fonts go well together)
- Contrast Checker (check if your back and fore ground colors fit well)
- SEO, how to get more visitors
- Open Graph (rich metadata for social medias)
- Pinterest Developers
- Facebook Developers
- Twitter Developers