DarkLinkage
Member
Just some feedback here: When zoomed in, the text overlaps the links in the contact section.
Edit: This only occurred at 110% and 125%. I'm using chrome.
-
Hey, guest user. Hope you're enjoying NeoGAF! Have you considered registering for an account? Come join us and add your take to the daily discourse.
Web Design and Development |OT| Pixel perfect is dead, long live responsive design
- Thread starter gutshot
- Start date
Just some feedback here: When zoomed in, the text overlaps the links in the contact section.
Edit: This only occurred at 110% and 125%. I'm using chrome.
PatientGamer
Gold Member
Not sure, I just see all these cool websites most people can make and feel a little incompetent at times.
Like Sony's old make.believe website (can't remember url), as you scroll it would show the breakdown of their products in real-time. Like each and every piece that goes into a camera or phone. It just blew me away.
I've build two websites - not entirely from scratch as their Wordpress websites.
Here's my personal website here: http://davidjoragui.com and my business website http://balancedlifeacademy.com
Been working on a huge sales/landing page, and I guess I'm proud to have finally learnt responsive web-design - but I still struggle at times.
Daffy Duck
Member
Haha, I feel completely out of my depth here. In a good way
I've been learning web development for about 2 years now. I have a working knowledge of HTML, CSS, PHP and jQuery despite not going to university. However I still feel like a complete beginner haha.
Will the courses on code academy help me get rid of had habits I may have/help me wire "cleaner code"?
Love this community already.
I'm the same dude, I did some college courses to get a good grounding in the languages needed but even after three years I still feel like a total noob at it all.
I think it's just a confidence thing.
Hey guys, wonder if you could give me a bit of help here. I'm currently doing Codecademy's intro website building course on the CSS section. It's step 9/10 i'm stuck on and I have no idea what I'm doing wrong. I've posted a topic on their forums but thought might as well do it here as well.
Basically, I need to insert a #footer and a text size value for it. One of the steps was inserting the #footer and I got that right, the next was the size of 0.75rem, so my code looks like...
#footer {font-size: 0.75rem}
And it just won't let me continue. So what am i doing wrong? The error message i'm getting is 'Did you give the #footer selector a font-size property of 0.75rem?'
Basically, I need to insert a #footer and a text size value for it. One of the steps was inserting the #footer and I got that right, the next was the size of 0.75rem, so my code looks like...
#footer {font-size: 0.75rem}
And it just won't let me continue. So what am i doing wrong? The error message i'm getting is 'Did you give the #footer selector a font-size property of 0.75rem?'
Lister
Banned
Hmm, maybe the semicolon after the font statement?
Edit: I misread you post and yup, you were right! I'd left off the semicolon after 0.75rem, d'oh! Thanks a lot!
PetriP-TNT
Member
Leaving the semicolon out of the last statement of a block is perfectly valid CSS though ¯\_(ツ
_/¯Not that it's a good practice in anyway though
Leaving the semicolon out of the last statement of a block is perfectly valid CSS though ¯_(ツ
Not that it's a good practice in anyway though
I'm not gonna touch that with a 10 foot pole
As an aside, this should feel overwhelming as fuck at first right? Or am I just being a dumb dumb?
PetriP-TNT
Member
Most likely yes, especially if you have no coding background what-so-ever. Don't worry, it will get easier to understand if you stick to it though.
CSS is a clusterfuck only mastered with patience and over time. Some parts of it are a pain for the forever.
The great thing about web development is, you'll see what you do from the beginning. Debugging is easier than in any other language I know and the community is insanely large and very helpful. This and you can literally code on a potato to get a result.
I do this for many years now and would always do it again, have fun!
The great thing about web development is, you'll see what you do from the beginning. Debugging is easier than in any other language I know and the community is insanely large and very helpful. This and you can literally code on a potato to get a result.
I do this for many years now and would always do it again, have fun!
Question....
What is an easy to use Customer Area plugin for Wordpress that I can customize with Advanced Custom Fields and also allow documents to be added to the clients page?
So basically what I am looking for is client will enter their username and password and that would take them to a single page that contained basic information and at the bottom of said page there would be link(s) to documents for them. The client will not be uploading anything, just viewing.
Let me know if what I am explaining is confusing and I will try to simplify/explain.
What is an easy to use Customer Area plugin for Wordpress that I can customize with Advanced Custom Fields and also allow documents to be added to the clients page?
So basically what I am looking for is client will enter their username and password and that would take them to a single page that contained basic information and at the bottom of said page there would be link(s) to documents for them. The client will not be uploading anything, just viewing.
Let me know if what I am explaining is confusing and I will try to simplify/explain.
Starphoenix
Member
Could you not just create a password protected page and set up your custom fields? Or are the documents intended to be individualized for each user?
Possibly, but then don't you have to provide the url instead of just having a static login page that would take the clients to their pages?
I think I may have found a plugin that could be work but I need to mess with it more, it is called Client Portal.
More suggestions are always welcome though. Also tutorial links are really helpful.
The Albatross
Member
I've used WPMUDev's Membership Pro plugin, and they have a new one...
https://premium.wpmudev.org/project...remium.wpmudev.org/projects/category/plugins/
WPMUDev makes good plugins... but they're really annoying about updates, logins, stupid plugin ads, and other things that (IMO) get in the way for the backend user. Don't get me wrong, the plugin is really solid for creating membership/login only areas that gie you a lot of control as the developer (or even site owner)...
But they plaster your Admin dashboard with shit.
I used another WPMU plugin for a client (Appointments+), and ended up creating an Admin stylesheet that hid all of their annoying admin notifications. You could write a hook/filter for hiding them as well, but doing it via CSS was the fastest way for me.
So I recommend Membership Pro, but WPMUdev is fucking annoying with their built-in adverts IMO.
Lister
Banned
Leaving the semicolon out of the last statement of a block is perfectly valid CSS though ¯\_(ツ
Not that it's a good practice in anyway though
I even put semicolons on my stylus statements.
Decided to pick up Javascript a little over a month and a half ago and made a Chrome weather extension. It's not public at the moment as I want to clean up the source code a bit and I need to hide my api key for my weather source. You learn quite a bit when you actually create something. I used plain JS (no jQuery) but I'm picking up Angular at the moment.
Things I picked up/did when creating the extension:
Manipulated the DOM
Executed XHR requests (tested the jQuery version as well just to see how much less code I need). Since I received back as a response a JSON object it was good to see how to manipulate the data that I needed.
Got a better handle on CSS as I created my own design elements (sizing was important when it came to sections for the hourly and daily forecast). I was initially just going to use Twitter Bootstrap but decided there's no reason to use that when I can write my own CSS and have a much smaller file.
Used loops to iterate through arrays in the JSON object. This is simple enough but it was good to use a loop in practice versus just writing a loop because a tutorial went through one. Each iteration would add the design elements and data for the hourly and daily forecasts.
Wrote some of my own functions based on the data that was received to convert to data I want to show the user (date and time, wind direction, heat index temperature, etc). The location is retrieved from the browser as latitude and longitude coordinates.
I can use what I wrote and put it into a demo website as well so it doesn't need to be just a Chrome extension. I might as well turn it into an Android app while I'm at it. (haven't done Java in 10+ years since using it in my first CS class)
I feel have a good grasp of Javascript now so time to look at Angular and maybe other frameworks. I did all the development locally on my pc but I also have an Amazon cloud EC2 that's set up with a LAMP stack for a demo website, and I also put Node and Express on their as well. I figure I can use Express to write my own API (another learning experience) which will retrieve the api key for my weather source (as I don't want to leave the api key in my source code). It looks like Angular 2 will be a big departure from Angular 1.xx and Facebook's React is picking up steam as well.
Here's a screenshot of my extension (it's been clicked so it's expanded for viewing): http://imgur.com/O8p7Xww
Things I picked up/did when creating the extension:
Manipulated the DOM
Executed XHR requests (tested the jQuery version as well just to see how much less code I need). Since I received back as a response a JSON object it was good to see how to manipulate the data that I needed.
Got a better handle on CSS as I created my own design elements (sizing was important when it came to sections for the hourly and daily forecast). I was initially just going to use Twitter Bootstrap but decided there's no reason to use that when I can write my own CSS and have a much smaller file.
Used loops to iterate through arrays in the JSON object. This is simple enough but it was good to use a loop in practice versus just writing a loop because a tutorial went through one. Each iteration would add the design elements and data for the hourly and daily forecasts.
Wrote some of my own functions based on the data that was received to convert to data I want to show the user (date and time, wind direction, heat index temperature, etc). The location is retrieved from the browser as latitude and longitude coordinates.
I can use what I wrote and put it into a demo website as well so it doesn't need to be just a Chrome extension. I might as well turn it into an Android app while I'm at it. (haven't done Java in 10+ years since using it in my first CS class)
I feel have a good grasp of Javascript now so time to look at Angular and maybe other frameworks. I did all the development locally on my pc but I also have an Amazon cloud EC2 that's set up with a LAMP stack for a demo website, and I also put Node and Express on their as well. I figure I can use Express to write my own API (another learning experience) which will retrieve the api key for my weather source (as I don't want to leave the api key in my source code). It looks like Angular 2 will be a big departure from Angular 1.xx and Facebook's React is picking up steam as well.
Here's a screenshot of my extension (it's been clicked so it's expanded for viewing): http://imgur.com/O8p7Xww
Lister
Banned
Fantastic work there! Never tried my hands with chrome extensions, it sounds like fun!
OminoMichelin
Member
Hey there, I've been hired in a small consulting firm as "web strategist" and general errand boy, and one of the things I am tasked to do is improving the firm's website to make it more visible, more useful and generally better.
This is the website in question: https://www.centrofinanzagevolata.it/ . It's not great, but it's not so bad considering my boss made it himself with little to no knowledge. The problem is that it's a technical mess, and it doesn't let me do anything with it's code in terms of SEO, analytics, layout etc.
How could it be, you ask? Freaking 1&1 and its website editor, that's why. I would make a whole new site, but 1&1 wants to get paid to host a second site, and I don't want to delete this one just to "make space" just yet.
How do I act in this sort of situations? Do we just cough up the money? Would it be worth the hassle to migrate hosts?
This is the website in question: https://www.centrofinanzagevolata.it/ . It's not great, but it's not so bad considering my boss made it himself with little to no knowledge. The problem is that it's a technical mess, and it doesn't let me do anything with it's code in terms of SEO, analytics, layout etc.
How could it be, you ask? Freaking 1&1 and its website editor, that's why. I would make a whole new site, but 1&1 wants to get paid to host a second site, and I don't want to delete this one just to "make space" just yet.
How do I act in this sort of situations? Do we just cough up the money? Would it be worth the hassle to migrate hosts?
If youre working in a professional service firm in 21st century, you should hire a designer and of course spend some money on hosting. How is that even a question. 1&1 should be good enough for that. We have much bigger clients hosted on 1&1.
I dont know how web builder on 1&1 works. But what you could do is just make the new website in a subfolder and redirect your domain there.
Yes to all. That site is a mess.
Pay to get a nice site, especially if they want to appear like a viable place to spend your money on their services.
PetriP-TNT
Member
That won't really work; you'll either need to pick one of two:
1. Supply the API key from the user (for example when installing the extension)
or
2. Supply the API key to your own backend, which fetches (and preprocesses if needed) the data for your extension.
Number 2 won't really scale if you want to serve your extension to other users though.
Good to know - thanks. I was thinking of doing number 2 but yeah I can see it being an issue with scaling.
The Albatross
Member
It's not coughing up money, it's spending the measly few dollars a month on real hosting, and then putting a budget into your website.
If the website is not important to the business at all, then FreeWebz 1&1 is fine, but if your boss says that he wants to drive sales through the website, then he has to budget for that.
Yup, it is an investment in the company.
layzie1989
Member
I've been looking since yesterday for an answer to this but i haven't been able to find an answer. I'm trying to embed a facebook video on my portfolio site, and the original video is 1:1 resolution, but facebook's embed always shows up as widescreen with black bars on the left and right. The video relied on the white background surrounding it so there was the illusion of the content breaking out of the container.
Here's the page with the code generator and attributes. The problem is when I change the width attribute it changes the whole post and scales the black-barred video. I'm assuming on facebook there's some behind the scenes trickery to make square videos square on the feed even though they're actually landscape.
Does anyone know if it's possible to make an embedded video square?
Here's the page with the code generator and attributes. The problem is when I change the width attribute it changes the whole post and scales the black-barred video. I'm assuming on facebook there's some behind the scenes trickery to make square videos square on the feed even though they're actually landscape.
Does anyone know if it's possible to make an embedded video square?
Daffy Duck
Member
Does anybody have good books/resources I can read about web UI/UX and good design etc?
GHG
Member
I've found the pixel perfect precision handbook 3 to be a fantastic resource over the last few months:
http://cdn.ustwo.com/PPP/PP3.pdf
Its a free pdf book by Utswo. Info if you've never heard about them before.
Daffy Duck
Member
Nice!
Thanks for that. Had a quick skim, looks OK, is there anything else as to UI/UX for sites?
Thanks for that. Had a quick skim, looks OK, is there anything else as to UI/UX for sites?
Terrorblot
Member
Picked up some web hosting the other day to try and get an art portfolio up. I maintained a website for fun throughout highschool but it's been awhile. I don't know any javascript at all so this should be interesting .
.Picked up some web hosting the other day to try and get an art portfolio up. I maintained a website for fun throughout highschool but it's been awhile. I don't know any javascript at all so this should be interesting
You don't need js to build a website, so you are fine
Terrorblot
Member
You don't need js to build a website, so you are fine
I figured that would probably be the easiest method of making a pretty gallery but I don't really know any of the bells and whistles in HTML5 since it's been forever and a half since I've done anything worthwhile.
Picked up some web hosting the other day to try and get an art portfolio up. I maintained a website for fun throughout highschool but it's been awhile. I don't know any javascript at all so this should be interesting
If you're main concern is getting a portfolio up just use something like Wordpress. If you want to build your own for learning purposes then have at it.
The Albatross
Member
The "Smashing" Series from Smashing Mag is pretty good. They've got 3 or 4 books going back several years, all called "The Smashing Book Vol1 / Vol2 / etc"
They were always ahead of their time with UI and so even the original volume 1 is still relevant in some areas.
The first one in Ebook format is free I think: https://shop.smashingmagazine.com/products/the-smashing-book-1-digital-edition
and here's the whole anthology: https://shop.smashingmagazine.com/collections/smashing-ebook-anthology
Daffy Duck
Member
Ooooo, excellent I had forgot about that series they do!
Nice to know book 1 is free, will have a browse of that.
Nice to know book 1 is free, will have a browse of that.
Lister
Banned
There is a difference, usually, between a front end develoepr/engineer and a web site designer.
I think you still need to know a fair bit of js, but mostly you need to know and be able to work with all the mainstream content management frameworks out there, as well as know CSS/ui deisgn and the popular UI frameworks like Bootstrap. You'd probably be well versed in graphical design, and know IDE's like Photoshop.
You are mostly bringing to the table your artistic skillset and the ability to work with the UI end of the front end. You basically help make websites look and feel awesome to see and navigate.
The lines blur often, but I would expect a different skillset from a front end developer. I mean he might also be a graphic designer/ui designer, but first and foremost he needs to know object oriented programming, be a wiz with js, know frameworks like angular and React, and know them well. Be able to design a stateful, complex web application that consumes server side resources and provides a straightforward API for the graphic designer/web developer to come in and do his thing.
I would expect the portofilo of one to be fairly different from the other. But I'm sure different people will have different takes on this.
I think you still need to know a fair bit of js, but mostly you need to know and be able to work with all the mainstream content management frameworks out there, as well as know CSS/ui deisgn and the popular UI frameworks like Bootstrap. You'd probably be well versed in graphical design, and know IDE's like Photoshop.
You are mostly bringing to the table your artistic skillset and the ability to work with the UI end of the front end. You basically help make websites look and feel awesome to see and navigate.
The lines blur often, but I would expect a different skillset from a front end developer. I mean he might also be a graphic designer/ui designer, but first and foremost he needs to know object oriented programming, be a wiz with js, know frameworks like angular and React, and know them well. Be able to design a stateful, complex web application that consumes server side resources and provides a straightforward API for the graphic designer/web developer to come in and do his thing.
I would expect the portofilo of one to be fairly different from the other. But I'm sure different people will have different takes on this.
Hello webdev GAF,
I'm looking for tutorials or lessons like One Month Rails where you end up building something while you learn. In the case of OMR it's a Pinterest clone.
Any recommendations or favorites? Free or paid and language/framework doesn't matter to me as long as the lesson is reasonably current i.e. most of the links work. I've found a few resources floating around, just curious what some of you think.
*edit*
I am mostly interested in javascript, ruby, or PHP stuff for now, but any good resources that guide you in building or cloning something are appreciated.
I'm looking for tutorials or lessons like One Month Rails where you end up building something while you learn. In the case of OMR it's a Pinterest clone.
Any recommendations or favorites? Free or paid and language/framework doesn't matter to me as long as the lesson is reasonably current i.e. most of the links work. I've found a few resources floating around, just curious what some of you think.
*edit*
I am mostly interested in javascript, ruby, or PHP stuff for now, but any good resources that guide you in building or cloning something are appreciated.
On the job hunt and so far I've had 3 companies contact me saying they're interested and asking for my resume or asking follow up questions. Yet now I've yet to get a response email after sending them my response/resume. Now I'm starting to think they see my resume and background and choose not to move forward without saying a word .
.Royal_Phalanx
Member
I'm looking at trying to get into web development (front end). How did you all end up breaking into the industry and getting employed? Jobs in bioscience are increasingly difficult to get so I am looking to get into something which my degree isn't in.
Zoe
Member
QA (not game QA, software QA) or data analysis are good ways to get in.
SigmasonicX
Member
On the job hunt and so far I've had 3 companies contact me saying they're interested and asking for my resume or asking follow up questions. Yet now I've yet to get a response email after sending them my response/resume. Now I'm starting to think they see my resume and background and choose not to move forward without saying a word
That does happen... but also, it can simply take a long time for them to respond. There are any number of factors that could delay them, and they could come back even a month later to see if you're still available.
I recommend checking out other companies, but be ready to follow up if one of those companies that are taking a long time responds.
valkillmore
Member
I am in desperate need of assistance getting a website up and running. This all seems so overly complicated I'm pulling my hair out.
I'm an artist looking to set up a URL. I have registered a URL, and I have ordered hosting from a separate company. I need to know, how do I build my site, and how does the URL know to look to my hosting company to know what to display?
I'm very frustrated at this point, I want to get something up but even the help support at the companies aren't being much help. Where do I start?
I'm an artist looking to set up a URL. I have registered a URL, and I have ordered hosting from a separate company. I need to know, how do I build my site, and how does the URL know to look to my hosting company to know what to display?
I'm very frustrated at this point, I want to get something up but even the help support at the companies aren't being much help. Where do I start?
HarryHengst
Member
Either do freelance work to build up some references and work you can demonstrate, or create a good portfolio with a diverse set of projects on your own.
So build something that connects to a backend that saves and loads some data from a database. Build an SPA. Build something that uses open data sets that you connect to through an API and visualize the data with some charting lib or d3js if you want to be really fancy. Build some little game.
Your hosting company should give you directions on how to edit the dns, which is what you'll need to do at your registrar (company you registered your domain with). You will 'point' the domain name at the hosting company.
Here's some more info on dns from Hostgator's website so it should give you an idea: https://support.hostgator.com/artic...ervers/how-do-i-change-my-dns-or-name-servers
valkillmore
Member
Thank you for the reply, I will investigate this. Cheers.
Hi WebDevGaf,
I'm after a bit of advice. I've recently been enjoying making websites for a few people (friends, family, that kinda thing), mainly through Wordpress as I like the CMS, I find it easy to use, and easy to hand over upon completion. That being said, I miss writing markup and code and all that jazz so I figured I'd get into writing my own Wordpress Themes and Plugins, which could help me in future, if another "client" would like a website. However, I'm at a bit of a loss where to start.
I first got to grips with HTML and CSS (and even a bit of PHP) back in my university days and found that I enjoyed it a lot. Since then I expanded with JavaScript, jQuery etc.
So, I'm just wondering if there are any useful guides/books/online tutorials that will get me on the path to becoming a Wordpress developer. I've eyed up this book in hte hopes that it'll get me on the right track, but I wondered if any of you had any experience in the field.
Thanks in advance!
I'm after a bit of advice. I've recently been enjoying making websites for a few people (friends, family, that kinda thing), mainly through Wordpress as I like the CMS, I find it easy to use, and easy to hand over upon completion. That being said, I miss writing markup and code and all that jazz so I figured I'd get into writing my own Wordpress Themes and Plugins, which could help me in future, if another "client" would like a website. However, I'm at a bit of a loss where to start.
I first got to grips with HTML and CSS (and even a bit of PHP) back in my university days and found that I enjoyed it a lot. Since then I expanded with JavaScript, jQuery etc.
So, I'm just wondering if there are any useful guides/books/online tutorials that will get me on the path to becoming a Wordpress developer. I've eyed up this book in hte hopes that it'll get me on the right track, but I wondered if any of you had any experience in the field.
Thanks in advance!
megarockexe
Member
Hey, I've got this challenging scenario that seems to be difficult to do in web design.
.
It needs to be responsive. So I'd want live text where it says "Section Title", an image or logo in the center, and a button that has a partially transparent fill that could have a hover effect. It's important that the lines don't touch the button or the text on top and that when the image resizes, the background adjusts to fit its container. The line lengths on the sides must resize up until mobile resolutions, which would drop it completely.
I have an idea how to do some of it, except when the lines don't touch. I'd think SVG clipping?
It needs to be responsive. So I'd want live text where it says "Section Title", an image or logo in the center, and a button that has a partially transparent fill that could have a hover effect. It's important that the lines don't touch the button or the text on top and that when the image resizes, the background adjusts to fit its container. The line lengths on the sides must resize up until mobile resolutions, which would drop it completely.
I have an idea how to do some of it, except when the lines don't touch. I'd think SVG clipping?