Search the Community

Ar putea careva sa ma ajute cu niste explicatii si indrumari in domeniul HTML SI CSS ? In momentul de fata invat si lucrez mai mult pe telefon in aplicatia Solo Learning . Inca nu am un calculator la care sa lucrez dar considet ca diferenta nu ar fi asa mare atata timp cat invat . Daca este cineva care foloseste aplicatia Solo Learning si ar dori sa ma ajute i-as fi recunoscator.

Am dat de un site fain unde puteți învăța CSS într-un mod practic: http://cssreference.io/ Mai multe detalii: http://thenextweb.com/dd/2016/11/27/cssreference-io-gorgeous-visual-guide-css/

Caut persoana priceputa in PHP si CSS cu experienta in Moodle pentru un proiect relativ scurt, avand urmatoarele 2 faze: 1. Adaptare tema Moodle existenta (de pe themeforest.net) de la compatibilitatea curenta 2.6 la 2.9+ incat design-ul sa fie unul responsive, fara bug-uri si avand branding-ul specificat de mine (voi da grafica, culorile dorite, etc.) 2. Scriere plugin php pentru Moodle versiunea 2.9+ incat sa ofere un "analytics" dupa specificatiile mele Pret: negociabil, in functie de experienta, portofoliu si recomandari. Plata prin PayPal sau transfer bancar. Pentru peace of mind putem face un proiect privat printr-un site de freelanceri dorit (momentan detin conturi cu rep 100% de employer pe odesk.com si freelancer.com) sau pentru un cost mai redus (echivalent cu timpul pierdut), pot face un contract de "consultanta" pe firma mea ori chiar contract temporar de munca (daca doriti sa adaugati la CV). Skype: aa7670

CSE HTML Validator is a powerful, easy to use, user configurable, and all-in-one HTML, XHTML, CSS, link, spelling, JavaScript, PHP syntax, SEO, and accessibility checker. One-click HTML, CSS, JavaScript, SEO, spelling, accessibility, and link checking with CSE HTML Validator saves you time and helps you eliminate website problems that cause visitors to leave your website. Get it now! Read more at Free CSE HTML Validator (100% discount) - SharewareOnSale

Download here Free PHP, HTML, CSS, JavaScript editor (IDE) Codelobster PHP tanks

Aici sunt 2 tutoriale video pentru cei ce vor sa se apuce de web design. Photoshop Web Design for Begginers: https://www.youtube.com/embed/lDQVx77_KEM Css & HTML for Begginers: https://www.youtube.com/embed/sEo8ci9Lfmw Si inca ceva din care ai ce invata: https://www.youtube.com/embed/NG_FhztzoyU Primele doua le-am vazut si sunt super bine explicate,iar pe al 3 lea urmeaza. Bafta

Product Description CSE HTML Validator Standard for Microsoft Windows is a powerful, easy to use, user configurable, and all-in-one HTML, XHTML, CSS, link, spelling, JavaScript, PHP syntax, SEO, and accessibility checker. CSE HTML Validator helps eliminate website problems that cause visitors to leave your website. It increases your productivity and saves you time and money. Unlike many other HTML checkers, CSE HTML Validator features an unusually powerful custom syntax checking engine that is specifically designed to check HTML, XHTML, and CSS. CSE HTML Validator Standard offers all the same powerful features (with a few exceptions) of CSE HTML Validator Professional. Both standard and professional editions offer the exact same level of powerful syntax checking, including CSS, accessibility and link checking. CSE HTML Validator for Microsoft Windows is a powerful, easy to use, user configurable, and all-in-one HTML, XHTML, and CSS checker that also includes an SEO (search engine optimization) checker, a link checker, spell checker, accessibility checker, and built-in editor. Just open an HTML, XHTML, or CSS document with CSE HTML Validator and tell it to do its thing by pressing F6! Easy to understand syntax errors, warning and other messages will appear below the source of your document. Simply click on one of these messages and you will be taken to the place in your document where the problem is. Fix the problem with the integrated editor, check the document again (to make sure that the problem is fixed), and then save it when you’re finished. The Batch Wizard, included in the professional edition, lets you easily check/validate multiple files and/or URLs and will generate a neatly formatted HTML report with the results. The Batch Wizard can follow links to check an entire small to medium sized web site or part of a large one. It also includes a spell checker and link checker. If you think that you’re writing clean HTML, then you’ll be surprised at what CSE HTML Validator will find in your documents! CSE HTML Validator is an indispensable tool for any HTML author. An evaluation version of CSE HTML Validator Professional is available as a FREE download for you to try before you buy. CSE HTML Validator Lite, a less powerful but free edition, is also available. CSE HTML Validator Helps You Quickly Fix Your HTML Checks/validates an entire website (or part of it) given one URL or folder with the Batch Wizard (Pro+) Checks/validates a specified list of documents with the Batch Wizard (Pro+) Finds misspelled and invalid tag names, tag attributes, tag attribute values, and character entities Finds missing and mismatched quotation marks Finds missing or extra end tags Checks for accessibility issues based on Section 508 US Government Standards and/or the industry standard Web Content Accessibility Guidelines 1.0 (WCAG 1.0) or 2.0 (WCAG 2.0) (Std+) Checks CSS syntax (Std+) Checks the HTML and CSS output of dynamic pages (such as ASP and PHP pages) as you browse a website in the integrated web browser Checks for issues that can affect search engine rankings (Std+) Makes suggestions and gives tips to improve search engine rankings (Std+) Detects incorrect placing and nesting of tags Alerts you to incorrect or incompatible HTML based on a specific browser or HTML version (for example, notifies you of many Netscape specific or Internet Explorer specific tags, attributes, and attribute values) Finds deprecated tags, attributes, and CSS (Std+) Finds bad design issues and suggests improvements (Std+) Finds broken links (Std+) Finds misspelled words Product Homepage Here -> Download <-Deal Expires in: EXPIRED!

Pe scurt: am mai multe site-uri la care lucrez (de obicei platforme wordpress) si cunostintele mele php si css sunt limitate insa nici nu am vreme de experimente. Caut persoana serioasa pentru colaborare de lunga durata. In functie de experienta si abilitati sunt dispus sa negociez insa pornesc de la minim 30 ron / ora. Lucrul nu este full time si variaza, este "as and when", cand apar probleme carora nu le pot da eu de capat. Cunostinte Moodle constituie un avantaj. Daca esti interesat(a) lasa-mi mesaj aici sau in privat. Multumesc

Salut, Prestez servicii PHP, HTML, CSS gratis daca-i un proiect micut care nu necesita mult timp sau proiecte mai maricele pentru o suma modica. Lucrez cu laravel si bootstrap. Fac asta pentru experienta si portofoliu. Cei ce sunteti interesati, lasati-mi PM cu informatii. Multumesc.

An Intro to CSS: Finding CSS Selectors by Zandy Ring on July 25, 2013 Last month, we introduced a series on CSS (Cascading Stylesheets) and talked a bit about how you can use CSS to make your site look just the way you want. Today, let’s dive back in! WHAT’S A SELECTOR, AND WHY DO I NEED IT? After reading the last Intro to CSS post, you may have been left wondering how to find CSS selectors to target on your site. A selector is the code a site uses to make changes to how things display. In this post, we’ll look at how to find these selectors in any theme. To quickly recap the last post, we looked at hiding post meta data (the timestamp and author) and found that in the Twenty Twelve theme, the post meta data is targeted with the selector “footer.entry-meta” — but this changes with different themes. When you know what selector to use, you can target it with CSS to change how it displays, so knowing the right selector is important. USING THE DEVELOPER TOOLS TO FIND WHAT YOU NEED All the major browsers come with a developer tool (dev tool) that will let you view the code for the page. You can use a tool like Firebug (a download that is made for Firefox), or Chrome’s built-in Developer Tools. In this post, I’ll run through an example using Chrome. Here’s a really quick guide to finding the dev tools in a few browsers: Chrome: Access the browser tool via the browser menu: go to View > Developer > Developer Tools. Want a shortcut? The quickest way to access the dev tools in Chrome is to press alt+ctrl+i on a PC or alt+command+i on a Mac. Firefox: Download Firebug. Then, open the dev tools by hitting your F12 key on a PC, or by going to Tools > Web Developer > Firebug > Open Firebug on a Mac — on both you can just click on the Firebug icon in the top right of your browser window. Internet Explorer: Download the dev toolbar and install it. Then, access the tools using your F12 key. Each view will be a little different than the one below, but the key things we’ll look at will be the same. The webpage with the dev tools opened up in Chrome. There’s a lot to see here — and a lot you can look up! To keep this simple, let’s look at the Element tab (the default tab). Most dev tools include some kind of magnifying glass icon: Enable the magnifying glass by clicking on it. Then, mouse over the page — the CSS selectors in use will appear in a few different places: Notice that the element itself highlights (the blue is the actual size of the element, the orange is the padding around the element). You can see the element width and height in pixels (1). The next place you can see the selector name is in the Element Inspector itself (2). If you’re not familiar with HTML and CSS, this is a great place to start and poke around! This shows the selector as it appears in the code of the page itself. The third place you can see the selector is in the Matched CSS Rules pane (3). We’ll talk about the Matched CSS Rules pane again in the next article. Finally, you can see the chain of all the active selectors above that element (4). Note: “Element” is another way to describe an item on your page you want to change or style. The “selector” is the code the website uses to describe that element to the code. If we imagined that your website is your apartment, then an element could be your couch. The selector for your couch would be the serial number — it’s a specific way to identify the element. Finding the right element to test in your CSS tab is easy — when you know where to look! Let’s search for one more selector together. Perhaps you’d like to change the alignment of your post titles from left to right, but you’re not sure what to target. Once again, I’ll use Chrome and the Twenty Twelve theme, but give this a try on your theme! Note that the declaration we’ll use is text-align: right. You’ll be able to see that in action below. Here are some steps to run through: 1. First, go to one of your posts so you can see the post title. 2. Pop open your dev tools (in Chrome on a Mac, I hit command+option+i). 3. Click on your magnifier icon. 4. Run your cursor over the post title (tip: move your mouse until you see an area larger than the letters themselves highlight — you don’t want to target the “a” tag in this example). 5. When you see the post title area highlight, click your mouse once to “freeze” the magnifying action so you can use the mouse without losing the selector. 6. Identified! Now to plug it in! And here is what I found in Twenty Twelve: The selector is displayed as h1.entry-title in this theme. EDITING THE CSS Now that you have the selector in hand, you can use it in your CSS Customizer tab. First, navigate to your Customizer, then choose the CSS option: When the Customizer is open, you’ll see the post title (“Solace of a lonely highway”) and the CSS entry area: When we add some CSS we can see the post title re-align accordingly: Using text-align: right; we can shift the title to align on the right instead of the left. We know that the selector displayed as h1.entry-title, but it works as just .entry-title. A quick way to discover how much of the selector you should use is to plug it into the Customizer and see if it works the way you want it to! We used the text-align declaration here with right so the text aligns on the right, but it also accepts left and center — why not try both of these, too, and see what happens? If you want to copy and paste the code I used into your CSS tab, here it is: .entry-title {text-align: right;} As soon as you enter valid CSS into the Customizer, you’ll see your change take effect! Testing CSS right in the Customizer is a no-risk method — you can erase it if you don’t like what you see, and no one else can see it before you save it. If you’d like some additional resources on editing CSS, browse our support page on Custom CSS, and don’t forget to check out the recommended resources at the bottom. In the next post, we’ll explore the Matched CSS Rule pane, and see how you can use it with the Customizer to get these selectors working for you! Sursa: An Intro to CSS: Finding CSS Selectors | The Daily Post E de mare folos acest Intro. Sper sa fie de ajutor

Today we are going to show you how to mask images with shapes plus some nifty zoom animation effects with just HTML & CSS. I have seen this kind of styling and effect in many portfolio websites and let me show you how it's made. Personally, I don't think we should withhold ourself from using new technology or technique such as CSS3 on web projects because of old browsers don't support them. I believe we should "reward" users with modern browser by giving them a better user experiences. Therefore, I enjoy using CSS3 in my projects, but of course, we have to make sure it can degrades gracefully or at least display well in old browsers. This tutorial will be using CSS3 transform which means, old browsers will not show the zooming effect. Good news is, I have coded it, even if it's old browsers, it will still look pretty good and usable. If you want something hardcore, you can check out my previous tutorial - Create Beautiful Hexagon Shape With Pure CSS3. Here are some of the websites that are using the similar way in theirs portfolio page: IMAGES We want this example to be usable in most browsers, therefore, we're not going to draw the shape using CSS3 or whatever fancy techniques. We stick to the ancient way - transparent PNG. This is how each of the shape looks like: HTML To make it easy to understand, I have made an image to illustrate what each layer does. <div class="shape"> <a href="{URL}" class="overlay {round|hexagon|pentagon}"></a> <div class="details"> <span class="heading">{TITLE}</span> <hr /> <p>{DESCRIPTION}</p> <a href="{URL}" class="button">VIEW</a> </div> <div class="bg"></div> <div class="base"> <img src="{IMAGE URL}" alt="" /> </div> </div> In case you need the fonts I used in this tutorial, here is it: <link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'> CSS We don't have Javascript in this tutorial. We use :hover pseudo code and also CSS animation to do simple mouseover and zooming effects. Here is the portion of code that does all these animation effects: ...... .shape .overlay { display:block; width: 310px; height: 310px; position: absolute; top:-5px; left:-5px; -webkit-transform: scale(1,1); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 0.6s; -moz-transform: scale(1,1); -moz-transition-timing-function: ease-out; -moz-transition-duration: 0.6s; transform: scale(1,1); transition-timing-function: ease-out; transition-duration: 0.6s; z-index:500; /* allow user to actually perform actions underneath this layer */ pointer-events:none; background-repeat: no-repeat; } ...... /* hover effect */ .shape:hover .overlay { -webkit-transform: scale(1.07,1.07); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 0.3s; -moz-transform: scale(1.07,1.07); -moz-transition-timing-function: ease-out; -moz-transition-duration: 0.3s; } .shape:hover .bg { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; display:block; } .shape:hover .details { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; z-index:450; display:block; } ...... Here is the full CSS: .shape { width: 300px; height: 300px; position: relative; } .shape .overlay { display:block; width: 310px; height: 310px; position: absolute; top:-5px; left:-5px; -webkit-transform: scale(1,1); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 0.6s; -moz-transform: scale(1,1); -moz-transition-timing-function: ease-out; -moz-transition-duration: 0.6s; transform: scale(1,1); transition-timing-function: ease-out; transition-duration: 0.6s; z-index:500; /* allow user to actually perform actions underneath this layer */ pointer-events:none; background-repeat: no-repeat; } /* different shapes */ .shape .overlay.round { background: url(round.png); } .shape .overlay.hexagon { background: url(hexagon.png); } .shape .overlay.pentagon { background: url(pentagon.png); } /* hover effect */ .shape:hover .overlay { -webkit-transform: scale(1.07,1.07); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 0.3s; -moz-transform: scale(1.07,1.07); -moz-transition-timing-function: ease-out; -moz-transition-duration: 0.3s; } .shape:hover .bg { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; display:block; } .shape:hover .details { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; z-index:450; display:block; } /* content styles */ .shape .bg, .shape .details { position: absolute; width: 300px; height:300px; display:table-cell; vertical-align:middle; text-align:center; top:0; left:0; opacity:0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; display:none; } .shape .bg { background: #4b5a78; } .shape .details span.heading { font-family: 'Roboto Condensed', serif; font-size:30px; display:block; margin-top:70px; color:#fff; text-decoration:none; } .shape .details p { font-family: 'Abel', sans-serif; color:#fff; width: 70%; font-size:14px; margin:0 auto; } .shape a.button { padding:5px 15px; font-family: 'Abel', sans-serif; font-size:12px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; background: #2f3644; text-decoration:none; color:#fff; display:block; width:50px; margin:0 auto; text-align:center; margin-top:15px; } .shape a.button:hover { background: #fff; color: #2f3644; } Conclusion That's it, pretty simple to make and look elegant too. You can change the shape to whatever you want. This tutorial is tested on IE8 and should work in most modern browsers. If you have any questions, drop a comment. Demo | Download Source Author: Kevin Liew

Today, we introduce a new unit to Code Year: HTML and CSS. You'll learn how to build and customize webpages, and eventually combine this with your JavaScript knowledge to add interactivity and animation to websites. Code Year » Week 13: Build a Webpage Code Year: Week 13: Build a Webpage | Codecademy via mail

Salut, Ma intreb, in afara de HTML si CSS ce este indicat sa mai stii ca sa poti face ceva mai ok ? Browser Scripting - JavaScript si jQuery / AJAX ? Server Scripting - PHP ? Multumesc, Greenbytes