Pointless, HTML

[naphong]

I think the list below will guide and make inspiration for you.

Portfolio Site

• Behance
• Awwwards
• dribble

Color

• Adobe Color CC
• Colour Lovers
• Coolors

[Soupedenuit]

@John-freeCodeCamp

No? I thought browsing the web on a phone is a joke. You really can’t see much, and everything takes forever to load. What makes it worse is the really ‘laggy’ ads that just cause it to crash.

Maybe you have a lousy ISP provider or a lousy phone, or both. I don’t know where you live or what demographic you are living in. I can tell you this: in Canadian cities people have smart phones with great connections and use them all the time; not only for apps but for web browsing. I personally spend a lot of time browsing the internet on my iPhone. I primarily use Chrome mobile. The vast majority of websites today are responsive meaning I can read on my phone very easily. It is way more convenient than sitting at my desk or having a laptop on my lap. I can slouch on the couch while drinking my coffee and go to this forum or MDN or whatever. I only use my laptop for work at home or web dev. What you are describing is mobile internet browsing 8-10 years ago. It has changed dramatically. If you don’t think that web development entails designing for a mobile first experience you are way wrong. I wish it weren’t the case because it is a pain in the neck. As a user it’s great but as a developer it’s no fun.

[John-freeCodeCamp]

@vipatron, @Soupedenuit

Because of how you guys showed me how important mobile is, and i’m egotistical and ill admit i was wrong, i checked out CSS grids. I watched a 27 minute tutorial --> https://www.youtube.com/watch?v=HgwCeNVPlo0
and its very simple and cool. It gives you freedom to style the grids columns and any size, and arrange everything in CSS. Its what i needed.

Wow, perfect timing as it was uploaded today. Its one of the best tutorials iv followed.

Example from video

". title title ."
". header header ."
". sidebar sidebar ."
". footer footer ."

The . was 1 column white space and the rest was elements that all took up 1 column space.

Now i’m not going to go all about how its so good, as i will run into some errors and need help.

@naphong

Very cool, i love the color selection in which i saw colors i never thought of using. Behance has some really cool images on it too. I like adobe’s color selector. I also saw some cool designs for like banners on websites.

@Soupedenuit

Imagine if we went with tesla’s design. No wires, all wireless. Phones could be so much better as they really wouldn’t need batteries. More space for processing.

I only use a select few websites, YouTube (App), etc. But also games require good internet connections. Like really if everyone stopped uploading to YouTube, you would never be able to run out of entertainment. Internet inside internet.

@owel

I just try to think of a responsive design. If it actually looks good comes second.

Boostrap lacks any creativity or freedom. I feel like it also very complicated doing set in place rows, typing tons of classes, having them not even work half the time, etc. It gives you a set column sizes and its annoying to work with them.

Its just a pain to deal with, and learn. I watched a tutorial on CSS grids and knew more in 27 minutes then 10 episodes on bootstrap.

@dlyons

Ill do more research into the ideas and trends, never thought of that. I would say a trend is simplicity. Brighter color schemes and very basic but powerful designs is in style. There is no sidebar with just links.

Would it make it quicker to make like a codepen, in which it contains Navbars, images with cool classes, etc. This is so you can just copy and paste and build the frame of the website. Different styles of rows with boxes next to each other, all simple stuff to save time.

---

What does everyone think the next step in Mobile phones is? What will come out better then them? Holograms that could resize to the website.

[John-freeCodeCamp]

@kevinSmith

Working on weakness is hard when that weakness is working in the first place. That story has inspired me, as i should work on my weaknesses.

I am willing to show skill, i just got set back by a lot. Luckily the recommendations you guys have told me has really helped me.

[dlyons]

Definitely, simplistic clean designs are still super popular right now. I’ve also noticed that flat solid colors are still in too. Bright colors for accent, especially elements you want to draw attention to (like buttons). Sidebars I think are an “as needed” feature. Sometimes a sidebar can be useful if you want to highlight something (latest posts if it’s a blog, helpful links, advertisement, social media stuff, etc).

However, they get tricky when you start dealing with smaller viewports. Then it’s a question of where does the sidebar go? Which I think you’ll see fun ways around that problem with CSS Grids. I’m excited to mess around with them myself (by the way thanks for posting that tutorial link!)

@John-freeCodeCamp

Would it make it quicker to make like a codepen, in which it contains Navbars, images with cool classes, etc. This is so you can just copy and paste and build the frame of the website. Different styles of rows with boxes next to each other, all simple stuff to save time.

Totally! In a sense what you would be doing is making modules that you reuse and tweak depending on your needs. I think it could be really handy. As long as each module’s code can function on its own (meaning its error-free and complete), you can pretty much just copy and paste it into whatever you’re building with little to no problems. If you think about it, pretty much all HTML elements are block elements, you’re basically always working with blocks. So in a way you’d be working with pre-built blocks of code that you can place.

[John-freeCodeCamp]

@dlyons

The codepen idea would be cool, just don’t get too lazy and get rusty lol. Every time you create something new, just copy and paste it into that codepen.

I was really surprised at how easy just arranging stuff in css grids is though.

[dlyons]

Oh I definitely need to watch out with laziness.

@John-freeCodeCamp

I was really surprised at how easy just arranging stuff in css grids is though.

Me too, it’s kinda mind-blowing. What’s great too is it doesn’t rely on a single framework or external library. It’s just pure css.

[kevinSmith]

Yeah, that’s kind of the way these things are. Some external library comes up with cool ideas that make things easier and then eventually CSS and JS catch up.

[John-freeCodeCamp]

Just used CSS grids:

–> https://codepen.io/Mike-was-here123/pen/qoVwxR

Its simple how you can align items by using template, and center elements in each row by just using text-align: center;

[owel]

@John-freeCodeCamp

center elements in each row by just using text-align: center;

This is just plain old CSS property… not specific to CSS grids.

[JohnBackUp]

I’ve never seen that work before.

Any idea why on mobile text in my input class doesn’t work? https://ibb.co/nbWC47

[MarioLema]

Looks cool. Using the template area property makes it really easy to construct anything, although because they are in rows, flexbox would have worked in a similar way. That being said, I abuse CSS grid all the time so I can’t fault you in that

I tend to use more the column and row system as opposed to the grid one because it seems more precise. And I don’t think you can overlap grids with the template grid, which is a really cool thing to do.