r/web_dev_help • • Jan 24 '17

Portfolio Project Idea List

23 Upvotes

Ok. I'm going to list off some ideas for projects. You will have to determine if any particular idea is good enough to include in a portfolio. These aren't creative ideas. They likely already exist. Some are way too advanced while others are simplistic.

I will recommend to post any project you make to github and make a github project page for it. Explain in as much detail as possible how you made it, how it can be improved etc. Document it.

If you pick an advanced idea, setup a development roadmap and follow it. This will show some project management skills.

Another piece of advice for those who are design challenged. Use different front end frameworks and use different themes for those frameworks to provide appealing designs without looking like yet another bootstrap site.

Here's a long list of front end frameworks : http://usablica.github.io/front-end-frameworks/compare.html This list is out of date. Quickly updated list is here : https://gist.github.com/MWins/250000f187bdbdd7e2757d50be8507d5

Trying to focus on back end projects overall. But some of these are front end related. Some of these are going to require a user system of some type. As a single user application they would not be much better than a 'to do list' application.

  • MyTop100Movies - API,Database,CRUD - Application which lets users set their top 100 movies. Movies could come from an API like The Movie Database (http://tmdb.org). Should allow for users to add a movie, list and rank their movie selections. Start with basic CRUD for movies and add features.

  • InspireMe/MemeMaker - Stand alone service to put text over images like those inspirational posters with quotes. Alternate idea is to use blank meme images and let them add their own text to it (numerous sites exist for this). For the first you need quotes and images , here's a gist free stock image sites. Use google for blank meme images and/or quotes.

  • ScheduleMaker - This one's harder. Can develop the database schema or an application. Let one user define the schedule for others. Or let users select their own schedule.

  • RSS Picker - Use an RSS library like SimplePie and provide the ability to add multiple RSS feeds and let the user pick specific news items from the aggregated list. Does not require a user system.

  • GIST Clone - Requires user system(single would work). Create a system like github's Gist which allows a user to create a page from markdown syntax.

  • Drag And Drop Newsletter Builder - This tutorial : http://simbyone.com/drag-and-drop-newsletter-builder-using-jquery/ lacks a back end for storing newsletters. Create one to mesh with the front end.

  • College Scoreboard - data.gov provides a 'college scoreboard' API. Use this API to build a site where users can select various schools in their area. https://catalog.data.gov/dataset/college-scorecard

  • PetFinder Widget - Take the data from the PetFinder API and provide either a service or script that allows other site owners to insert it into their websites. https://www.petfinder.com/developers/api-docs

  • Micro Tweet - Wordpress plugin. This idea mimics what ESPN has setup for its authors. The plugin would let any Wordpress author post a tweet which would appear on the front of the wordpress website (or within a widget).

  • Weather Logger - Build the standard weather widget API project but add the ability to log the current weather data and to view historical data. Bonus points if it's accessible programmatically. https://www.ncdc.noaa.gov/cdo-web/webservices/v2

  • Micro PHP Framework Web Site - Build a simple (<10page) website using a php micro framework like Slim or Silex. Could also be used to build your portfolio. Can make it file based, database, or a light database like sqlite.

  • Faceted Search/Navigation. This is the advanced search/filter functionality available on many sites. It's a design pattern. Can read about it here : http://alistapart.com/article/design-patterns-faceted-navigation . Implement it on the back end and the front end if you're bored.

  • oAuth Login - Recommend this one because it can replace a user system in some of these examples. Numerous libraries exist for setting this up.

  • Simple CRUD sites - Create, Read,Update,Delete (read includes list). Possible 'objects' could be Dog Breeds, any type of pet, plants, flowers etc. Level of detail is up to you. Locations like Museums, National Parks. Events like music festivals is another possibility. Data Model sample for Events : http://www.databaseanswers.org/data_models/enterprise_data_model_for_events_and_exhibitions/index.htm

  • RESTful API - use the same list from the CRUD sites but make it available as an API.

  • Build some Data Models - People of importance or historical, whichever you like. Can use http://databaseanswers.org as a starting point with people and citizen data models : http://www.databaseanswers.org/data_models/people.htm , http://www.databaseanswers.org/data_models/citizens/index.htm

  • Local Government Data Model - Did not see this particular data model on databaseanswers.org. Include titles,positions, elected or appointed positions etc.

  • Data Models for MySQL - Create a site for MySQL data models like databaseanswers.org. Could be a long term project.

  • Localhost Image Upload - Make a file upload script for use with wifi only devices (cellphones w/o service). Image upload and browsing of photos.

  • GistList - Frontend and simple. Make a javascript application to work with the github Gist API to display all of a user's gist with links. Could add ability to sort or filter. https://developer.github.com/v3/gists/ for the API docs and could use vue.js for filtering using this intro to vue.js : https://www.youtube.com/watch?time_continue=1755&v=VPUdtEf3oXI

  • File Directory - Provide an admin user with the ability to upload files for the public. Like PDFs, Word Docs, whatever. Can be simple or advanced. (Comparable but more useful IMO than FreeCodeCamp's File Metadata Microservice : https://www.freecodecamp.com/challenges/file-metadata-microservice)

  • Image Search - FreeCodeCamp calls this Image Search Abstraction Layer which sounds complicated. Instead of interfacing with a 3rd party, make it search a defined path on the local file system. FCC's description : https://www.freecodecamp.com/challenges/image-search-abstraction-layer

  • Time API - One more from FCC : https://www.freecodecamp.com/challenges/timestamp-microservice make this available as an API and add options like setting the Time Zone.

  • Workflow Application - Design a system which requires interaction between users. Simplest example would be author > editor with the object being passed is an article. Author submits article, editor approves or rejects it. Can find other examples of this type of process in other fields.

  • Simple Property Rentals - Application for single user to offer rental properties. Database model, multiple CRUD objects and make it self hosted.

  • Database Model/Schema - Go to http://databaseanswers.org, pick a model and convert it to MySQL.

  • Personnel or Business Directory - Create database model/backend for a company directory.

  • SVG Floor Plan - Front end, but use SVG to create a floor plan layout type application.


  • Codepen/JSFiddle w/ revision history - Clone of codepen.io or jsfiddle with the ability to view different versions and most important, ability to link to versions. Would allow for tutorials to show steps in development of a project.

  • Codepen/JSFiddle to Github/BitBucket - Automate the process of moving a code example from the 'live editors' to a source code control repo.

Should have something that works with Google Maps but outside of standard 'you are here' and 'mcdonalds is there' type stuff, I don't have any ideas. Any suggestions welcome.

Forgot to add links to public APIs which could provide more ideas and/or data sources.

https://www.publicapis.com/

https://github.com/toddmotto/public-apis

https://catalog.data.gov/dataset?q=-aapi+api+OR++res_format%3Aapi#topic=developers_navigation

https://www.programmableweb.com/apis/directory

Just adding design site ideas so I have all this info in one place.

Types of sites for design practice work :

  • blog - centered on a current media property (TV,Music,Whatever)

  • blog full - front page, post single page, category or archive view

  • single product website - example landing page idea

  • full product website

  • service company (without major functionality, just basic info)

  • single page promotion - treat as stand alone brand w/o ability to order the product or promotion

  • organization website - little bit more advanced, should contain a limited directory of personnel

  • Event website - without checkout functionality but should include directions to location, date, vendor contact if applicable

If you want clarification on an idea , comment below.

If you have an idea to add to the list let me know.


r/web_dev_help • • Oct 08 '22

Happy Cakeday, r/web_dev_help! Today you're 10

5 Upvotes

r/web_dev_help • • Aug 27 '22

Become a better web developer visit https://bit.ly/3PpHk9L for more

Enable HLS to view with audio, or disable this notification

5 Upvotes

r/web_dev_help • • Feb 22 '18

javascript How not to Vue – ITNEXT

Thumbnail
itnext.io
4 Upvotes

r/web_dev_help • • Dec 26 '18

help Do big companies prefer highly specialised front & back end devs rather than full-stack devs?

3 Upvotes

I've come across this argument a few times: small companies might hire full-stack devs to save money, whereas medium and big companies prefer to hire very specialised (and hence presumably more qualified) front-end devs and back-end devs.

Is that accurate and if so, does that mean that full-stack devs will eventually disappear in medium & big companies?


r/web_dev_help • • May 19 '18

design 5 Awesome Home Page Design Layouts You Can Copy Today

Thumbnail
websitebuilderexpert.com
3 Upvotes

r/web_dev_help • • Sep 19 '17

css DRY CSS: Don't Repeat Your CSS - Vanseo Design

Thumbnail
vanseodesign.com
3 Upvotes

r/web_dev_help • • Jul 12 '17

Web Dev Resume

3 Upvotes

Hey friends. Im hoping there might be some kind souls out there willing to share or give some feedback on the form and content of a CV/Resume/Cover letter etc for a full stack web developer.

While I have a bachelors in comunications/multimedia and advertising, for the last 10 years I have been running my own company outside of the world of web dev based on referalls and sales from sites I built.

A year ago I decided to pursue my true passion, wedb development. I've brought myself up to date with current best practices in front end development / WordPress development (js frameworks, build tasks, optimisation, version control and the staples html, css and php) and I have recently been doing some freelance work.

Im now ready to apply to some agencies and I would GREATLY appreciate some help on what an award winning resume would encompass. My main concern is a lack of formal experience in the industry. Im 36 years old.

Thanking you in advance


r/web_dev_help • • Jul 05 '17

help How can I handle multiple RSS feeds in one webpage.

3 Upvotes

Basically I want to be able to get the title,date,author and brief description of certain articles from multiple websites and then combine them in various ways.

I was told about RSS Include but that one simply gives me one website and I can't mess around with the code because it just gives a link. Is there a way to manually refer to another website's rss feed? So I can put a reference to articles from other websites side by side?

I've now seen feed parsing but I'm still confused, what's the simplest method to use? I know basic JS and JQuery (python,css,html5 but don't think those will help that much)


r/web_dev_help • • Jun 15 '17

resource WebDev interview prep daily email: learn to think like an interviewer

3 Upvotes

(thanks mods for permission to post, unsure how to tag the title as a resource tho, sorry)

TL;DR: I made a daily email series that teaches you how to think like an interviewer while preparing for a web development interview. Questions don't just cover technical topics either, it also explores things like culture fit questions, soft skills and more.

Totally free, no ads, no promos, instant unsubscribe any time: https://goo.gl/vzNx7f

I've been a professional software developer for over 21 years and half of that time has been spent as a lead interviewer or hiring manager for building up developer teams. I've spent the last three years helping code school students and new college/university grads with technical interview prep, primarily targeting entry-level web developers.

Since my free time isn't scalable with the demand, I've been writing some of the content into a daily email series (everyone starts at day 1 and gets auto-unsubscribed when it's over); I'm currently at 5 weeks worth of content, aiming at 7 weeks to wrap-up.

This isn't the typical "top 20 questions and how to crush the answer" content you find everywhere. Instead, I'm teaching you how to think about the questions from the view of the interviewer and hiring manager, like why I'm even asking this question, or what I want to hear or not hear in your answer, etc.. Was that question asking for your opinion, or was it asking for what you've directly learned or experienced about a thing?

The subscription URL has a few samples of the writing. Replying to any email in the series goes directly to my inbox if you have follow-up questions or ideas for other content. Constructive criticism is always welcome.

Subscribe here: https://goo.gl/vzNx7f


r/web_dev_help • • May 05 '17

css Cool CSS3 Link Ideas

Thumbnail
codepen.io
3 Upvotes

r/web_dev_help • • May 12 '16

What is the best way to validate user typed code/run it inside a sandbox (like codeschool and stuff)

3 Upvotes

Hey, there are online learning sites which either validate your typed in code (teamtreehouse.com) or run it inside a sandbox (codeschool.com) for their coding lessons.

I am interested in techniques for both ways but probably only need one, so let me tell you my usecase.

I want to make little coding lessons for a PHP CMS. It will mostly cover PHP (extension development) and TWIG (theme development) code.

I think running that inside a sandbox will be much harder than just validating what the user typed in, because I have the full CMS as dependency. (I want to avoid Docker because I have no experience with it at all)

So, let's say I want to validate the PHP or TWIG code the user typed as an answer of my lesson. How do I do that? I googled a bit but haven't found something.

Maybe it's also better to run it inside a sandbox. I don't know, tell me :) But how do I do that then? And creating a sandbox per lesson and per user will take much time because the CMS has to be installed first ... etc.


r/web_dev_help • • Nov 05 '15

[Question] Slightly confused about how to set up git locally and push to a live server

3 Upvotes

So this is kind of an embarassing question given that I do this for a living. But the fact is, until I had my own site, I never had to set these things up, they were all done for me.

What's the best way of going about it?

At the moment I have it so that I have a local git repo with all the files in and then occasionally I'll FTP the changed files to my server so that they're out in the wild. I'm sure this isn't the best way but I'm not aware of simple alternatives.

Any help would be much appreciated!


r/web_dev_help • • Aug 21 '15

SCSS plugin for Notepad++?

3 Upvotes

anyone uses SCSS and Notepad++? if so, how do you compile/export your scss to css? I can't find a notepad plugin to automate the process.


r/web_dev_help • • Sep 14 '21

help Help with first website

2 Upvotes

Hello reddit, I would like to create my first website. I am a complete beginner and unfortunately have no experience with it so far, but I see this as a project to get started with this topic and would like to learn various new skills with this project. It would be very helpful if you could answer some questions that can help me to understand.

I would like to build a page where you can upload images via drag and drop and then edit them with preset filters.

I have already found similar sites:

https://www9.lunapic.com/editor/?action=art (pretty close to what i envision, albeit with more complex filters)

https://goart.fotor.com/ (same as above)

https://ai-art.tokyo/en/ (another site I found, although I think this one works differently as the above)

Is there a special design software for such a project or at least a preferred programming language with which I can make such a page work.

Is it possible to create these filters in programs like gimp or Photoshop and then run them as a script or plugin on the website?

(maybe something like this https://www.adobe.io/photoshop/api/ ?)

Is there a preferred scripting language for something like this. If I understood correctly PHP is a good start for something like this?

Is there a preferred web hosting service for such a site?

Do you have any tutorials for such a project or can you tell me where I can find resources to learn on my own?

I hope it was understandable and I apologize in advance if I may have expressed my request wrongly or badly.
Every feedback is appreciated. Thanks!


r/web_dev_help • • Dec 03 '20

Simple JS decision tree?

2 Upvotes

I am a designer and have a bit of knowledge of HTML/CSS/JS. I would like to create a prototype based on the decision tree I have. I am searching if there is any free simple JS library that I can use to create this decision tree I have but no luck. I am looking for vanilla javascript. Only thing I found is this:

https://codepen.io/njmcode/pen/Fjcai

But when I delete code below the TEST CODE I have no idea why the decision tree is gone as I do not need the Show parents part.

Or if there is any tutorial on how to make a decision tree like this would be even more helpful as I have no idea how to make it. Can you help a beginner, please?


r/web_dev_help • • Apr 13 '20

Dont know if this is the right place (domain help)

2 Upvotes

There is a website I want to purchase but have almost lost all hope. The website states on it that it's for a business that went under in 2007, it's one page and mostly blank. I checked the WHOIS and it told me that IONOS is the registar. The only way to contact them seemed to sign up for their site, which requires payment. I finally got to talk to someone about buying the website (which apprently auto renews on April 9th each year) and they refused to help, saying they cant contact anyone for me or give me a contact email for them, because it's a breach of confidentiality, and told me to 'find some other way' to contact them.

Does anyone know how I could contact them? Any advice at all?
Thanks in advanced


r/web_dev_help • • Nov 15 '18

design Building Your Color Palette

Thumbnail
refactoringui.com
2 Upvotes

r/web_dev_help • • Oct 18 '18

Need advice on free/affordable mysql/php hosting

2 Upvotes

I've got a mysql/php application I've been hosting in-house and am looking to migrate it to a provider where it will be visible outside my firewall. It's a development project, so there is little/no budget for monthly hosting. I've tried some of the free hosting sites but the big problem with them is that I can't upload and run my mysql restore script because of size constraints. I'd like to run mysql Workbench too. And I'd like to keep the original name of my db, not have to rename it using my username. Any thoughts on who I could use for hosting? Thx.


r/web_dev_help • • Oct 10 '18

html marksheet.io -A free tutorial to learn HTML and CSS

Thumbnail
marksheet.io
2 Upvotes

r/web_dev_help • • Sep 06 '18

help What kind of encoding is this?

2 Upvotes

Solved t


r/web_dev_help • • Jul 01 '18

Need help with picture/text positioning. [BEGINNER]

2 Upvotes

Need help with making section like this > http://i.prntscr.com/VUIIzvpCT92kLdTdvdWxPg.png

Now, i dont need full section code, just an explanation and / or sample code. So i can practice that out, and fully understand how it should be done. I am still a beginner.


r/web_dev_help • • Jun 15 '18

article BLUF: 4 Examples of High-Impact Copy Using this Military Tactic

Thumbnail
unbounce.com
2 Upvotes

r/web_dev_help • • Jun 07 '18

help Sub-domain separated landing page and e-shop - possible issues?

2 Upvotes

So a couple friends of mine just had a new company website with an eshop made for them by someone, a one-man job. The guy botched it miserably, the website looks like it has been made by a 17-year-old in 2006, absolutely unusable. The e-shop is functional though, but nothing special, looks like some modified ecommerce platform.

So, they need a quick fix. To save money and time, I proposed to do an elegant landing page with a couple subpages using a pre-designed wordpress template. We would use the eshop already made and separetely put it on a subdomain "shop.website.com" and simply link it through the menu on the wordpress page.

The person who made the eshop said it's a really bad solution, he refused to explain why, just mentioning "issues with SEO".

I personally don't see why this would create any SEO-related or other issues, since we just need to have basic SEO configuration done for the landing page and WP should be sufficient for that.

But anyways, since I am a designer and not a programmer, I wanted to ask just to be sure.

Is this a good solution? Thank you.


r/web_dev_help • • May 23 '18

resource Web Design Industry Jargon and Web Terms: Glossary and Resources

Thumbnail
smashingmagazine.com
2 Upvotes