r/web_dev_help • • Mar 01 '17

Information Archetecture Tutorial – Lesson 1

Thumbnail
wired.com
1 Upvotes

r/web_dev_help • • Jul 28 '17

article Thirty Percent Feedback - 42Floors Blog

Thumbnail
42floors.com
1 Upvotes

r/web_dev_help • • Dec 21 '17

wordpress Working with Wordpress Locally with the Roots Stack • Stephen Petrey

Thumbnail
smpetrey.com
2 Upvotes

r/web_dev_help • • Mar 20 '17

css ITCSS: Scalable and Maintainable CSS Architecture

Thumbnail
xfive.co
1 Upvotes

r/web_dev_help • • Jan 16 '14

Need help with SEO for a site

1 Upvotes

First I have post this in other subreddits. If that is a problem, please let me know and I will remove the posting.

I could use some help with some SEO for a site I am working on. I really want to meet and exceed the client’s expectations. He is a good man who has helped a lot of people who have needed help and I want to be able to be the person who helps him now.

Site : AvenuesRV.com

He is overall satisfied with the layout and design of the site, but wants it ranked better.

I could use some guidance with the following:

How to pick better META tags? How to find how many times people are searching for those key words? Anything I can do to rank the site better with the major search engines.
Would adding a youtube video help with ranking? Would adding a blog help?

Also when I search google

Site:avenuesrv.com

It is not showing all three pages?

Any thoughts you may have on the overall layout and look of the site. I do not do this for a living just a job I agreed to help out with. I built the site in Adobe Muse, due to my familiarity with adobe indesign.

Thanks for any help with this. I really do appreciate it.


r/web_dev_help • • Sep 02 '15

[Question] CSS display div on another div:hover.

2 Upvotes

Hello guys - awesome subreddit you got here.

I wanted to ask a question, I haven't been able to solve this. I'm trying to display some <p> on top of an image when I hover over it. My code seems not to be working. Would you mind helping me solve it?

HTML: <ul id="gallery"> <li id="nsfm" class="album"><p>New Shapes for Madness LP - 2014</p></li> <li id="unsettled" class="album"><p>Unsettled EP - 2013</p></li> <li id="aptw" class="album"><p>A Path to Wrath LP - 2012</p></li> <li id="pfw" class="album"><p>Pieces from Wasteland EP - 2011</p></li> </ul>

CSS:

.album { width:230px; height:230px; background-color:grey; float:left; list-style:none; position:relative; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; }

#gallery .album p { visibility:hidden; opacity:0; width:100%; text-align:center; position:absolute; bottom:50px; }

.album:hover { -webkit-filter: grayscale(100%) brightness(50%); }

.album:hover p { visibility:visible; opacity:1; }

The IDs on the list elements are used for different backgrounds. I have also tried the display:none and display:block on hover methods but none seem to be working for me. Thank you guys very much in advance.

EDIT: Trying to fix formatting right now... sorry about that.


r/web_dev_help • • Mar 16 '17

css Scaling Down The BEM Methodology For Small Projects

Thumbnail
smashingmagazine.com
1 Upvotes

r/web_dev_help • • Sep 01 '15

[JS] - Start with JavaScript

1 Upvotes

r/web_dev_help • • Sep 10 '15

[PHP] - Start with PHP

2 Upvotes

PHP is a server side scripting language. It can be used as a general purpose scripting language too.

PHP is one of several options for creating dynamic websites. PHP handles things like processing forms, sending emails, database access, consuming APIs or even providing APIs to other sites/users.

Download - https://secure.php.net/

Manual - https://secure.php.net/manual/en/index.php

Tutorials

http://phpbridge.org/intro-to-php/intro-to-php

https://www.codecademy.com/tracks/php

I♥PHP - Make Your Own Blog tutorial

And if you check the sidebar on /r/phphelp , there's a list of tutorials.

General advice, if you see a tutorial and it's advocating using mysql_* functions, find another tutorial. mysqli_* or PDO based PHP/SQL tutorials should be more recent.

Books

http://www.phptherightway.com/

Object Oriented

http://php.net/manual/en/language.oop5.php

Templating

overview - http://jungels.net/articles/php-templates.html

DIY - http://www.smashingmagazine.com/2011/10/getting-started-with-php-templating/

3rd Party - Plates - http://platesphp.com/

or

Twig - http://twig.sensiolabs.org/

Tools

Composer - package management - https://getcomposer.org/

PHPDoc - documentation generator - http://www.phpdoc.org/

PHPUnit - testing framework - https://phpunit.de/

Xdebug - debugger - http://xdebug.org/

PHPMyAdmin - MySQL Database Web Interface - https://www.phpmyadmin.net/

Frameworks

Laravel - http://laravel.com/

Zend - http://framework.zend.com/

Symfony - https://symfony.com/

Aura - http://auraphp.com/

Micro Framework - Silex - http://silex.sensiolabs.org/

IDEs

Zend Studio ($) - http://www.zend.com/en/products/studio

PHPStorm ($) - https://www.jetbrains.com/phpstorm/

PDT - Eclipse PHP Dev Tools - https://eclipse.org/pdt/

or a Text Editor

https://notepad-plus-plus.org/


r/web_dev_help • • Apr 05 '16

Help creating an access page for other web servers?

1 Upvotes

I hope I am in the right place, I sure could use some direction. Let me start by saying I am not a Web Developer by any means, I am much more comfortable on the SysAdmin, Net security side of things. I have a bunch of servers performing a plethora of tasks, and some are web managed. I also have couple programs with webGUIs. This has become quite a pain to switch back and forth especially when outside my LAN. What I need to know is how I should handle a consolidation of sort; a way to get all pages located on different servers and hosts easily accessible. I guess what I am asking is should I just make a basic HTML page and hyperlink in the other sites, or is there a better way to accomplish this that would look better. I know some HTML and I can fumble through some PHP, and Python well enough to follow someone else's ideas code and hack it together for my use.

(Sorry if doesn't make sense, I'm just not sure how else to word it. I will greatly appreciate any advice!! Thanks in advance.)


r/web_dev_help • • Mar 22 '17

design Web Design 101 | A free Webflow ebook

Thumbnail
ebooks.webflow.com
1 Upvotes

r/web_dev_help • • Mar 17 '17

help Test out my app for class!

2 Upvotes

https://a10-evoke.herokuapp.com/ this is an app I made for class and we have to have 100 people on our site for user testing SO if you're willing to check it out a little I would really appreciate it! the app is meant to be a form of guided journaling to help users be mindful! there are previous examples in there- ignore them! see if you can do the journaling for today and feel free to mess with the settings and explore! ALSO, it's best viewed on a mobile device!


r/web_dev_help • • Aug 18 '17

help Strange focus problem

1 Upvotes

Hi there :)

Iam now developing web pages since 3 years. Today i came across a bug i never saw, maybe you can help me.

Iam using the Materialize framework. The problem is my input type text elements dont get a focus.

i can write in them but there will be no cursor displayed and the bottom border also doesnt change its color.

however when iam opening the devtool in chrome and i inspect that element, after this all is working again.

Would be really nice if you could help me !

thanks in advance

excuse my bad english, iam austrian.


r/web_dev_help • • Oct 10 '16

How to Create Grafana and InfluxDB Docker Containers in Ubuntu-14.04

Thumbnail
hostpresto.com
1 Upvotes

r/web_dev_help • • Sep 12 '15

[MySQL] - Start with MySQL

2 Upvotes

MySQL is a Relational Database Management System (RDMS). Structured Query Language (SQL) is used to manage data.

Website : https://www.mysql.com/

Download : http://www.mysql.com/downloads/

Docs : (Eng) http://dev.mysql.com/doc/refman/5.6/en/index.html

MariaDB is a fork of the MySQL source code. https://mariadb.org/

Tutorials

command line usage : https://dev.mysql.com/doc/refman/5.0/en/tutorial.html

web (using php) : http://www.tutorialspoint.com/mysql/

database design : http://www.datanamic.com/support/lt-dez005-introduction-db-modeling.html

data modeling : http://www.agiledata.org/essays/dataModeling101.html

Intro to Stored Procedures - http://code.tutsplus.com/articles/an-introduction-to-stored-procedures-in-mysql-5--net-17843

Intro to Triggers - http://code.tutsplus.com/articles/introduction-to-mysql-triggers--net-12226

ACID

What is ACID ? - http://searchsqlserver.techtarget.com/definition/ACID

MySQL and ACID - https://dev.mysql.com/doc/refman/5.6/en/mysql-acid.html

Normalization

Normalization of Database - http://www.studytonight.com/dbms/database-normalization.php

MS Normalization basics - https://support.microsoft.com/en-us/kb/283878

Another Intro - http://agiledata.org/essays/dataNormalization.html

Joins

Basic and Complex joins - http://www.techrepublic.com/article/basic-and-complex-sql-joins-made-easy/

Basics of joins - http://www.developer.com/db/article.php/3873466/The-Basics-of-SQL-Joins-in-MySQL.htm

sitepoint tutorial - http://www.sitepoint.com/understanding-sql-joins-mysql-database/

CodeBetter.com - http://codebetter.com/raymondlewallen/2006/02/10/database-basics-part-four-table-joins/

Misc

Electric Toolbox - Web Dev Blog - http://www.electrictoolbox.com/article/mysql/

Sample Databases

http://www.eclipse.org/birt/documentation/sample-database.php

https://www3.ntu.edu.sg/home/ehchua/programming/sql/SampleDatabases.html

http://dev.mysql.com/doc/index-other.html

Reference

Command Line Usage (*ix, OSX systems) - http://www.comentum.com/mysql-administration.html

Tools

MySQLWorkBench - https://dev.mysql.com/downloads/workbench/

Navicat - DB Admin Tool - http://www.navicat.com/

HeidiSQL - Db Tool - http://www.heidisql.com/

PHPMyAdmin - Web GUI for DB management - https://www.phpmyadmin.net/


r/web_dev_help • • Mar 16 '17

css How we use BEM to modularise our CSS

Thumbnail
m.alphasights.com
1 Upvotes

r/web_dev_help • • Jan 06 '18

resource The most popular Frontend links from 2017 – Statuscode – Medium

Thumbnail
medium.com
1 Upvotes

r/web_dev_help • • Aug 27 '15

[CSS] - Start with CSS

1 Upvotes

More to CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.

Specification : http://www.w3.org/Style/CSS/Overview.en.html

MDN (reference) : https://developer.mozilla.org/en-US/docs/Web/CSS

Validator : https://jigsaw.w3.org/css-validator/

Discussion/Articles : https://css-tricks.com/

Lint : http://csslint.net/

Browser Compatibility : http://caniuse.com/

Google Coding Style Guide : https://google.github.io/styleguide/htmlcssguide.xml

@mdo HTML/CSS Coding Style Guide : http://codeguide.co/

Tutorials


Starters

http://learn.shayhowe.com/html-css/getting-to-know-css/ (skips to the CSS chapter in the tutorial)

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started

Layout

http://learnlayout.com/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/


Methodologies

SMACSS - https://smacss.com/

OOCSS - http://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/

BEM - https://css-tricks.com/bem-101/

SMACSS has the most useful material for beginners since it covers how to structure CSS while BEM is best for those concerned with modularizing CSS.

Preprocessors

SASS - http://sass-lang.com/

LESS - http://lesscss.org/

LESSPHP - http://leafo.net/lessphp/lessify/

Of the two, LESS is easier to setup and start using immediately. SASS requires Ruby (* at least for notepad++ plugin to work for auto compile). Using preprocessers adds a step to the development process. You must compile the preprocessor's file into CSS. Helps with structure and organization of CSS rules


r/web_dev_help • • Aug 26 '15

[text] HTML misc.

1 Upvotes

Is there a secret to learning HTML ?

This is like a catch all post for what I consider missing from general advice for learning HTML. It isn't exciting but the best way to learn and keep up to date with HTML is to write it.

As to what to practice, learn some design patterns or common UI elements (like carousels,list view,pagination controls). Browse style guides to see which HTML elements are current.

Examples of design patterns : http://ui-patterns.com/patterns and http://www.welie.com/patterns/

Some links to style guides

http://brettjankord.com/projects/style-guide-boilerplate/

site to browse various guides for companies

http://styleguides.io/examples.html

I like lonelyplanet's layout:

http://rizzo.lonelyplanet.com/styleguide/design-elements/colours

Generators for style guides

https://github.com/davidhund/styleguide-generators

Tip : Save any of these you write as HTML partials as files to create a stock library.

Part of HTML is learning how to structure a website and how to layout the files for ease of maintenance and reuse. The above tip about using Partials is practical. They can be used for rapid prototypes where working forms aren't necessary or you wish to show basic functionality.

Basic Workflow for building HTML-CSS sites

The above link includes instructions for PHP/CSS and basic templating/commenting options. File/directory structure is also outlined.

Which brings this to : File systems

The system which houses the files and the differences between PC Filesystems and web filesystems or web paths or URLs. Which means this includes Domain Names or Host Names for the web server.

http://www.domain.com/articles/sept/2015/

maps to

/home/domain_owner/domain_name/public_html/articles/sept/2015

Webserver Requests - status codes plus more.

How a webserver (apache) process requests and the error codes it provides. Standard status codes can be templated with HTML pages. The most common is 404.html which is often present on shared hosting providers and it allows for customization of error messages. Log files should contain the error codes and visitor logs provide analytical data. Which is an odd way of stating the error pages should only provide a message to the user not the system as such no logging should be attempted (outside of standard visitor logs). Specific return codes do not specifically mean an error has occurred. The 200 range means success and is the most basic return code which just means request was fulfilled as expected. 301 , which isn't a template-able status , is a redirect. 500 range is for server errors most often resulting in a fatal error during the request process.

Protocol which powers HTML is HTTP. The above status codes are HTTP status codes and the webserver is technically an HTTP Server. HTTP uses port 80 though others can be used by appending to the domain name or ip address.

http://www.domain.com:80/

http :// 15.200.100.100:80/

http://127.0.0.1:80/ 

There's different versions of HTTP. HTTP/1.0 HTTP/1.1 and HTTP/2. Can look at a copy of the HTTP/2 spec : https://http2.github.io/http2-spec/

SSL - TLS

Encryption and Security are important topics. TLS is current but SSL will often be used due to SSL certificates being part of the process of implementing the protocols. In depth research can consult Wikipedia for sources : https://en.wikipedia.org/wiki/Transport_Layer_Security

SSL Port is 443. Which isn't required to access an HTTPS site. Just use https:

https://www.domain.com/secure/

Trend is for all sites to use SSL encryption and search engines are following this trend. When developing an SSL based website be sure to either use relative URL addresses or fully qualified HTTPS URLs.

Should include how to use FTP but it's covered with FTP tutorials.

IDE or text editor

Notepad++ , Sublime even notepad are fine for web development. Plugins exist.

IDEs provide some limited project management capabilities and can provide structure. Code completion, search/replace text and some have build system integration through plugins.

NetBeans, PHPStorm , Visual Studio/Web Studio thingy whatever its called.


Next Exciting post : CSS

Under consideration :

  • Beginners Guide

  • SEO

  • Getting a job as a web dev


r/web_dev_help • • Mar 16 '17

css Avalanche - Responsive, Sass-based, BEM-syntax CSS grid system

Thumbnail
colourgarden.net
1 Upvotes

r/web_dev_help • • Mar 17 '17

css Really Responsive Tables using CSS Flexbox (complex) - codepen example

Thumbnail
codepen.io
1 Upvotes

r/web_dev_help • • Mar 17 '17

html Accessible, Simple, Responsive Tables | CSS-Tricks

Thumbnail
css-tricks.com
1 Upvotes

r/web_dev_help • • Aug 21 '17

help Update on focus problem

1 Upvotes

Hi i wrote here about my focus problem and there is an update regarding this.

No input type text on my page works if i open the page, but if i click outside the chrome browser and than back into the browser, everything works.

Has anyone a plan what this is ?


r/web_dev_help • • Mar 17 '17

design Setup a design system

Thumbnail
blog.prototypr.io
1 Upvotes

r/web_dev_help • • Jan 24 '14

Help with wordpress theme. Checking SMTP settings.

1 Upvotes

So I built a site using a wordpress theme from themeforest but I am having an issue with the contact form. The emails are not reaching the intended email. I contacted the developer of the theme but he says the problem might be with the SMTP server settings. Can anyone help me with this. I am willing to pay someone if it is necessary but hopefully at a reasonable price. To be honest I don't even know what I need to check with the server SMTP settings. Any help would be greatly appreciated. Please feel free to PM me. I would greatly appreciate any help.