Pointless, HTML

Well, as I tell my students, the parts you hate the most are the parts at which you need to work the hardest. First of all, we tend to avoid things we don’t like. And often we don’t like them because we aren’t good at them. Take your weaknesses and turn them into strengths.

4 Likes

Easier said then done with turning weaknesses into strengths.

My weaknesses are:

Thinking of a good design.

Resizing

Good work schedule

That is 100% my point. You, a dedicated desktop user (apparently), have understood the benefits of mobile computing. Now imagine all those people who use a phone as their primary computer (especially with the ubiquity of social media apps). I don’t know how many people use both (like I do). However, I just googled this, and it proves my point (from 2016, and I can only infer it’s gone up in 2 years - Linux, thanks to Android, is now the most popular OS in the world.)


That’s a huge fraction of the market right now. A basic web page should absolutely reach these people. And even if you say, “Oh, well, my app requires the desktop, so i don’t need mobile users.” What if a few minutes of coding gave them a great experience so when they checked their phone between meetings, they found you (and the rest was so slick that the desktop-only components drew them to visit when they had access)? Given that up through a bad mobile impression is suicidal for a business.

Also, and as person trained in 1987 by Apple’s User Interface Guidelines, the greatest reason to build responsive mobile-first pages was found as a throwaway comment in this video on css grids: That’s the best way to deal with people on old computers (governments, institutional setups STILL running XP, etc) - just given them the minimalist mobile experience. Don’t worry about designing for IE - just give those users the mobile experience, and you cover your bases. Hope I’ve opened your eyes to the real state of the user base.

1 Like

Easier said then done with turning weaknesses into strengths.

Of course, but that’s what successful people do.

I had a friend in college, a fellow jazz guitarist. He had some weaknesses as a player, but some things he did well were tone and phrasing. Those were fun for him - so he worked on them obsessively. He never addressed his weaknesses. He just worked on his strengths. That’s why he never developed as a player and is a bar tender now.

I’m not saying it’s easy, I’m saying it’s a recipe for success. If you really want to be a dev, what are you willing to do?

1 Like

Thinking of a good design.

How do you design your site?

Do you open your code editor and start writing HTML and CSS code?

Well… that will be like a builder wanting to build a house and the first thing he does is start hammering pieces of wood together and hoping a big beautiful pretty house comes out of it.

Yeah, he could probably build “something” if his approach is like that… but would it be solid? well thought? easy to maintain? Pretty? Probably not.

So before building, ask yourself – Where are your working plans? Where’s your blueprint? Where’s your sketch? Where’s your specifications? Do you know beforehand the text height of your different Hx title tags? Do you know how much margin or padding you need for each element of your design? Do you know the exact color code for your different design elements? Do you know the exact dimensions beforehand?

No???

If you don’t have these things, then you’re planning to fail. You don’t have a design roadmap, just flying by the seat of your pants. Add your inexperience, and yeah the results will be bad.

In the old days, the tool of choice was Photoshop and Illustrator.
https://www.adobe.com/products/photoshop.html

But these are more general purpose tools… an easier to use tool will be XD or Sketch,

Now, we have XD
https://www.adobe.com/products/xd.html

or Sketch
https://www.sketchapp.com/

Resizing

Bootstrap makes this really a no-brainer.

And I don’t understand people who hate BS.

It’s like lemming mentality – “I want to be s a great web developer so I will hate on BS like other developers that bash Bootstrap that I read on their blogs.”

Look… Bootstrap is just Twitter’s “branding”. Underneath it all, it’s just plain CSS with % widths and media queries… so you don’t have to re-invent the wheel and re-create these media queries on your own.

And you don’t have to go with the BS color scheme. These can easily be overridden, or ignored by using your own classes for styling.

You need to really read the BS documentation and view the demo code on their documentation site.

And better yet, spend some time looking under the hood of Bootstrap CSS source code to really understand it.
There is no mystery. It’s just damn plain CSS. People who think BS is some voodoo magic and don’t understand it’s underlying CSS, are the same people that run into trouble using BS. Then they blame BS and conclude, it’s better for me to write my own CSS. No— you just don’t understand Bootstrap.

Also, it’s not a neither/or. It’s not Bootstrap -or- your own CSS. You can use/have both! And this saves a lot of time, letting the BS media queries do the responsive work, and your own custom CSS for your own styling/branding/colors.

For all I could care, someone could have called Bootstrap – Alligator CSS framework. It would still work the same. It’s just plain CSS underneath the “Bootstrap” branding.

– okay! Rant over :slight_smile:

5 Likes

I don’t hate Bootstrap because of any of the reasons you stated. I fully understand how Bootstrap changed the game by making responsive design easy, and from an enterprise perspective, quick. However, the very same people who look underneath the hood of bootstrap.css are the kinds who don’t need all of its functionality, and so might want to be able to code that functionality on their own, more flexibly. Plus, all frameworks get left behind in time, so as a learner, I find it’s more important to get a solid handle on the fundamentals and decide in which framework to specialize later. I do care about speed, and I understand that caching can save on repeat loading times, but for first impressions, for the project I have in mind, I need the “wow/wait” ratio to be off the charts.
To your point about resizing: I mean, it’s not like bootstrap isn’t just rebranding flexbox initially and possibly grid in the future, but the “no-brainer” is a dead end for a student. I refactored all my first few projects from Bootstrap to plain CSS and I understood everything the more, so I speak from my experience. I am sure that to seasoned front-end devs, Bootstrap was a godsend when it came out. I also agree with you that much of the opinion pieces I read about on the web are very “religious” for lack of a better word. Except for jQuery. Those rants seem to agree with me about speed/file size.

Edit: to be clear, I 110% agree with the first half of your <rant>

1 Like

Well I don’t get ideas from her per say, I do however run what I have by her a lot of times and she’ll give me feedback and advice that’s immensely helpful.

As for where I get ideas, it depends on what I’m building. Let’s just say for the sake of an example I’ve been hired to make a website for a local coffee shop. My very first step is research. TONS OF RESEARCH. I’ll look at the coffee shop itself for inspiration (do they have a color scheme I could incorporate? A particular style? Like are they trendy? vintage?). I’ll also look up other coffee shop websites, study the things I like about them, look for things I don’t like about them that I might be able to improve on my project.

The thing that really dictates the project is what the client is looking for content and functionality-wise. The content itself more often then not will guide me on what should go where. Then I get out the tried and true pencil and a piece of paper and I start making wireframes, trying different layouts, moving stuff here and there, thinking about what the current layout I’m futzing with would look like condensed down to mobile and most importantly HOW I would go about getting it there. I think that really makes or breaks a design idea, if I can’t mentally code it and know exactly how it will work from point A (desktop) to point B (mobile) then the layout needs to be rethought.

There’s a ridiculous amount of research you can do into web marketing on what works and what doesn’t work with users. But to me a clean, modern looking site, that works everywhere is the goal. I’ll bookmark sites that I like pieces of, maybe it’s the way the navbar was done, maybe the way they did the text content, the images, the responsiveness of it. If you look at enough websites and apps you begin to see common trends and themes reused over and over. Pay attention to those themes and trends–they’re popular for a reason.

Edit: I wanted to mention that there’s absolutely nothing wrong with using Bootstrap. BS4 I have to say looks pretty nifty with the built-in flexbox stuff, but I personally haven’t had a need for it yet. I kinda liken BS to a swiss army knife. So I think with that in mind you can use as much or as little of it as you might need for any given project.

1 Like

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

Portfolio Site

Color

1 Like

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.

1 Like

@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.

1 Like

@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.

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!)

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.

1 Like

@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.

1 Like

:laughing: Oh I definitely need to watch out with laziness.

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.

2 Likes

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.

2 Likes

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;

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

1 Like

I’ve never seen that work before.

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

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 :grin:

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.

1 Like