Best free tools to start website designing by myself?

Dear Friends,

I want to learn website designing please suggest.
What are the best free tools to start website designing by myself?

Thank you

 

A text editor and your brain.

 

Thanks, @mmerlinn.
Please, can you tell me in detail? I have hands-on experience with Visual Studio.
Is there any other editor better than this in terms of simplicity and usability for learners.

 

@Amy Bella:

There are many threads hereon about coding. In general the simpler the text editor the faster you will be able to code since using a mouse is a very slow way to code. I use SimpleText & WordPad myself, but there are lots of others like Notepad, TextEdit, and so on.

Here are some recent threads on DP that should answer most of your questions.

https://forums.digitalpoint.com/thr...css-by-hand-in-a-text-editor-in-2019.2857372/
https://forums.digitalpoint.com/threads/should-i-still-use-jquery-with-html5-in-2019.2857316/
https://forums.digitalpoint.com/thr...instead-of-learning-to-code-manually.2857358/
https://forums.digitalpoint.com/threads/why-so-much-hatred-toward-html-css-noobs.2857373/

 

Asking about text editors is personal. Every serious coder has an intimate relationship with their editor; they live in that bit of software. You will fall in love, or maybe hate, with whatever you end up with. So try a bunch on for compatibility before settling down.

There are things that are basic; e.g. the ability to work in a CLI (every time you touch the mouse, you're slowing down; don't do it), remote editing, cross platform, etc.. See Wikipedia's comparison charts for features.

A shameless plug for my favorite: Emacs. A lot of people say it has a steep learning curve, that it is difficult to learn. It's no more difficult than any other non-trivial editor. There are hundreds (?) of kb commands/shortcuts, but how many do you commonly use? Maybe ten or fifteen. HTML v.4 (I haven't seen a count of v.5's) has ~80 element tags. Only ~ ten or fifteen are commonly used. I used notepad 2 and Notepad++ for a long time, but it's not (wasn't) usable on Mac or Linux. Vi(m)'s modal approach didn't feel comfortable, but with Emacs, it was love at first sight. Walk through the built in tutorial and you've got it made in the shade.

gary

 

@Amy Bella

I am a noob myself, having interacted with the folks here in this forum, and I strongly suggest you read those posts listed above. They contain some handy tips on how to do it right. I went from ranting "Why code by hand!?!? Why shouldn't I use GUI editors!?!?" to being able to write a simple, functional responsive page in a plain text editor from scratch in a little over three weeks thanks to helpful people in this forum. It's so well worth the effort. I will also suggest that as the folks above pointed out, you not focus too much on tools and instead focus solely on learning HTML and CSS ("the best tool is between your ears.") I discovered that tools mattered much less once I gained HTML and CSS vocabulary. It's liberating to be able to write HTML/CSS in any text editors I happen to have and create a page exactly the way I want.

 

Dear @mmerlinn, @kk5st @Gary-SC
Thank you so much for your guidance. I took a note of your points, will work on that.

@mmerlinn, thanks for sharing these threads, these are really helpful.

 

Start wordpress on your localserver, nothing more easy than that to start creating websites

 

The OP said she wanted to learn WEBSITE DESIGNING, nothing about creating a website, so your answer makes no sense whatsoever. The ONLY thing one can learn using TURDPRESS is how NOT to build a website. And when one uses tools like TURDPRESS one NEVER learns squat about website DESIGNING.

 

Hello there,
Myself steven are you looking for best web designing tools. I recommended some powerful tools and sites for you.
WIX more popular and customize your own design
Squarespace create your template, for all device
Weebly easy way to use page Layout to help you get started your mood
Mi Creator customized the foto way you like to move

 

Hey You should use a good web hosting, I use Bluehost personally for my blog, you need to then get a domain (they actually provide one), Then you will have your wordpress logins so you should go get a page builder like Thrive Architect, i find this very good its like a cheaper version of clickfunnels! and then you shoud link an email provider up to your site to collect leads! Hope that helped!

 

If you want to learn doing it totally by yourself, you will still need hosting. I personally started out with 000webhost.com - it is totally free. Of course, it is important to understand that with free hosting you won't be able to have a lot of traffic, but it's great way for creating samples and testing out at first. After you can always more forward to paid hosting, there are possibilities to migrate to Hostinger, and I believe to wix also.

 

Neither one of you read the OPs question. The OP wants to learn WEB DESIGNING. She said NOTHING about web hosting. They are two totally DIFFERENT subjects UNRELATED to each other. As, one CAN design web pages WITHOUT a hosting account and one CAN have a web hosting account WITHOUT designing web pages.

 

Shocking the number of halfwits and morons chiming in to a "how do I learn to design" question with mentally enfeebled TRASH -- like Wordpress, Wix, hosting, etc -- that has DICK FREAKING ALL TO DO WITH "DESIGN"!!!

I know the sleazeball scam artist nube predator bullshit is a magnet for the one sentence wonder-posting morons, but Holy Hannah whiskey tango foxtrot?!?

@Amy Bella, Ignore most people replying by pointing you at hosting, or "builders", or WYSIWYGS, or any other such "visual" tools. They're ignorant tubes flapping their arse-cheeks in the wind.

Edited so as to remove directly praising certain users whilst accidentally omitting others worthy of praise.

By that do you mean ACTUAL "visual studio" where you build things in C++, Visual Basic, or C# as a "RAD" / WYSIWYG, or do you mean "Visual Studio Code" which is a bloated flat text editor? They are not the same thing, and it's a shame Microsoft went full Gungan naming it "Visual Studio" anything! It has two things to do with "Visual Studio", and Jack left town.

If the former, and you mean ACTUAL design... well, you'll need to completely forget EVERYTHING you've learned as it has nothing to do with ACTUAL design. If you mean the latter, then you have something remotely resembling the right tool, though I'd suggest something leaner like EditPlus, notepad++, or what I use "flo's notepad 2". Pretty much anything one step above notepad is ideal. There are other options like Sublime and "Visual Studio Code" but I find them to be chock full of crap that gets in the way, and they're generally wasting megabytes of code on doing kilobytes job.

When it comes to ACTUAL web design, we're talking engineering that incorporates art in the process, not art for and of itself. As such there are specifications (HTML, CSS), guidelines (WCAG), and other such engineering concepts you need to learn before you get so far as even worrying about what things look like. This is why the concept of having separate "front end coders" and "web designers" is mentally enfeebled halfwitted BS, even if half the wits in the industry treat it as the norm. The vast majority of "tools" out there calling themselves "web designers" are nothing of the sort, since they know little if anything beyond what they spank their crank on in Photoshop, some WYSIWYG BS like Dreamweaver, some other visual only construction medium.

As a dearly departed friend often said, "The only thing about Dreamweaver that can be considered professional grade tools are the people promoting its use."

Lemme give you the fastest copypasta lesson you'll likely find on "the basics".

The process I advocate is called "progressive enhancement".

1) Take the content or a reasonable facsimile of future content and arrange it in a flat text editor in the most useful structural manner possible as if HTML, CSS, JavaScript, and any future layout ideas don't even exist. Ideally this should be done to professional writing norms.

2) Mark up that content with semantic HTML. "semantic" being a sick euphemism for "using HTML properly" that is used so as not to offend the 80%+ of "really stable geniuses" out there who never extracted their cranium from 1997's rectum. This means you use numbered headings and horizontal rules to establish a navigable document structure, where THE (singular) H1 is THE (singular) headING under which all content of all pages is a subsection -- such as your site title / logo. The first H2 marking the start of your actual "main" content. Further H2 or HR indicating the start of sibling sections of that first H2. H3 marking the start of subsections of the H2 preceding them. H4 indicating the start of subsections of the H3 before them... care to guess H5 and H6's MEANING.

It means P for GRAMMATICAL paragraphs, it means UL/OL/LI for short bullet point lists and/or groups of selections. (that's grammatical bullet points, not "hurr durrz, eyes bee wunts dots befur um".) It means TABLE and its associated subtags for tabular data where each axis is uniform related data, and not "hurr durrz, eye wunts cullums". It means <b> for legal entity names, <i>I for book titles, <em> for emphasis, <strong> for MORE emphasis.

Every HTML tag has a meaning of "would be" in professional writing, and it is in these circumstances you should be choosing them. You should NEVER be choosing your semantic tags based on their default appearance.

At this point you should have no DIV or SPAN. They are "semantically neutral" and exist solely to hook or group elements/content to say "this MAY receive extra styling" without saying what that styling IS. To that end when/if it comes time to add classes and ID those too should say what things ARE or WHY they MIGHT recieve style, and not what that style is.

Hence class="text-shadow box-shadow col-4-s col-5-m col-6-l" is mentally enfeebled incompetent bullshit. No matter how many ALLEGED "experts" from Twitter or W3Schools claim otherwise.

3) create the layout by bending that semantic markup to your will, adding DIV, SPAN, and classes/id's where appropriate AND ONLY AS NEEDED! Until you've expended what you can do with your existing semantics, you have no real business adding more tags to the markup. The exception would be where a DIV to group elements for style, or to leverage the semantics so you aren't pissing on the markup with endless pointless classes on everything. As Carlin used to joke "not every ejaculation deserves a name" -- to that end not every blasted tag needs a class or DIV around it!

Note I said LAYOUT. Don't worry about fancy colours or extra presentational images yet, just get the layout working. I often will use placeholder greyscale backgrounds to make sure I can see each element properly, but apart from that this is just worrying about font sizes, and where your columns/sections are going.

The layout at this stage should be first and foremost elastic and semi-fluid. Elastic means EVERYTHING is done in EM. Not the "not yet ready for primetime" REM, and most certainly not the "let's tell users with accessiiblity needs to bugger off" that is PX. EM widths, EM font-sizes, EM paddings. PX should be used with an eye dropper on things like borders and very small box-shadows, if at all!. Semi-fluid just means that at least your main content column is fluid in width, with a max-width so that long lines of text aren't hard to follow. NO OVERALL FIXED WIDTH!!! The moment someone asks "what width should I design for", or worse someone says something like "960px" or "768px" they've gone full Pakled, creating an epic /FAIL/ at web development! They're just going to keep looking for things to "make them go" because they're too stupid to find the pot on their own.

I suggest starting with the legacy desktop layout first. A lot of people will tell you "mobile first" and that's utterly back-assward. Mobile / small screen devices we actually care about can be targeted for changes by media queries. Legacy desktop cannot... how would one create media queries first then design for what can't be targeted? Makes no sense. You make what can't be customized for FIRST, then layer your customizations atop it -- easy peasy. Hence:

4) reduce the window width until it breaks, then create a media query to re-arrange your layout to fit the screen width. That means stripping off columns to put them below, re-arranging 3 columns into two or even just one, reducing excess padding, reducing heading font sizes, etc, etc. This is called "responsive layout". Later, rinse, repeat until down around 256px width, the smallest mobile device we should really concern ourselves with.

5) NOW paint it pretty. These days try NOT to overburden yourself with excess images / art in the template. CSS is capable of so much all by itself and that excess "presentational image" crap just gets in the way of the user getting to what's really important, THE CONTENT.

There are guidelines a REAL designer should follow, such as the WCAG:

https://www.w3.org/WAI/standards-guidelines/wcag/

The biggest part people keep screwing up on is accessible colour contrasts of texts and font-sizes. Using EM as I said above eliminates half of that. For checking that your contrasts are legible there's this tool I always point people at:

https://webaim.org/resources/contrastchecker/

Some goofy "thin glyph" webfonts -- like Roboto -- thanks to modern font-smoothing you'll actually want to treat "normal AAA" as the bare minimum, ignoring the other values if it's at 0.825 body EM (0.825 REM) aka 14px "normal". Even at 16px between modern font smoothing and some of the "thinner" fonts out there I treat "normal AAA" as a bit too loose and permissive.

6) Further enhance the page if desired with JavaScript, but try to avoid having ANY of your "base functionality" require scripting to even function. This is where halfwitted trash like "slideshows" are often an epic /FAIL/ at web design. If the content of that slideshow is so damned important, just show it to the user WITHOUT the stupid "bling bling" garbage around it.

THAT IS DESIGN!. If you thought you were going to load up a WYSIWYG or paint program like Photoshop, just dragging stuff around and picking/choosing colours willy-nilly, well... you didn't know what design is. Just like most of the fools calling themselves "web designers" these days.

Now you know. Red lasers, Blue Lasers, and so forth.

... and apologies if my language gets a bit harsh, but that's just the harsh light or reality and reaction to all the dirtbag scam artists who will try to lead you astray with their ignorant nonsense that has not one blasted thing to do with ACTUAL design.

 

@deathshadow

Can you tell me what part of my post above made you think I'm one of the ignorant tubes flapping their arse-cheeks in the wind? I fully agree that several posts in this thread deserve some harsh spanking and whacking in their head for suggesting things like Wix, etc., but I'm caught off-guarded to find out that you included me in the list of the ignorant tubes to be ignored. What did I miss this time? I was in full agreement with @mmerlinn and suggested her she look into those links @mmerlinn posted, didn't I? And, I am in full agreement with everything you said in your reply to @Amy Bella . Maybe the part that says, "create a page exactly the way I want," which I could see it can sound like I might be focusing on visuals before getting HTML right? Or, maybe a dumbass noob like me shouldn't try saying anything to other noobs because my lack of knowledge and experiences might accidentally mislead them? I wanna know because I want to try being less harming to the rest of the world. The last thing I want is to deceive others like some others tried to deceive me, regardless of whether it is intentional or not. Good intention is NEVER an excuse for failures and mistakes. Failure is failure no matter what, and apparently, I failed miserably here. I want to get this stuff right.

In any case, a HUGE apology to you for getting in a way of other noobs trying to learn. I didn't even realize I said anything wrong in this particular thread. I was just trying to pitch in my two cents as @mmerlinn mentioned the threads I started. I'll stop doing that now and ask only relevant questions to learn from others until I get it right.

 

I do not appreciate your ignorant statement putting me in with the ass-cheek flappers. I responded to a specific question regarding text editors. If you, as you commonly do, let your ignorance of and prejudice against Emacs trigger some kind of derangement syndrome, you should disclose that. Or was it that I abandoned your fav editor? I did, at least, state my rationale for doing so. That's more than I've seen you do when disparaging Emacs.

gary

 

@kk5st and @Gary-SC... apologies, I didn't even notice you had responded to this thread. (old tab maybe?) You got lost between the low-count useless wonders that were @luckyd4r, @lukeo, and @stevenpark who contributed nothing other than ignorance to this thread.

Had I noticed/seen your posts you most certainly would have gotten a mention in the exclusions. My bad! Edited that passage so as not to name names or selectively praise just two to the omission of others.

Though Gary, your mentioning the shit-storm that is emacs loses you points as always, but that's more my personal vendetta against its dirty unwashed hippy creator and his equally mentally challenged "social movement"... which IMHO should be treated more akin to a "Bowel Movement". YMMV, but seriously to blazes with the FSF and double that for Stallman. Not a fan..

 

You didn't, I didn't even SEE your post.

I shouldn't have tried to praise the good and attack all else, when I couldn't even separate who was good and who was bad in the first place because the thread was so thoroughly crapped on.