Jump to content

Learning Web Design?


Recommended Posts

Hello there!

I've been into Web Designing for 2 years or so and I've tried to learn HTML/CSS but I could not because most of the sites I have tried to learn from, were only teaching theoretical parts ( What's a header/footer/nav/section/div etc.) so I lost my interest pretty easily because my brain was in all directions and I didn't knew what to do. I want to restart again with HTML/CSS and maybe PHP after but I don't know what to do so I can not lose my interest again.

 

What I want to say is that I am looking for some sites that are also interactive with the reader, not only reading and falling asleep.For example, when you learn a new tag such as "div", let there be theoretical part but also a quiz/exercise at the end so your brain can memorize what you actually learned.It seems so hard to learn by yourself because the technology gets more complex..

 

Should I go to programming classes?Those of you who learned programming, how have you learned it? Alone on the internet? Have you paid for online tutorials? Have you paid for programming classes?Thank You and I hope this is not the wrong section! :)

Edited by Rhastalord

5383666413.png76561198169027512.png

Link to comment
Share on other sites

When I started programming about 4 - 5 years ago. I remember being in the same situation.

 

You could try using https://www.codecademy.com. which not only teaches you HTML and CSS they have a wide range of languages. It is also an interactive site so gives you set tasks.

 

Another great way once you've learnt the basics is just to set your self a small project and then if you need help search how to do it. Although I've been developing for 4 - 5 years and worked on some bug projects. I don't know everything because theres so much to learn.

 

I hope thats helped maybe ;) but if you do need any help feel free to pm me :)

Edited by illtag
Link to comment
Share on other sites

You cant do mysql or PHP, when you dont know anything about HTML/CSS ;) ...

 

I start with PHP years ago and now I have problem because PHP evolved and I now i feel like caveman with my knowledge... but still try learn new things

 

HTML - is very very easy ... like licking lollypop

CSS - is much harder, because lot of options

 

PHP - who know all of php ... ?

MySQL - easy when you undertand principle

 

javascript - hardcore for me :D

 

But you can do everything when you use good materials as stated above ;)  (FOR MY FIRST CODING I START I USED BOOKS!) - and its really only the books which I ever read :D:D

The hardest part of <DIV> is using it styled like float :D:D:D its war

Edited by Alvasor
  • Upvote 1
Link to comment
Share on other sites

Thank you guys so much! You motivated me to start again coding!Thanks @TrademarkGamer  for the site and @illtag for telling us how you have learned it! I'm gonna set a project goal aswell such as my youtube fan page or stuff like that. And thank you @Alvasor aswell! I might consider trying out some books but I feel they won't be that useful when technology grows that fast:)

5383666413.png76561198169027512.png

Link to comment
Share on other sites

Hy !

I've start to learn the web design with websites already codded.

I've looked the coding of this, and i've appliqued to my websites, and i've start my websites with my codes..

Start with look on alreadt existent website :) 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Un passé lourd, une longue histoire, un vécu toujours existant avec la tête haute de nos jours.

Avoir une vie comme un développeur, et ne vivre que de sa passion pour rendre heureux les autres, n'est qu'une activité banale pour n'importe qui.

Si l'on veut écouter les autres, dans nos rêves, nos envies, on peut toujours avoir de l'aide, mais il ne faut jamais écouter les mauvaises langues de bois.

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Link to comment
Share on other sites

As I'm trying to build up my site, I feel like positioning stuff is a real struggle by using margin/padding and I thought about "position: relative" which I find pretty easy considering the fact that I can use bottom/up/left/right afterwards which makes positioning very easy. Do you think position relative is a good thing to often use? Because I've heard a lot of people that it messes up your element's positioning on the site after advancing further 

5383666413.png76561198169027512.png

Link to comment
Share on other sites

Well, i've been web designing for about 2 years now, I used http://codecademy.com just like @illtag said, and then anything I didnt know I just used the Stack Overflow forums

I'm currently learning PHP and MySQL, although being part of the WOTRDB project is helping massively with that.

For CSS I suggest using a framework to help you, the most popular ones are http://getbootstrap.com and material design.

Hope this helps.

spacer.png

Soarfly Haulage - Memberships Officer

 

Link to comment
Share on other sites

Thanks @[SFL] DJ Double for the answer! My only huge problem that I hate in HTML & CSS is positioning. In my head, I have a really fancy site with a simple structure but I don't know how to do it by code and it messed up completely by using position:relative ( http://prntscr.com/bf785y ) . I've installed Bootstrap but I still don't know how to use it and what have I installed exactly?From what I've seen on their website, now I can use some custom codes with different purposes if I am right?

5383666413.png76561198169027512.png

Link to comment
Share on other sites

As someone else mentioned, I would recommend using CodeCademy to get a basic grasp of CSS and Html, then find a few things you want to do and try to solve it using your own mind and google.

 

After that, some relevant topics to research:

  • Html5
  • Css3
  • Responsive Design
  • Various browsers supports - awareness of what can be different by default in different browsers.

 

Someone suggested framworks - It's a good idea when you understand it, in order to help you develop better and faster. I would not recommend using one too much until you have tried a bit without though.

  • Upvote 1

HumaneWolf - Website - Twitter - GitHub

Ex-Developer

 

Link to comment
Share on other sites

Something important, don't use a framework before you understand how to do it without one, otherwise, if you encounter an issue, you won't know what might be causing that issue.

 

Learning fundamentals, though boring as frig, is important because you won't know how to fix issues if you don't have the fundamentals, same goes for PHP and anything else(perhaps the only exception there is Rails, since you probably won't find a ruby fcgi tutorial or information on it without RoR).

 

When it comes to positioning, first thing you should get is a "reset" stylesheet, that resets all styles to a common default (eg. IE and Safari has different defaults to Firefox, and Chrome has it's own defaults), then use relative positioning to the parent, a good practice is to practice something called "mobile-first" design, which means your base stylesheet looks good on mobile, and then as width increase of the view-port, you add new styles so that you can fill the page more when more space is available.

Link to comment
Share on other sites

  • 4 weeks later...

Im aware that Im a bit late... If I were you I would do some research myself. As oppose to using websites such as Codeacademy, which spend ages on one thing... I would venture the we b a bit more, look for a website that suits you and allow you to learn. From my experience, if you teach yourself it is a lot better than being taught by an automated website. 

 

EG:

http://www.w3schools.com/html/

https://developer.mozilla.org/en-US/Learn/HTML

http://html.net/

http://learn.shayhowe.com/html-css/

High End Transport VTC:

Driver

High End Event Management:

Convoy Control Operator

Link to comment
Share on other sites

  • 3 weeks later...
  • 2 weeks later...

But recomendend is use less JS or try to optimize your JS ... js rapidly slower your site if you use it a lot...

For design is best way use html5 ale lot of CSS

 

This is good looking when you use it right way => http://www.w3schools.com/css/css3_animations.asp

Link to comment
Share on other sites

  • 2 months later...

You also need to take into consideration not everybody uses a modern browser, so there isn't widespread html5 support. I.E 10 and firefox are perfect examples of a lack of html5 support so you'd need to use a javascript modernizer to help a browser along. Casing point the new type="date" field.

 

I saw some suggestions on php and mysql. If you do take this up, I'd suggest sticking to tutorials using mysqli (i for improved) or PDO (php data objects) for your database queries. I personally prefer the latter as it isn't restricted to just a mysql database. A lot of old school mysql functions have been depreciated from i think it was php 5.5  and in php 7 completely removed so avoiding these now at this stage of learning is advisable.

 

Some good websites have been listed so take a look at them. Have an idea on what it is you want to do first, find something and give it a go and albeit stack overflow isn't a tutorial site, it is a very good resource for finding help or examples of things. 

Link to comment
Share on other sites

On 11/4/2016 at 6:14 PM, mcspanky79 said:

You also need to take into consideration not everybody uses a modern browser, so there isn't widespread html5 support. I.E 10 and firefox are perfect examples of a lack of html5 support so you'd need to use a javascript modernizer to help a browser along. Casing point the new type="date" field.

Wrong, Firefox supports html5 just fine, so does IE10, they just don't happen to support certain subset of html5 (though input type date is coming in Firefox 50 acording to their bugtracker, and IE10 isn't supported by anyone anymore)

 

Generally, when using bleeding edge features like html5(if you can call that bleeding edge anymore…), check with http://caniuse.com/ to see the impact your choice has.

 

(ps. it's "case in point")

Link to comment
Share on other sites

Although this is separate to the above, if you're looking to learn Web Design, you should be making your site(s) mobile-first. This means that it re-sizes well on Mobile ensuring the user doesn't have to keep scrolling to see all of your content. This decreases website abandonment rates, as people are able to find the information they're looking for without having to scroll across.

 

A good site to check the Screen sizes of this is a site called Screenfly. This site shows you how your site will look on mobile, tablets and across a range of devices!

You'll need to specify your sizes in terms of percentage rather than pixels. The term 'viewport' allows the CSS code to change layout based on what device is detected.

Current Status: status.png

Waddle On!                    

Link to comment
Share on other sites

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.