6 Replies - 379 Views - Last Post: 15 May 2020 - 07:19 PM

#1 ajetrumpet   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 65
  • Joined: 09-November 19

suggestions on design for embedded code samples and HTML tables

Posted 21 April 2020 - 07:36 AM

hey you guys,

I'm designing a website that needs to be flexible for different screen sizes and accomodate large HTML tables with records listed (2 or 3 columns each). it also needs to accomodate coding samples that pop up in new windows and/or are embedded in the screens. what would be the best way to go about doing this? I currently have a set up for using media queries and it's alright because the left side menu switches and appears at the top if the screen becomes smaller than ''x'' number of pixels. thus, it works OK for phones. but unfortunately, it was done by a foreigner and they are not the best at understanding layouts and requirements. I have researched CSS flexbox and grid but I'm not sure that's what I need.

can someone point me to some samples that illustrate what I'm trying to do? I would like a modern layout and look, NOT something like this (which is very basic and poorly layed out. not to mention the fact that it doesn't keep the attention of the visitor very long because it looks terrible): https://www.automate...-code-examples/

thanks guys.

This post has been edited by ajetrumpet: 21 April 2020 - 07:48 AM


Is This A Good Question/Topic? 0
  • +

Replies To: suggestions on design for embedded code samples and HTML tables

#2 Splashsky   User is offline

  • D.I.C Addict
  • member icon

Reputation: 9
  • View blog
  • Posts: 565
  • Joined: 25-August 13

Re: suggestions on design for embedded code samples and HTML tables

Posted 21 April 2020 - 10:41 AM

That sounds like a lot of custom work. I know the community forums on Laracasts (such as this thread use some pretty dope syntax highlighting.

Either way, you're looking to create a website that will require a syntax highlighting package; possibly use a JS framework such as Vue to handle modals, pages, etc; and a backend server powered by Laravel, for example, in order to store/persist/handle data.
Was This Post Helpful? 0
  • +
  • -

#3 ajetrumpet   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 65
  • Joined: 09-November 19

Re: suggestions on design for embedded code samples and HTML tables

Posted 21 April 2020 - 10:52 AM

thanks for the link Splash, but the examples in that thread is a little over the head of myself. is all of that really necessary? furthermore, I would assume that if I want to ask questions about Laravel or Vue, it should be done on the Laracasts forum? true? is that what you would recommend?
Was This Post Helpful? 0
  • +
  • -

#4 Splashsky   User is offline

  • D.I.C Addict
  • member icon

Reputation: 9
  • View blog
  • Posts: 565
  • Joined: 25-August 13

Re: suggestions on design for embedded code samples and HTML tables

Posted 21 April 2020 - 10:58 AM

For the website you want to make, no, a forum is not necessary. I was just pointing out the code snippets and their syntax highlighting.

Here's the goal I understand you want to accomplish:
  • Build a site that has code tutorials
  • These tutorials contain snippets
  • These snippets should have proper syntax highlighting
  • It should look modern


Here's the stack I would recommend.
  • Laravel - for server-side operations, such as database CRUD, rendering frontend pages
  • Frontend Javascript, not necessarily a framework - you'll need packages for syntax highlighting, JS functions for dropdown menus, etc
  • A JS syntax highlighting package, such as HighlightJS


You can ask any Vue/Laravel/Javascript/PHP/MySQL question you want here. Laracasts' forum is mostly for Laravel-specific Q&A, but anyone here should generally be able to guide you.

*whisper* just between you and I though, I'm the resident Laravel expert
Was This Post Helpful? 0
  • +
  • -

#5 ajetrumpet   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 65
  • Joined: 09-November 19

Re: suggestions on design for embedded code samples and HTML tables

Posted 21 April 2020 - 01:02 PM

View PostSplashsky, on 21 April 2020 - 11:58 AM, said:

Here's the goal I understand you want to accomplish:
  • Build a site that has code tutorials
  • These tutorials contain snippets
  • These snippets should have proper syntax highlighting
  • It should look modern


Here's the stack I would recommend.
  • Laravel - for server-side operations, such as database CRUD, rendering frontend pages
  • Frontend Javascript, not necessarily a framework - you'll need packages for syntax highlighting, JS functions for dropdown menus, etc
  • A JS syntax highlighting package, such as HighlightJS
yes you are somewhat right, splash. other than the fact that the coding samples have to have highlighting. they don't. I think what I'm struggling here with more than anything is how to build a site template that can accomodate what I need. for instance, take a look at this page:

Python Resource List

that is an example of a page that I want to display. that shows a list of all the python resources available in version 3.7.1. that is something that I would like to illustrate for that one language alone, but with other languages I want to display either embedded images (or in new pop out windows) of language constructs to illustrate how to program properly. other parts of the site will contain other material on other tech products and concepts, but the bulk of the site will be about writing code and working with IDEs. so for instance, here is an example of a construct I would like to display on any given page:

for (x = 1; x < 10; x++) {
   print x;
}
do you see what I mean now? and of course, on every page that is language or concept specific there are needing to be words on those pages explaining the issue. so for instance, yes, a tutorial so to speak. but the tutorials will range from very basic to complex in nature.

the real issue here is that I want something that's going to be pleasing to the viewer's eye so they are kept engaged for long periods of time, along with a repetitive template-type of layout so I don't have to re-design every page when a constructual-concept changes in the slightest degree.

This post has been edited by ajetrumpet: 21 April 2020 - 01:05 PM

Was This Post Helpful? 0
  • +
  • -

#6 Splashsky   User is offline

  • D.I.C Addict
  • member icon

Reputation: 9
  • View blog
  • Posts: 565
  • Joined: 25-August 13

Re: suggestions on design for embedded code samples and HTML tables

Posted 21 April 2020 - 01:05 PM

Well then Laravel should be your go to framework. As for the visual template, your best option really is to build the layout/design of the site yourself, as not many templates will accommodate the style of website you want to build.
Was This Post Helpful? 0
  • +
  • -

#7 ajetrumpet   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 65
  • Joined: 09-November 19

Re: suggestions on design for embedded code samples and HTML tables

Posted 15 May 2020 - 07:19 PM

View PostSplashsky, on 21 April 2020 - 02:05 PM, said:

Well then Laravel should be your go to framework. As for the visual template, your best option really is to build the layout/design of the site yourself, as not many templates will accommodate the style of website you want to build.
Splash,

I haven't gone through the installation of Laravel completely, but I would like to know if the framework has an easy way to build template-oriented designs. Or is that up to me to custom build that stuff with the typical HTML/CSS/JS buildout that is so common in web designs everywhere? can Laravel help me in this regard at all or am I on my own? I guess that might be the purpose of a framework in general, so I might be on my own or have answered my own question for that matter. But I would appreciate a response to this if you can muster one. thanks. =)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1